微信小程序的配置文件和(小程序和页面)的生命周期
1. app.json配置
1.1 pages配置
{
"pages": [
"pages/index/index", // 页面配置 第一行为首页
"pages/logs/logs"
],
....
}
1.2 window配置
{
...
"window": {
"backgroundTextStyle": "light", // 下拉 loading 的样式,仅支持 dark / light
"navigationBarBackgroundColor": "#fff", // 背景颜色
"navigationBarTitleText": "WeChat", // 导航栏标题文字内容
"navigationBarTextStyle": "black" // 导航栏标题颜色,仅支持 black / white
},
...
}
####1.2.1 更多配置
{
"backgroundColor": "#fff", // 窗口的背景色
"backgroundColorTop":"#fff", // 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
"backgroundColorBottom":"#fff", // 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
"enablePullDownRefresh" : false,// 是否开启当前页面下拉刷新
"onReachBottomDistance": 50, // 页面上拉触底事件触发时距页面底部距离,单位为px
"pageOrientation" : "portrait", // 屏幕旋转设置,支持 auto / portrait / landscape
"disableScroll" : false, // 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置
"usingComponents": Object // 自定义组件....
}
1.3 tabBar配置(窗口底部tab栏)
"tabBar":{
"color": #fff, // tab 上的文字默认颜色,仅支持十六进制颜色
"list": [{
"pagePath": "pages/index/index", // 必须对应pages,不然不显示
"text": "首页"
},{
"pagePath": "pages/logs/logs",
"text": "日志"
}]
}
1.3.1 其他配置
"selectedColor": "#c3f3c3", // tab 上的文字选中时的颜色,仅支持十六进制颜色
"backgroundColor" : "#c3f3c3", // tab 的背景色,仅支持十六进制颜色
"borderStyle" : "#black", // tabbar 上边框的颜色, 仅支持 black / white
"position" : "#bottom", // tabBar 的位置,仅支持 bottom / top
"custom" : // 自定义 tabBar 2.5.0
"list": [{
"pagePath": "pages/index/index", // 页面路径,必须在 pages 中先定义 必须
"text": "首页" // tab 上按钮文字 必须
"iconPath":"图片路径" //图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
"selectedIconPath":"图片路径" //选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
}]
1.4 networkTimeout配置(网络超时)
...
"networkTimeout":{
"request":10000, //wx.request的超时时间,单位:毫秒。默认 60000
"connectSotcket":10000, //wx.connectSotcket的超时时间,单位:毫秒。默认 60000
"uploadFile":10000, //wx.uploadFile的超时时间,单位:毫秒。默认 60000
"downloadFile":1000 //wx.downloadFile的超时时间,单位:毫秒。默认 60000
},
...
1.5 debug配置
...
"debug":true // 开启debug console会出现日志
1.5.1 debug
可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有 Page 的注册,页面路由,数据更新,事件触发等。可以帮助开发者快速定位一些常见的问题。
1.6 更多配置看文档
- functionalPages 插件所有者小程序需要设置这一项来启用插件功能页。基础库 2.1.0 开始支持,低版本需做兼容处理。
- subpackages 启用分包加载时,声明项目分包结构。写成 subPackages 也支持。微信客户端 6.6.0 ,基础库 1.7.3 及以上版本支持
- workers 使用 Worker 处理多线程任务时,设置 Worker 代码放置的目录 基础库 1.9.90 开始支持,低版本需做兼容处理。
- requiredBackgroundModes 申明需要后台运行的能力,类型为数组。微信客户端 6.7.2 及以上版本支持
- …
2. 页面配置
2.1 index.json
{
"navigationBarTitleText": "index"
}
index.json主要是该app.json的window配置(目前只支持覆盖winodw配置~~(2020-1-10 小程序更新的有点快~~ ))
3.微信小程序的生命周期
2.1 app.js
//app.js
App({
// 程序初始化执行
onLaunch: function () {
console.log("程序初始化执行");
},
onShow: function() {
console.log("程序切换前台执行");
},
onHide: function(){
console.log("程序切换后台执行");
},
getUserInof:function(){
console.log("可以在每个page的js里面 通过getApp()来获取整个app,通过app.xxx获取信息")
},
})
2.2 index.js
onLoad: function (options) {
console.log("页面初始化执行");
},
onReady: function () {
console.log("页面初次渲染完成执行")
},
onShow: function () {
console.log("页面切换前台执行");
},
onHide: function () {
console.log("页面切换后台执行或者跳转到别的页面(页面还活着)执行");
},
onUnload: function () {
console.log("页面卸载,页面被杀了(每次打开就是新的)就会执行");
},
onPullDownRefresh: function () {
console.log("用户下拉执行");
},
onReachBottom: function () {
console.log("页面上拉触底执行");
},
onShareAppMessage: function () {
console.log("用户点击右上角分享执行");
}
1.3 参数传递
如果有链接跳转过来就会调用onLoad初始化页面,如果该链接还带有参数,则可以从options中去取
onLoad: function (options) {
console.log(options);
},
也可以通过wxml组件 <navigator uri="…/log/logs?id=1" >
onLoad: function (options) {
console.log(options.id);
},
redirect 使用这个属性页面就回不来了(会调用onUnload)
<navigator uri="…/log/logs?id=1" redirect >