uniapp

uni-app

vue语法

uni-app的生命周期

Vue的生命周期

创建

beforeCreate

created

可以使用this，没有dom

作用：

• 初始数据
• 注册监听事件
• 开启定时器
• ajax请求

挂载

beforeMount

mounted

可以操作dom

作用：

• 操作dom
• ajax请求

更新

beforeUpdate

updated

卸载

beforeDestory

作用：

• 移除事件监听
• 移除停止定时器

destory

运行环境

目录结构

┌─components		uni-app组件目录
│  └─comp-a.vue	可复用的a组件
├─hybrid		存放本地网页的目录
├─platforms		存放各平台专用页面的目录
├─pages		业务页面文件存放的目录
│  ├─index
│  │  └─index.vue	index页面
│  └─list
│     └─list.vue		list页面
├─static 		存放应用引用静态资源（如图片、视频等）的目录
├─wxcomponents	存放小程序组件的目录，详见
├─main.js               	Vue初始化入口文件
├─App.vue             	应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json    	 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json           	配置页面路由、导航条、选项卡等页面类信息，详见

全局配置

"globalStyle": {
	"pageOrientation": "portrait",
	"navigationBarTextStyle": "white",
	"navigationBarTitleText": "Hello uniapp",
	"navigationBarBackgroundColor": "#007AFF",
	"backgroundColor": "#F8F8F8",
	"backgroundColorTop": "#F4F5F6",
	"backgroundColorBottom": "#F4F5F6",
	"mp-360": {
		"navigationStyle": "custom"
	}
},

导航栏隐藏
titleView:false
状态栏高度
var(--status-bar-height)

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

-#ifdef：if defined 仅在某平台存在
-#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

条件编译写法	说明
-#ifdef APP-PLUS
需条件编译的代码
-#endif

仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif

除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

VueX

创建store目录store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
		//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
	},
    mutations: {
		//相当于同步的操作
	},
    actions: {
		//相当于异步的操作,不能直接改变state的值，只能通过触发mutations的方法才能改变
	}
})
export default store

在全局main.js中挂载

import store from './store/index.js'
Vue.prototype.$store=store

可以直接在页面中使用this.$store.state.变量名
引用变量的简写方法：mapState, mapGetters, mapActions, mapMutations

import {mapState,mapActions,mapGetters} from 'vuex'


computed:{
	//全局的vuex数据转换为组件计算出来的只读的
	...mapGetters(["totalLen"]),
	...mapState(['gTitle'])
		},
methods: {
	...mapActions(['getJok'])
		},

常用api

上传和下载 uni.upload uni.download
uni.previewImage 预览图片
uni.saveImageToPhotosAlbum 保存图片到系统相册
uni.getSystemInfo 获取系统信息
uni.chooseImage 选择图片

常用组件

uni.showToast 提示框