邏輯層

邏輯層，是事務(wù)邏輯處理的地方。對(duì)于微信小程序而言，邏輯層就是所有．js腳本文件的集合。微信小程序在邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。

在JavaScript的基礎(chǔ)上，微信團(tuán)隊(duì)做了一些適當(dāng)?shù)匦薷?，主要的修改包括?br> ■增加App和Page方法，進(jìn)行程序和頁(yè)面的注冊(cè)。
■增加getApp和getCurrentPage方法，分別用于獲取App實(shí)例和當(dāng)前頁(yè)面。
■提供豐富的API，如掃一掃、支付等微信特有能力。
■每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化能力。
但同時(shí)，由于框架并非運(yùn)行在瀏覽器中，所以JavaScript在Web中的一些能力都將無(wú)法使用，比如document、window等，這也給開(kāi)發(fā)帶來(lái)相應(yīng)的挑戰(zhàn)。
邏輯層的實(shí)現(xiàn)就是編寫各個(gè)頁(yè)面的．js腳本文件。開(kāi)發(fā)者編寫的所有代碼最終將會(huì)打包成一份JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷毀。類似ServiceWorker，所以邏輯層也稱為App Service。

注冊(cè)程序～App()方法

在邏輯層，App()方法用來(lái)注冊(cè)一個(gè)小程序。App()接受一個(gè)object參數(shù)，用于指定小程序的生命周期函數(shù)等。App()方法有且僅有一個(gè)，存在于app.js中。object參數(shù)說(shuō)明參見(jiàn)表

前臺(tái)、后臺(tái)：

• 用戶當(dāng)前界面運(yùn)行或操作小程序時(shí)為前臺(tái)；
• 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備Home鍵離開(kāi)微信，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái)；
• 當(dāng)再次進(jìn)入微信或再次打開(kāi)小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。
• 銷毀：只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正銷毀。此時(shí)代表小程序的生命周期結(jié)束。
  周期代碼:

App({ 
  onLaunch: function() { // 啟動(dòng)時(shí)執(zhí)行的初始化工作 }, 
  onShow: function() { // 小程序進(jìn)入前臺(tái)時(shí)執(zhí)行的操作 }, 
  onHide: function() { // 小程序進(jìn)入后臺(tái)時(shí)執(zhí)行的操作 },
  onError: function(msg) { console.log(msg) }, 
  globalData: 'I am global data' })

微信團(tuán)隊(duì)為開(kāi)發(fā)者提供了全局的getApp()函數(shù)，可以用來(lái)獲取小程序?qū)嵗?// other.js var appInstance = getApp() console.log(appInstance.globalData) //I am global data

注意
■App()方法須在app.js中注冊(cè)，且不能注冊(cè)多個(gè)。
■不要在定義App()內(nèi)的函數(shù)中調(diào)用getApp()，使用this就可以拿到App實(shí)例。
■通過(guò)getApp()獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)（如onLaunch、onShow、onHide等）。

注冊(cè)頁(yè)面～Page()方法

在邏輯層，Page()方法用來(lái)注冊(cè)一個(gè)頁(yè)面。Page()接受一個(gè)object參數(shù)，用于指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。Page()方法，每個(gè)頁(yè)面有且僅有一個(gè)，存在于該頁(yè)面的．js文件中。object參數(shù)說(shuō)明參見(jiàn)表

Page()方法示例代碼如下：

 // index.js 
Page({
  data: { 
      text: "This is page data." 
  }, 
  onLoad: function(options) { // 頁(yè)面加載時(shí)的初始化操作
  },          
  onReady: function() { // 頁(yè)面初次渲染完成時(shí)執(zhí)行的操作
   }, 
  onShow: function() { // 頁(yè)面顯示時(shí)執(zhí)行的操作
   },
  onHide: function() { // 頁(yè)面隱藏時(shí)執(zhí)行的操作
   }, 
  onUnload: function() { // 頁(yè)面卸載/關(guān)閉時(shí)執(zhí)行的操作
   },
   onPullDownRefresh: function() { // 用戶在頁(yè)面下拉時(shí)執(zhí)行的操     作 }, 
  onReachBottom: function() { // 到達(dá)頁(yè)面底部時(shí)執(zhí)行的操作 
  },
  onReachBottom: function() { // 到達(dá)頁(yè)面底部時(shí)執(zhí)行的操作 
  },     
  onShareAppMessage: function() { // 用戶分享時(shí)返回定制的分享  數(shù)據(jù) }, 
// 事件處理 
  viewTap: function() {   
      this.setData({  
               text: 'Set some data for   updating view.'   
        }) 
     }
 })

同樣，微信團(tuán)隊(duì)為開(kāi)發(fā)者提供了getCurrentPage()函數(shù)，用來(lái)獲取當(dāng)前頁(yè)面的實(shí)例。
注意
不要在App()中進(jìn)行onLaunch操作的時(shí)候調(diào)用getCurrentPage()，此時(shí)page還沒(méi)有生成。

1．初始化數(shù)據(jù)

初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。對(duì)象data將會(huì)以JSON的形式由邏輯層傳至視圖層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式：字符串、數(shù)字、布爾值、對(duì)象、數(shù)組。
視圖層可以通過(guò)WXML對(duì)數(shù)據(jù)進(jìn)行綁定。
示例代碼如下：

// wxml
// 渲染page()的數(shù)據(jù)
<view>{{text}}</view>
<view>{{array[0].msg}}</view>

//page.js
//page()中的初始化數(shù)據(jù)data
Page({
  data:{
      text:'init data',
      array:[{msg:'1'},{msg:'2'}]
  }
})

2．生命周期函數(shù)使用

onLoad是頁(yè)面加載時(shí)執(zhí)行的初始化操作：
■一個(gè)頁(yè)面只會(huì)調(diào)用一次。
■參數(shù)可以獲取wx.navigateTo和wx.redirectTo及中的query。
onShow是頁(yè)面顯示時(shí)執(zhí)行的操作。每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。
onReady是頁(yè)面初次渲染完成時(shí)執(zhí)行的操作：
■一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。
■對(duì)頁(yè)面的設(shè)置（如wx.setNavigationBarTitle）請(qǐng)?jiān)趏nReady之后設(shè)置。
onHide是頁(yè)面隱藏時(shí)執(zhí)行的操作。當(dāng)navigateTo或底部進(jìn)行tab切換時(shí)調(diào)用。
onUnload是頁(yè)面卸載時(shí)執(zhí)行的操作。當(dāng)進(jìn)行redirectTo或navigateBack操作的時(shí)候調(diào)用。

3．頁(yè)面相關(guān)事件處理函數(shù)

onPullDownRefresh是下拉刷新時(shí)執(zhí)行的操作，例如：
■監(jiān)聽(tīng)用戶下拉刷新事件。
■需要在頁(yè)面．json文件的window配置項(xiàng)中開(kāi)啟enablePullDownRefresh。
■當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的下拉刷新。onShareAppMessage是用戶分享時(shí)返回定制的分享內(nèi)容：
■只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“分享”按鈕。
■用戶點(diǎn)擊分享按鈕的時(shí)候會(huì)調(diào)用。
■此事件需要return一個(gè)Object，用于自定義分享內(nèi)容。
onShareAppMessage自定義分享字段如下：

onShareAppMessage示例代碼如下：

 Page({   
  onShareAppMessage: function () {   
      return {   
        title: ’自定義分享標(biāo)題’, 
         path: '/page/user? id=123'   
      }
   }
 })

4．事件處理函數(shù)

除了初始化數(shù)據(jù)和生命周期函數(shù)，Page()方法中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。我們可在視圖層通過(guò)對(duì)組件加入事件綁定，當(dāng)滿足觸發(fā)事件時(shí)，就會(huì)執(zhí)行Page()中定義的事件處理函數(shù)。
示例代碼如下：

 //  // 綁定tap事件到view組件上，處理事件的函數(shù)名為viewTap click me  // page.js Page({ // 定義一個(gè)viewTap事件處理函數(shù) viewTap: function() {   console.log('view tap')   } })

5．頁(yè)面數(shù)據(jù)設(shè)置及展現(xiàn)

在Page()中，我們要使用setData函數(shù)來(lái)將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的this.data的值。
注意
■this是包含它的函數(shù)作為方法被調(diào)用時(shí)所屬的對(duì)象，在小程序中一般指調(diào)用頁(yè)面。
■直接修改this.data無(wú)效，無(wú)法改變頁(yè)面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。
■單次設(shè)置的數(shù)據(jù)不能超過(guò)1024KB，請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。
setData()函數(shù)的參數(shù)接受一個(gè)對(duì)象。以“key, value”的形式表示將this.data中的key對(duì)應(yīng)的值改變成value。其中key可以非常靈活，包括以數(shù)據(jù)路徑的形式給出，如array[2].message, a.b.c.d，并且無(wú)須在this.data中預(yù)先定義。
示例代碼如下：

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

 // index.js Page({ data: { text: 'init data', array: [{text: 'init data'}], object: { text: 'init data' } }, changeText: function() { //這樣設(shè)置this.data.text = 'changed data’是不行的，會(huì)出錯(cuò) this.setData({ text: 'changed data' }) }, changeItemInArray: function() { // 可以這樣使用setData以修改動(dòng)態(tài)的數(shù)據(jù)路徑 this.setData({ 'array[0].text':'changed data' }) }, changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' }); }, addNewField: function() { this.setData({ 'newField.text': 'new data' }) } })

6．頁(yè)面棧及其實(shí)例獲取

框架以棧的形式維護(hù)了當(dāng)前的所有頁(yè)面。當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下：

getCurrentPages()函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面。
注意
不要嘗試修改頁(yè)面棧，會(huì)導(dǎo)致路由以及頁(yè)面狀態(tài)錯(cuò)誤。

7．理解頁(yè)面的生命周期

Page與實(shí)例的生命周期：

Page-周期.png

從圖中可以看到，左邊是視圖層（.wxml與．wxss文件），右邊是邏輯層（.js文件）。頁(yè)面初始化后，在整個(gè)生命周期中持續(xù)進(jìn)行相應(yīng)的業(yè)務(wù)數(shù)據(jù)準(zhǔn)備、數(shù)據(jù)展現(xiàn)及響應(yīng)事件處理、數(shù)據(jù)保存等，直到頁(yè)面卸載。

8．頁(yè)面的路由

在小程序中，所有頁(yè)面的路由全部由框架進(jìn)行管理，對(duì)于路由的觸發(fā)方式以及頁(yè)面生命周期函數(shù)參見(jiàn)表

模塊及調(diào)用

1．文件作用域

在頁(yè)面的JavaScript（.js）腳本文件中聲明的變量和函數(shù)只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數(shù)，不會(huì)互相影響。
通過(guò)全局函數(shù)getApp()可以獲取全局的應(yīng)用實(shí)例，如果需要全局的數(shù)據(jù)可以在App()中設(shè)置，例如：

 // app.js App({ globalData: 1 }) // a.js 
// 變量localValue只在a.js文件中有效 
var localValue = 'a'
 // 獲取App實(shí)例 
var app = getApp() 
// 獲取全局?jǐn)?shù)據(jù)值并修改
 app.globalData++ // b.js
 // 可以在b.js文件中重新定義變量localValue，這并不會(huì)影響a.js文件中的localValue 
var localValue = 'b' 
// 若a.js在b.js運(yùn)行，那么這里的globalData就應(yīng)是2 
console.log(getApp().globalData)

2．模塊化

我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的js腳本文件，作為一個(gè)模塊。
注意
模塊只有通過(guò)module.exports才能對(duì)外暴露接口以供其他．js文件引入使用。
示例代碼如下:

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

在需要使用這些模塊的．js文件中，使用require（path）將公共代碼引入。
示例代碼如下：
//call.js
var common = require('common.js')
Page({
    helloMINA:function(){
        common.sayHello('MINA')
  }
})

微信原生API

微信原生的API共有八大類：網(wǎng)絡(luò)API、媒體API、文件API、數(shù)據(jù)緩存API、位置API、設(shè)備API、界面API以及微信開(kāi)放接口。
在使用這些微信原生API之前，我們先看看注意事項(xiàng)：
■wx.on開(kāi)頭的API是監(jiān)聽(tīng)某個(gè)事件發(fā)生的API接口，接受一個(gè)回調(diào)（CALLBACK）函數(shù)作為參數(shù)。當(dāng)該事件觸發(fā)時(shí)，會(huì)調(diào)用該回調(diào)函數(shù)。
■如未特殊約定，其他API接口都接受一個(gè)OBJECT作為參數(shù)。
■object中可以指定success、fail、complete來(lái)接收接口調(diào)用結(jié)果（見(jiàn)下表）

微信原生API列表名稱及主要用途：

網(wǎng)絡(luò)API:

媒體API:

文件API:

數(shù)據(jù)緩存API:

位置API:

設(shè)備信息API:

界面API:

開(kāi)放API: