微信小程序——逻辑层

一、微信小程序的逻辑层

微信小程序的逻辑层包括

• JavaScript 引擎提供的JavaScript运行环境
• 微信小程序的特有功能

逻辑层将数据处理之后发送给视图层，并接受视图层的时间反馈。

在 JavaScript 的基础上，微信小程序增加了一些功能，以方便小程序的开发：

• 增加 App 和 Page 、Component方法，进行 程序注册 和 页面注册、组件注册
• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
• 有着丰富的 API，如扫一扫、微信支付等功能。
• 提供了模块化能力，每个页面有着独立的作用域

注意：小程序框架的逻辑层并不是运行在浏览器中，因此 JavaScript 在 web 中一些能力不能使用，如 window，document 等。

二、注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，例如：绑定生命周期回调函数、错误监听和页面不存在监听函数等。

App(Object object) 注册小程序

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

参数 Object object

属性	类型	默认值	必填	说明
onLaunch	function		否	在小程序初始化完成时出发，全局只出发一次。
onShow	function		否	小程序启动，或从后台进入前台显示时触发。
onHide	function		否	小程序从前台进入后台时触发。
onError	function		否	小程序发生脚本错误或 API 调用报错时触发。
onPageNotFound	function		否	小程序要打开的页面不存在时触发。可以页面跳转到错误页面
onUnhandledRejection	function		否	小程序有未处理的 Promise 拒绝时触发。
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问。例如：全局变量等

开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取添加到 App 上的函数和变量。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

三、注册页面

1、使用 Page 构造器注册页面

简单的页面可以使用 Page() 进行构造。

代码示例：

//home.js
Page({
  data: {
    //页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行，一个页面只会调用一次，可以在onLoad 的参数中获取打开当前页面路径中的参数
  },
  onShow: function() {
    // 页面 显示/切入前台 时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 用户上拉触底时执行
  },
  onShareAppMessage: function (options) {
    // 页面被用户分享时执行，可以自定义转发内容
  },
  onPageScroll: function(options) {
    // 页面滚动时执行，参数可以获得页面在垂直方向上已滚动的距离（单位px）
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // 当前页面是tab页面是，点击 tab 时执行
    console.log(item.index)	//被点击tabItem的序号，从0开始
    console.log(item.pagePath)	//被点击tabItem的页面路径
    console.log(item.text)	//被点击tabItem的按钮文字
  },
  // 自定义函数
  viewTap: function() {
    ...
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

2、在页面中使用 behaviors

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

用法类似自定义组件的behaviors

四、页面生命周期

五、页面路由

不同于 vue ，在小程序中所有页面的路由全部由框架进行管理

1、页面栈

框架是以栈的方式维护当前的所有页面，当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	说明
初始化	新页面入栈	只入栈初始页面，例如：home
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈	重定向即将当前页面跳转到新的页面
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

2、路由方式

对于路由的触发方式以及页面生命周期函数如下：

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo">	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo">	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 使用组件 <navigator open-type="navigateBack">；用户按左上角返回按钮	onUnload	onShow
Tab 切换	调用 API wx.switchTab 使用组件 <navigator open-type="switchTab">用户切换 Tab		各种情况请参考官网
重启动	调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch">	onUnload	onLoad, onShow

3、Tips

• 调用页面路由带的参数可以在目标页面的onLoad中获取。

六、模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports或者 exports 才能对外暴露接口。

• 在官方文档中更推荐采用 module.exports 来暴露模块接口。

  官方的话（看不懂）：

  exports 是 module.exports的一个引用，在模块里边随意更改 exports 的指向会造成未知的错误。

• 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。

//暴露接口
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//使用require将公共代码引入
var common = require('common.js')

七、API

在小程序 API 中有以下几种类型：

1、事件监听 API

约定，以 on 开头的 API 用来监听某个事件是否触发。

这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

代码示例

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

2、同步 API

约定，以 Sync 结尾的 API 都是同步 API。但并不是所有的同步 API 都是以 Sync 结尾。

同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

3、异步 API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：

Object 参数说明

参数名	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）
其他	Any	-	接口定义的其他参数