微信小程序開發教程（七）邏輯層——.js詳解

　　邏輯層，是事務邏輯處理的地方。對於小程序而言，邏輯層就是.js腳本文件的集合。邏輯層將數據進行處理後發送給視圖層，同時接收視圖層的事件反饋。

　　微信小程序開發框架的邏輯層是由JavaScript編寫。在JavaScript的基礎上，微信團隊作了一些適當的修改，以便提升開發小程序的效率。主要修改包括：

　　♦ 增長app和page方法，進行程序和頁面的註冊

　　♦ 提供豐富的API,如掃一掃、支付等微信特有的能力

　　♦ 每一個頁面有獨立的做用域，並提供模塊化能力。

　　邏輯層的實現就是編寫各個頁面的.js腳本文件。但因爲小程序並不是運行在瀏覽器中，因此JavaScript在Web中的一些能力沒法使用，如document、window等。

　　咱們開發編寫的全部代碼最終會打包成一份JavaScript，並在小程序啓動的時候運行，直到小程序銷燬。

 

註冊程序：App()方法

　　在邏輯層，App()方法用來註冊一個小程序。App()接受一個object參數，用於指定小程序的生命週期函數等。App()方法有且僅有一個，存在於app.js中。object參數見下表

　　

　　注意：onLaunch函數全局只觸發一次。

　　前臺、後臺：用戶當前界面運行或操做小程序時爲前臺；當用戶點擊左上角關閉，或者按了設備Home鍵離開微信，小程序並無直接銷燬，而是進入後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。

　　銷燬：只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被真正銷燬。此時表明小程序的生命週期結束。

　　關閉小程序(公共庫版本1.1.0開始支持)： 當用戶從掃一掃、轉發等入口(場景值爲1007, 1008, 1011, 1025)進入小程序，且沒有置頂小程序的狀況下退出，小程序會被銷燬。

　　示例代碼：

App({
  onLaunch: function(){
    //啓動時執行的初始化工做
  },
  onShow: function(){
    //小程序從後臺進入前臺時，觸發執行的操做
  },
  onHide: function(){
    //小程序從前臺進入後臺時，觸發執行的操做
  },
  globalData:'I am global data'
})

　　onLaunch, onShow 參數

獲取更多轉發信息

　　一般開發者但願轉發出去的小程序被二次打開的時候可以獲取到一些信息，例如羣的標識。如今經過調用 wx.showShareMenu 而且設置 withShareTicket爲 true ，當用戶將小程序轉發到任一羣聊以後，能夠獲取到這次轉發的 shareTicket，此轉發卡片在羣聊中被其餘用戶打開時，能夠在 App.onLaunch() 獲取到另外一個 shareTicket。這兩步獲取到的 shareTicket 都可經過 wx.getShareInfo() 接口能夠獲取到相同的轉發信息。

 

 

　　微信團隊爲開發者提供全局的getApp()函數，能夠用來獲取小程序實例。示例以下：

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

注意：
    ♦ App()方法須在app.js中註冊，且不能註冊多個。
    ♦ 不要再定義App()內的函數中調用getApp()，使用this就能夠拿到App實例。
    ♦ 經過getApp()獲取實例以後，不要私自調用生命週期函數。

 

 

 

註冊頁面：Page()方法

　　在邏輯層，Page()方法用來註冊一個頁面。Page()接受一個object參數，用於指定頁面的初始數據、生命週期函數、事件處理函數等。Page()方法每一個頁面有且僅有一個，存在於該頁面的.js文件中。

　　

　　示例代碼：

Page({
  Data: {
    Text: 'This is page data.'
  },
  onLoad: function (options) {
    //頁面加載時執行的初始化工做
  },
  onReady: function () {
    //頁面就緒後觸發執行的操做
  },
  onShow: function () {
    //頁面打開時，觸發執行的操做
  },
  onHide: function () {
    //頁面隱藏時，觸發執行的操做
  },
  onUnload: function () {
    //頁面關閉時，觸發執行的操做
  },
  onPullDownRefresh: function(){
    //用戶在頁面下拉時執行的操做
  },
  onReachBottom: function(){
    //到達頁面底部時執行的操做
  },
  //Event Handler
  viewTap: function () {
    this.setData({
      text: 'set some data for updating view.'
    })
  },
})

注意：
    ♦ 不要在 onLaunch 的時候調用 getCurrentPages()，此時 page 尚未生成。

 

初始化數據

　　初始化數據將做爲頁面的第一次渲染。對象data將會以JSON的形式由邏輯層傳至視圖層，因此其數據必須是能夠轉成JSON的格式：字符串、數字、布爾值、對象、數組。視圖層能夠經過WXML對數據進行綁定。

<!--demo.wxml-->
<view>{{text}}</view>
<view>{{array[0].msg}}</view>

//demo.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    text: 'init data',
    array: [{msg:'1'},{msg:'2'}]
  }
})

 

頁面的生命週期

 　　生命週期包括onLoad、onShow、onReady、onHide、onUnload。

　　onload：頁面加載時執行的初始化操做：

　　♦ 一個頁面只會調用一次。

　　♦ 參數能夠獲取wx.navigateTo和wx.redirectTo及<navigator/>中的query。

　　onShow：頁面顯示時執行的操做。每次打開頁面都會調用一次。

　　onReady：頁面初次渲染完成時執行的操做。

　　♦ 一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互。

　　♦ 對頁面的設置（如wx.setNavigationBarTitle）在onReady以後設置。

　　onHide：頁面隱藏時執行的操做。當navigateTo或底部進行tab切換時調用。

　　onUnload：頁面卸載時執行的操做。當進行redirectTo或navigateBack操做時調用。

 

頁面相關事件處理函數

　　onPullDownRefresh：下拉刷新時執行的操做。

　　♦ 監聽用戶下拉刷新事件。

　　♦ 須要在config的window選項中開啓enablePullDownRefresh。

　　♦ 處理完數據刷新後，wx.stopPullDownRefresh能夠中止當前頁面的下拉刷新。

 

事件處理函數

　　除了初始化數據和生命週期函數，Page()方法中能夠定義一些特殊的函數：事件處理函數。在視圖層經過對組件加入事件綁定，當知足事件時，就會執行Page()中定義的事件處理函數。

//<!--wxml-->
//綁定viwTap事件到view組件
<view bindtap="viewTap"> Click Me </view>

//page.js
Page({
  //定義一個viewTap事件處理函數
  viewTap:function(){
    console.log('view tap')
  }
})

 

頁面棧及其實例獲取

　　框架以棧的形式維護了當前的全部頁面。 當發生路由切換的時候，頁面棧的表現以下：

　　

　　getCurrentPages()函數用於獲取當前頁面棧的實例，以數組的形式按棧的順序給出第一個元素爲首頁，最後一個元素爲當前頁面。

注：不要嘗試修改頁面棧，會致使路由以及頁面狀態錯誤。

 

頁面的路由

　　在小程序中，全部頁面的路由所有都由框架進行管理，對於路由的觸發方式以及頁面生命週期見下表：

　　 Tab 切換對應的生命週期（以 A、B 頁面爲 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面爲例）：

 

 

模塊及調用

文件做用域

　　在頁面的JavaScript(.js)腳本文件中聲明的變量和函數只在該文件中有效；不一樣的文件中能夠聲明相同名字的變量和函數，不會相互影響。

　　經過全局函數getApp()能夠獲取全局的應用實例，若是須要全局的數據能夠在App()中設置。

//app.js
App({
   globalData:1 
})
//a.js
//變量localValue只在a.js文件中有效
var localValue = 'a'
//獲取App實例
var app = getApp()
//獲取全局數據值並修改
app.globalData++
//b.js
//能夠在b.js文件中從新定義變量localValue，這並不會影響 a.js文件中的localValue
var localValue = 'b'
//若a.js在b.js以前運行，那麼這裏的globalData就應是2
console.log(getApp().globalData)

 

模塊化

　　能夠將一些公共的代碼抽離成爲一個單獨的js腳本文件，做爲一個模塊。

注：模塊只有經過module.exports才能對外暴露接口以供其餘.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')
    }
})