uniapp基础

2022/02/21 web跨平台框架

uniapp的简单使用

1、简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

创建项目可以使用HBuilderX或使用vue-cli

# vue-cli
vue create -p dcloudio/uni-preset-vue my-project

2、目录结构

  • pages:页面存放目录
  • static:静态文件资源目录
  • App.vue:应用入口文件
  • Main.js:应用入口文件
  • manife.json:项目配置文件
  • pages.json:页面配置
  • Common:存放公用的文件
  • components:自定义组件目录
  • store:vuex目录
  • unpackage:编译后的文件存放目录

3、模板语法

在模板中使用data中的变量需要使用v-bind可以简写为:和vue中一样,包括v-on简写成@

<template>
	<view class="content">
		<view v-bind:class="title">
      
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		}
	}
</script>

各种语法基本上算是小程序和vue的结合版了。

4、组件

uniapp中的组件和微信小程序里的差不多

几个常用的:

  • 视图容器:view、scroll-view
  • 基础组件:icon、text
  • 表单组件:button、input、checkbox、textarea
  • 路由跳转:navigator
  • 媒体组件:audio、image
  • 地图组件:map
  • 画布组件:canvas

各种组件可以看https://hellouniapp.dcloud.net.cn/pages/component/view/view

5、自定义组件

自定义组件创建在./components/组件名.vue,符合这个规范的可以在页面中直接引用,而不需要引文件这些操作

// ./components/card.vue 组件内
<template>
	<view class="content">
		<view >
			card
		</view>
	</view>
</template>


// 使用的组件,无需import,直接标签
<template>
	<view class="content">
		<view :class="title">
			
		</view>
		<button @click="clickBtn">1111</button>
		<card></card>
	</view>
</template>

6、生命周期

应用生命周期:

  • onLaunch:应用初始化完成执行,全局只执行一次
  • onShow:应用显示的时候执行,或者从后台进入到前台
  • onHide:应用隐藏的时候执行,或者应用从前台到后台

页面生命周期:

  • onLoad:页面加载的时候触发
  • onReady:页面初次渲染完成触发
  • onShow:页面显示的时候触发
  • onUnload:页面卸载的时候触发
  • onHide:页面隐藏的时候触发

组件生命周期(和Vue生命周期一致):

  • beforeCreate:在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前调用
  • created:实例创建完成之后立即调用,实例上的方法属性也都配置完成,但是还没有挂载
  • beforeMount:在挂载开始之前被调用
  • mounted:挂载到实例上去之后调用。此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick
  • beforeUpdate:数据更新时调用
  • updated:更新完成后调用
  • beforeDestroy
  • destroyed

初次渲染顺序:

  1. App onLaunch
  2. App onShow
  3. page onLoad
  4. page onShow
  5. beforeCreate
  6. created
  7. beforeMount
  8. mounted
  9. page onReady

Search

    Table of Contents