微信小程序：MINA逻辑层

逻辑层涉及的是程序/页面的生命周期、业务逻辑、交互等方面。

一、注册程序

App

App()

App()函数注册小程序，接收一个object参数，其指定该程序的生命周期函数等。
object参数说明：

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数，监听小程序初始化	当小程序初始化完成时，会触发onLaunch（全局只触发一次）
onShow	Function	生命周期函数，监听小程序显示	当小程序启动、从后台进入前台触发onShow
onHide	Function	生命周期函数，监听小程序隐藏	当小程序从前台进入后台，会触发onHide
其他	Any	开发者自定义添加任意函数或数据到Object参数，用this访问

示例：

App({
  onLaunch: function() { 
    // Do something initial when launch. //初始化时
  },
  onShow: function() {
      // Do something when show. // 进入前台
  },
  onHide: function() {
      // Do something when hide. // 进入后台
  },
  globalData: 'I am global data' //全局数据
})

App.prototype.getCurrentPage()

getCurrentPage()函数用户获取当前页面的实例。

getApp()

getApp()获取小程序实例，示例：

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意：

• App()必须在app.js中注册，且不能注册多个。
• 不要在定义于App()内的函数中调用getApp()，直接使用this就可以拿到app实例。
• 不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。
• 通过getApp获取实例之后，不要私自调用生命周期函数。

  二、注册页面

  Page

  page()函数注册页面，同样接收一个Object参数，指定页面的初始数据、生命周期函数、事件处理函数等。
  object参数说明：

属性	类型	描述
data	Object	页面初始数据
onLoad	Function	生命周期函数，监听页面加载
onReady	Function	生命周期函数，监听页面渲染完成
onShow	Function	生命周期函数，监听页面显示
onHide	Function	生命周期函数，监听页面隐藏
onUnload	Function	生命周期函数，监听页面卸载
其他	Any	开发者自定义添加任意的函数或数据到Object参数中，用this访问

示例：

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
   // Do something when page close.
  },
  // Event handler.
  viewTap: function() {
   this.setData({
      text: 'Set some data for updating view.'
   })
  }
})

onLoad与onReady、onShow区别：onLoad是页面加载（未渲染）完成时调用，onReady是当页面所有组件渲染完成时调用，晚于onLoad,onShow是针对onHide的，页面显示出来或者从隐藏状态到显示状态时调用。
onHide与onUnload区别：onHide是页面隐藏时调用，页面没有销毁，仍占用内存；onUnload是页面卸载调用，页面会被销毁，内存释放。

初始化数据

初始化数据是页面第一次渲染需要的数据，data是以JSON形式从逻辑层传到渲染层，所以data必须是可以转化成JSON的格式：字符串，数字，布尔值，对象，数组。
渲染层可以通过WXML对数据进行绑定。
数据绑定：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

初始化data：

 Page({
      data: {
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
  }
})

事件处理函数

除了初始化数据和生命周期函数，Page中还可以定义事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行Page中定义的事件处理函数。
事件绑定：

<view bindtap="viewTap"> click me </view>

初始化事件处理函数：

Page({
    viewTap: function() {
    console.log('view tap')
  }
})

Page.prototype.setData()

setData函数将数据从逻辑层发送到视图层，改变对应的this.data的值。

注意：

• 直接修改this.data无效，无法改变页面的状态，还会造成数据不一致。
• 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

setData()参数格式

接受一个对象，以key，value的形式表示将this.data中的key对应的值改变成value。
其中key可以非常灵活，以数据路径的形式给出，如array[2].message，a.b.c.d，并且不需要在this.data中预先定义。
示例代码：

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

view绑定text,然后通过几个按钮改变text的值。
页面逻辑层代码：

//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data' ，这样修改无效，必须使用setData函数修改
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    // 通过数据路由找到key，并设置新的值
    var changedData = {}
    var index = 0
    changedData['array[' + index + '].text'] = 'changed data'
    this.setData(changedData)
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

页面声明周期函数

下图完整的对应了视图层和逻辑层在页面生命周期中的对应关系，感兴趣的同学可以从上到下缕一遍。

mina-lifecycle.png

页面路由

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

路由方式	触发时机	路由后页面	路由前页面
初始化	小程序打开的第一个页面	onLoad，onShow
打开新页面	调用APIwx.nativateTo或使用组件Natigator	onLoad，onShow	onHide
页面重定向	调用APIwx.redirectTo或使用组件Natigator	onLoad，onShow	onUnload
页面返回	调用APIwx.navigatBack或用户按左上角返回按钮	onShow	onUnload
Tab切换	多Tab模式下用户切换Tab	第一次打开onLoad，onshow；否则onShow	onHide

三、模块化

文件作用域

在JavaScript文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
通过全局函数getApp()可以获取全局的应用实例，如果需要全局的数据可以在App()中设置，如：

app.js

App({
  globalData: 1
})

a.js

// 页面数据只能在本页面使用
var localValue = 'a'
// 获取小程序实例
var app = getApp()
// 改变全局数据
app.globalData++

b.js

 // 在不同的页面仍可以定义localValue，与a.js不会产生冲突
var localValue = 'b'
//使用全局变量，如果a.js已经运行过，此处打印值为2
console.log(getApp().globalData)

模块化(我理解就是封装,与React Native的写法一样)

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

// common.js
function sayHello(name) {
  console.log('Hello ' + name + '!')
}
module.exports = {
  sayHello: sayHello
}

​在需要使用这些模块的文件中，使用require(path)将公共代码引入。

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
})

四、API

MINA提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。