简介：Uni-app是基于Vue+微信小程序体系，且基Uni-app可以开发 微信小程序、H5、安卓app、ios-app等多端项目

1、新建uni-app——Hbuilderx

2、运行

 3、真机调试

android直接链接数据线，选择传输文件，就可以

ios 需要在电脑安装“牛学长苹果数据管理工具”，然后链接数据线，在找到手机上的开发者模式

如何打开ios设备开发者模式

微信小程序调试

4、工程目录结构

 5、应用配置——mainfest.json

 把上边微信公众平台中的小程序id复制到下边

 6、编译配置——vue.config.js

可选的配置文件，如果项目中有这个文件，就会被自动加载，一般用于配置webpack等编译选项

 7、全局配置——page.json

对uni-app进行全局配置的，决定页面文件的路径、窗口样式、原生的导航栏、底部的tabbar，它类似于微信开发者工具小程序中的app.json

8、主组件App.vue——生命周期等回调函数，不需要想vue一样写模板语法

9、入口文件main.js——跟以前vue的差不多，引入vue，实例化一个对象并且挂载到页面上去

10、uni-app开发规范以及资源路径

 11、uni-app生命周期——支持vue声明周期，新增了应用生命周期和页面生命周期

 注：应用生命周期写在App.vue

 12、uni-app页面跳转、传参、分包

 

 13、uni-app的常用组件简介——uni-app官网

 14、uni-app常用的api——uni.setStorage(OBJECT) @setstorage | uni-app官网

15、uni-app的自定义组件与通信

父传子————————————————

父亲：在行间动态传值

 子组件：props接收

子改父————————————————

子组件用$emit发布父组件上的方法，间接让父组件自己改自己

 子组件改tabBar中的数据————————————————

tabBar中$on订阅一个事件

 子组件$emit发布这个事件，并传递参数

 16、uni-app Vuex状态管理

 登录、退出 userName在store中的存储，以及本地存储实现

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
		userName:uni.getStorageSync('userName')?uni.getStorageSync('userName'):'未登录用户'
	},
	mutations:{
		MLOGIN(state,userName){
			uni.setStorageSync('userName',userName)
			state.userName=userName
		},
		MLOGOUT(state){
			uni.clearStorageSync('userName')
			state.userName='退出状态用户'
		}
	},
	actions:{
		login(context,userName){
			context.commit('MLOGIN',userName)
		},
		logout(context){
			context.commit('MLOGOUT')
		}
	}
})
export default store

17、uni-app运行环境判断与跨端兼容

 注：以上一般写在main.js中去判断

 

 

18、如何使用npm引入uview-ui插件库

npm init -y

npm i uview-ui

npm update uview-ui(更新)

main.js引入

import uView from 'uview-ui';

Vue.use(uView);

编辑器安装相关依赖----插件安装

 

     "easycom":{
        "^u-(.*)":"iview-ui/components/u-$1/u-$1.vue"
    }

19、uni-app——多端打包——web——h5——android——ios——基于小程序环境下运行的

如何链接手机mumu模拟器测试——abd路径+7555(固定的)

 用这两个标签包起来，代表此按钮只在微信里生效<!--#ifdef MP-WEIXIN>  按钮   <!--#endif>

 下边的代表在微信里为true，不再微信里为false

 下边代表在只在微信里执行

微信小程序中有下边这个分享功能，在ios模拟器中没有

 加以下断言代码

 css适配下图，蓝色线条上边代表在微信中的宽度，下边代表不在微信中的宽度，比如app