Micro letter applet articles] V. micro-channel configuration file and applet (small and page) life cycle

Micro-channel configuration file and applet (small and page) life cycle

1. app.json Configuration

1.1 pages Configuration

{
  "pages": [
    "pages/index/index",	// 页面配置 第一行为首页
    "pages/logs/logs"
  ],
  ....
}

1.2 window configuration

{
  ...
  "window": {
    "backgroundTextStyle": "light",  //	下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",	// 背景颜色
    "navigationBarTitleText": "WeChat",	// 导航栏标题文字内容
    "navigationBarTextStyle": "black"	// 导航栏标题颜色，仅支持 black / white
  },
  ...
}

#### 1.2.1 More Configuration

	{
		"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 configuration (bottom of the window tab bar)

"tabBar":{
	"color": #fff,	// tab 上的文字默认颜色，仅支持十六进制颜色
    "list": [{
      "pagePath": "pages/index/index",	// 必须对应pages，不然不显示
      "text": "首页"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }

1.3.1 Additional Configuration

	"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 configuration (network timeout)

	...
"networkTimeout":{
    "request":10000,	//wx.request的超时时间，单位：毫秒。默认 60000	
    "connectSotcket":10000,	//wx.connectSotcket的超时时间，单位：毫秒。默认 60000	
    "uploadFile":10000,	//wx.uploadFile的超时时间，单位：毫秒。默认 60000	
    "downloadFile":1000	//wx.downloadFile的超时时间，单位：毫秒。默认 60000	
},
	...

1.5 debug configuration

	...
	"debug":true // 开启debug console会出现日志

1.5.1 debug

Can open the Developer Tools in debug mode, the console panel in developer tools, debugging information given in the form info, the registration information has Page, page routing, data updates, event triggers and so on. It can help developers quickly locate some common issues.

1.6 More Configuration to see Documentation

1. functionalPages plug-owner of a small program you need to set this item to enable plug-in function page. Infrastructure Library 2.1.0 support, low version is compatible with processing to be done.
2. When the subpackages enable subcontractors to load, declared project subcontracting structure. Written subPackages also supported. Micro-channel client 6.6.0, 1.7.3 and above basic library support
3. When workers use Worker handle multi-threaded tasks, set Worker code is placed in the directory infrastructure to support the library 1.9.90 start, low-compatible version to be done to deal with.
4. requiredBackgroundModes Affirming that capacity needs to run in the background, the type of array. Micro-channel client 6.7.2 and above support
5. …

2. Configure page

2.1 index.json

{
	"navigationBarTitleText": "index"
}

index.json main window of the configuration of the app.json (currently only supports configuration covering winodw ~~ (2020-1-10 applet updated a little faster ~ ~))

3. Micro-letter applet lifecycle

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 parameter passing

If there is a link to jump over the onLoad will initialize the page, if the link also has parameters, you can pick from the options in

onLoad: function (options) {
	console.log(options);  
},

You can also wxml component <navigator uri = "... / log / logs? Id = 1">

onLoad: function (options) {
	console.log(options.id);  
},

redirect Use this property page to come back (calls onUnload)
<Navigator uri = "... / log / logs? the above mentioned id = 1" redirect>