小程序文档阅读笔记（一）

1. app.json 全局配置

(1) functionalPages

插件所有者小程序需要设置这一项来启用插件功能页

(2) subpackages

启用分包加载时，声明项目分包结构

(3) preloadRule

分包预下载规则

(4) workers

使用Worker处理多线程任务时，设置worker代码放置目录

(5) requiredBackgroundModes

声明后台需要运行的能力：目前支持audio,location

{
	"requiredBackgroundModes": ["audio", "location"]
}

注：开发版体验版直接生效，正式版需要审核

(6) plugins

声明小程序需要使用的插件

(7) usingComponents

在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。

(8) PermissionObject

属性 | 类型 | 必填 | 默认值 | 说明
desc string 是 小程序获取权限时展示的接口用途说明。最长 30 个字符

{
	"permission": {
		"scope.userLocation": {
			"desc": "你的位置将用于小程序位置接口的效果展示"
		}
	}
}

(9) useExtendedLib

指定需要引用的扩展库：kbone,weui
指定后，相当于引入了对应扩展库相关的最新版本的 npm 包，同时也不占用小程序的包体积。目前暂不支持在分包中引用

{
	"useExtendedLib": {
		"kbone": true,
		"weui": true
	}
}

小结：
需要进一步了解的项：

• 插件
• 分包
• workers
• kbone

2. 小程序宿主环境

小程序运行环境分为渲染层和逻辑层
小程序渲染层和逻辑层分别由两个线程管理：渲染层由WebView进行渲染，逻辑层采用JsCore线程执行js脚本。
一个小程序存在多个界面，所有渲染层存在多个WebView线程。
这两个线程的通信会由微信客户端（Native）做中转，也通过Native发送http请求到服务器，接收web socket

3. 小程序场景值

可以在App的onLaunch和onShow,或wx.getLaunchOptionsSync中获取场景值。

4.小程序逻辑层

注册小程序

App({
	onLaunch(options) {
		// do sth initial when launch,只执行一次
	},
	onShow(options) {},
	onHide () {},
	onError(msg) { console.log(msg)},
	globalData: {}
})

注册页面

Page({
	data: {},
	onLoad: function (options) {
		// 页面创建时执行
	},
	onShow: function () {
		// 页面出现在前台时执行
	},
	onReady: function () {
		// 页面首次渲染完毕执行
	},
	onHide: function () {
		// 页面从前台变为后台时执行
	}，
	onUnload: funtion () {
		// 页面销毁时执行
	},
	customData: {}
})

behavior可以用来让多个页面有相同的字段和方法

// mybehavior.js
module.exports = Behavior({
	data: {
		sharedText: 'This is a piece of data shared between page'
	},
	methods: {
		sharedMethod: function () {}
	}
})

// page-a.js
var myBehavior = require('mybehavior.js');
Page({
	behaviors: [myBehavior],
	onLoad: function () {
		this.data.sharedText === 'This is a piece of data shared between pages.'
	}
})

注：在页面中使用behaviors，可以带来简便

页面路由

框架以栈的形式维护了当前所有页面
初始化：新页面入栈，路由后页面onLoad,onShow

打开新页面： 新页面入栈;当前页面onHide,新页面onLoad,onShow

页面重定向：当前页面出栈，新页面入栈;路由前页面onUnload,路由后页面onLoad,onShow

页面返回：页面不断出栈，直到目标返回页;路由前页面onUnload,路由后页面onShow

Tab切换：页面全部出栈，只留下新的tab页;
假如A,B都是tab页
A->B,A.onHide(),B.onLoad(),B.onShow()
A->B(再次打开)，A.onHide(),B.onShow()

重加载：页面全部出栈，只留下新的页面;路由前页面onUnload,路由后页面onLoad,onShow

小结：1.Component待补充 2.理解页面生命周期 3.关于路由实现原理？tab切换是否出栈

5.小程序视图层

列表渲染

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="unique">
	{{idx}}: {{itemName.message}}
</view>

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
wxs
小结:wx:key的作用，实现原理

获取页面上节点信息

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // #the-id 节点的上边界坐标（相对于显示区域）
})
query.selectViewport().scrollOffset(function(res){
  res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()

在自定义组件或包含自定义组件的页面中，推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ，这样可以确保在正确的范围内选择节点
响应屏幕旋转

Page({
 onResize(res) {
   res.size.windowWidth // 新的显示区域宽度
   res.size.windowHeight // 新的显示区域高度
 }
})

总结：界面动画

6.运行机制

小程序销毁时机
app.json window配置

{
	"window": {
		"restartStrategy": "homePage"
	}
}

homePage :如果从这个页面退出小程序，下次将从首页冷启动
homePageAndLatestPage: 如果从这个页面退出小程序，下次冷启动后立刻加载这个页面，页面的参数保持不变（不可用于 tab 页）

退出状态
当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态，可以在这个回调函数中“保存”一些数据，下次启动时可以通过 exitState 获得这些已保存数据

Page({
  onLoad: function() {
    var prevExitState = this.exitState // 尝试获得上一次退出前 onSaveExitState 保存的数据
    if (prevExitState !== undefined) { // 如果是根据 restartStrategy 配置进行的冷启动，就可以获取到
      prevExitState.myDataField === 'myData' 
    }
  },
  onSaveExitState: function() {
    var exitState = { myDataField: 'myData' } // 需要保存的数据
    return {
      data: exitState,
      expireTimeStamp: Date.now() + 24 * 60 * 60 * 1000 // 超时时刻
    }
  }
})

启动时更新
小程序每次冷启动时，都会检查是否有更新版本，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。

如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})