背景

• 由于之前用过mpvue，美团突然不跟新了。
• 有时间就学习下uni-app的项目创建
• 微信小程序开发模板

生命周期

1、 应用生命周期

• 配置在App.vue中

                onLaunch: function() { //初始化完成时触发 全局只触发一次
			//console.log('App Launch')
		},
		onShow: function() { //当 uni-app 启动，或从后台进入前台显示
			//console.log('App Show')
		},
		onHide: function() { //从前台进入后台
			//console.log('App Hide')
		}

2、页面生命周期

文档

• 在页面中

                onLoad(option) { //此页面加载时将执行我   //option为object类型，会序列化上个页面传递的参数
			console.log(18, option)
			console.log('onLoad')
		},
		onShow() { //此页面显示时将执行我
			console.log('onShow')
		},
		onReady() { //此页面初次在屏幕上渲染完成之后会执行我

		},

样式单位

• 微信小程序使用rpx来进行标记的。
• 而uni-app 使用upx。
• 官方推荐使用rpx, 公告

项目自动px转换为rpx

在文件manifest.json中

transformPx此参数为是否开启px转rpx,设置为true就行。

sass/scss环境安装

npm i node-sass sass-loader -D

公共样式文件

• 发现uni-app自带，就是uni.scss这个入口文件，无需任何配置，很方便。

页面跳转(常用)

官方文档

1、保留当前页面内容,进行跳转，可以返回

uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

2、关闭当前页面，进行跳转，无法返回

uni.redirectTo({
    url: 'test?id=1'
});

使用第三方vantui库

参考

• 好像无法npm安装，需要手动下载weapp文件。
• 通过微信小组件引入

package.json

"globalStyle": {
    "usingComponents": {
			"van-button": "./wxcomponents/vant/button/index"// 下载下来的vant文件存放位置
		}
}

小程序分包subPackages

• 微信小程序大小限制，一个包最大只能2M,所以有了分包。
• 文档

页面文件目录

**package.json**文件

    "pages": [
    		{
    			"path": "pages/index/index"
    		},
    		{
    			"path": "pages/test/index"
    		}
    	],
	"subPackages": [
		{
			"root": "subPages",
			"pages": [
				{
					"path": "pageA"
				}
			]
		}
	],