uni-app快看

一、什么是uni-app

uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

二、uni-app从无到有

• 首先你需要你要一个开发工具HbuilderX，可以到官网下载最新版.HBuilderX官网

• 然后就是创建一个新的uni-app项目
  

• 先看一下创建好的文件目录
  

• 从上之下依次是

项目页面文件 -- pages
静态资源文件--- static 
全局页面文件（相当于vue中app.vue）----- app.vue
全局引入文件---main.js
设置文件---当uni-app编译到不同平台是在这个文件中设置 manifest.json
全局配置文件 pages.json
编译scss语法  -- uni.scss（uni-app是可以自动编译scss语法的）

• 运行
  
• 在运行旁边的发行中进行打包上线，默认是上线到HBuilder的服务器上，然后在上线完成之后会返回给你你个地址，这个地址就是上线之后的apk下载地址—最多下载五次

三、uni-app基础语法

uni-app的基础语法和vue一样，拥有双向数据绑定，但是在它的使用上如果是官方已经封装好的，那是就是用uni.方法名来使用

四、像素单位

最好使用rpx ，和微信小程序一样，1px相当于2rpx，在开发的时候最好使用，宽度为375预览来进行开发

五、路由跳转

1. 使用uni.navgetTo({})

uni.navgetaTo({
	url:"页面的相对路径" // 可以在路径后面拼接参数，在到达的页面中的onload声明周期中接收
	//这中方法只能跳转非tabbar页面，
})

官网路由跳转

六、配置tabbar

和微信小程序一样，同样可以配置tabbar，配置规则和tabbar一样，在pages.js中进行配置

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#70d9ff",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/biaoqianA01_shouye-36.png",
				"selectedIconPath": "static/biaoqianA01_shouye-31.png",
				"text": "首页"
			}, {
				"pagePath": "pages/dynamic/dynamic",
				"iconPath": "static/biaoqianA01_faxian-37.png",
				"selectedIconPath": "static/biaoqianA01_faxian-32.png",
				"text": "动态"
			},
			{
				"pagePath": "pages/news/news",
				"iconPath": "static/biaoqianA01_xiaoxi-39.png",
				"selectedIconPath": "static/biaoqianA01_xiaoxi-34.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "static/biaoqianA01_wode-40.png",
				"selectedIconPath": "static/biaoqianA01_wode-35.png",
				"text": "我的"
			}
		]
	},

官网对tabbar的说明

七、请求接口

uni.request({}) 方法，我们可以对这个使用promise进行封装，在使用async 和 await 避免回调地狱

let request = function(url, method = "GET", data) {
		uni.showLoading({
			title:"加载中"
		})
	return new Promise((resolve, reject) => {
		uni.request({
			url:"*****"+url, // 域名拼接参数
			data,
			method,
			header:{
				"token":uni.getStorageSync('token')
			},
			// 成功回调o
			success(res) {
				resolve(res)
			},
			// 失败回调
			fail(re) {
				reject(re)
			},
			// 无论成功失败
			complete(res) {
				uni.hideLoading()
			}
		})
	})
}

export default request
// 封装之后导出，然后在mai.js中引入

八、使用组件

使用组件就是和vue的使用方法一样，同样的封装，同样的引入，同样的注册，uni-app还提供了大量的插件库，可以进行下载。

官网的插件市场

九、生命周期

大概分为是三个等级，全局，页面，组件

1. 全局，就是书写在app.vue中的生命周期

		onLaunch: function() {
			// console.log('App Launch')
			// 在进入时执行
		},
		onShow: function() {
			// console.log('App Show')
			// 从后台切换出来的时候执行
		},
		onHide: function() {
			// console.log('App Hide')
			// 切换到后台时执行
		}

2. 页面，书写在页面中生命周期

onload(){} // 第一次进入页面时执行
onShow(){} // 从其他页面进入该页面时执行
onHide(){} // 从该页面跳转到其它页面时执行
// 大概常用的就这三个

官网声明周期

3. 组件，书写在组件中
   组件生命周期使用的是vue的声明周期
   官网组件声明周期

十、uni-app之nvue

uni-app是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎。
小程序方式的webview渲染，和weex方式的原生渲染，两种渲染引擎可以自己根据需要选。

vue文件走的webview渲染

nvue走weex方式的原生渲染

组件和js写法是一样的，css不一样，原生排版的能用的css必须是flex布局

uni-app的App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

十一、存储数据

1. 存储在本地里

uni.setStorageSync('存储在本地存储中的名字',要存储的内容) // 存储
uni.getStorageSync('存储在本地存储中的名字') // 读取

官网本地存储

2. 公共变量
   看官网