3.1 邏輯層

小程序開發框架的邏輯層又稱為App Service，是由JavaScript編寫和實現的。開發者寫的所有代碼最后將被打包成一份JavaScript，并在小程序啟動的時候運行，直到小程序被銷毀。

邏輯層的主要作用是處理數據后發送給視圖層渲染以及接收視圖層的事件反饋。

為了更方便地進行項目開發，小程序在JavaScript的基礎上進行了一些優化，例如：

（1）新增App()和Page()方法，分別用于整個應用程序和單獨頁面的注冊。

（2）新增getApp()和getCurrentPages()方法，分別用于獲取整個應用實例和當前頁面實例。

（3）提供豐富的微信原生API，例如可以方便地獲取微信用戶信息、本地存儲、掃一掃、微信支付、微信運動等特殊功能。

（4）每個頁面具有獨立的作用域，并提供模塊化功能。

需要注意的是，由于框架不在瀏覽器中運行，所以JavaScript與瀏覽器相關的一些功能無法使用，例如document、window等。

3.1.1 注冊程序

1 App()方法

小程序通過使用App(OBJECT)方法進行應用注冊，用其指定小程序的生命周期函數。

OBJECT參數如表3-1所示。

表3-1 App()方法的OBJECT參數

用戶可以使用微信web開發者工具在空白app.js文件中直接輸入關鍵詞app，此時會自動出現提示列表，如圖3-1所示。

圖3-1 app.js的代碼提示列表

默認選擇提示列表中的第一項，直接按回車鍵就可以自動生成帶有生命周期全套函數的代碼結構，如圖3-2所示。

圖3-2 app.js自動生成App()代碼

事實上，App()中的這些函數均為可選函數，開發者可以根據實際需要刪除其中的部分函數，或保留這些函數但空著不填充內容。

第12、19行注釋語句均提到了小程序后臺和前臺的概念，具體說明如下。

?　小程序后臺：指的是小程序沒有在手機當前畫面顯示，但是并沒有被銷毀。當用戶單擊左上角的按鈕關閉小程序或者按設備的Home鍵離開微信時會進入后臺運行狀態。

?　小程序前臺：指的是小程序在手機當前畫面被使用。當用戶再次打開處于后臺運行狀態的小程序時會重新進入前臺運行狀態。

由圖3-2中的代碼可見，onLaunch()、onShow()和onError()方法在觸發時均會返回參數，用戶可以利用這些參數進行狀態的判斷與處理。其中，onLaunch()與onShow()方法返回的參數名稱完全相同，具體如表3-2所示。

表3-2 onLaunch()和onShow()方法返回的參數

支持返回referrerInfo.appId的場景值如表3-3所示。

表3-3 支持返回referrerInfo.appId的場景值

說明：關于場景值的更多介紹，見附錄。

除了函數外，App()也支持添加自定義的全局變量，示例代碼如下：

這里，全局變量的名稱、取值和數量都可以由開發者自定義。

2 onPageNotFound()方法

當需要打開的頁面不存在時，微信客戶端會有一個原生模板頁面提示。如果開發者不希望跳轉到此頁面，想自行處理，則需用到onPageNotFound()方法。

該方法從基礎庫1.9.90開始支持，低版本需要做兼容處理。當要打開的頁面并不存在時，會回調這個方法并帶有3個參數，具體參數內容如表3-4所示。

表3-4 onPageNotFound()方法的參數

onPageNotFound()方法的示例代碼如下：

上述代碼可以用指定的頁面代替原生模板頁面。需要注意的是，如果onPageNotFound()回調中又重定向到另一個不存在的頁面，將重定向到微信自帶的原生模板頁面提示頁面不存在，并且不再觸發onPageNotFound()監聽。

3 getApp()方法

在小程序的其他JS文件中均可以使用全局的getApp()方法獲取小程序實例。

例如，test.js，示例代碼如下：

1. var app=getApp()
2. console.log(app.globalData.userInf)

此時，就可以在test.js頁面獲得app.js中保存的公共數據，并在console控制臺打印輸出。

需要注意的是，用戶不可以在app.js的App()函數內部調用getApp()方法，可以直接使用關鍵字this代替。例如：

上述代碼就在onLoad()方法中直接使用了this關鍵字獲得全局變量。

3.1.2 注冊頁面

小程序在每個頁面JS文件中通過使用Page(OBJECT)方法進行頁面注冊，該方法可以用于指定小程序頁面的生命周期函數。Page()方法的OBJECT參數如表3-5所示。

表3-5 Page()方法的OBJECT參數

在微信web開發者工具中新建頁面時會自動生成頁面JS文件的Page()方法。這里以test頁面為例，創建完成后test.js的代碼如下：

與App()方法的函數情況類似，開發者同樣可以根據實際情況刪除Page()中不需要的函數，或者保留該函數內部為空白。

除了函數外，Page()同樣也支持添加自定義的頁面變量，示例代碼如下：

這里，變量的名稱、取值和數量也都可以由開發者自定義。

1 初始數據

在Page()方法中默認生成的第一項就是data屬性，該屬性是頁面第一次渲染使用的初始數據。當頁面加載時，data將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型，例如字符串、數字、布爾值、對象、數組。渲染層可以通過WXML對數據進行綁定。

例如在data中放置兩個自定義數據，頁面JS文件的示例代碼如下：

對應WXML的示例代碼如下：

<view>{{msg01}} {{msg02}}</view>

此時{{msg01}}和{{msg02}}不會顯示字面內容，而是會查找data中的初始數據，然后顯示出“Hello 2018”字樣。

2 生命周期回調函數

Page()函數中默認生成的onLoad()、onShow()、onReady()、onHide()以及onUnload()均屬于頁面的生命周期回調函數，具體說明如下。

?　onLoad()：格式為onLoad(Object query)，只在頁面加載時觸發一次，可以在onLoad()的參數中獲取打開當前頁面路徑附帶的參數。

?　onShow()：當頁面顯示或從小程序后臺切入前臺時觸發。

?　onReady()：當頁面初次渲染完成時觸發。注意，一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。

?　onHide()：當頁面隱藏／切入后臺時觸發。例如navigateTo或底部tab切換到其他頁面，小程序切入后臺等。

?　onUnload()：當頁面卸載時觸發。例如redirectTo或navigateBack到其他頁面時。

3 頁面事件處理函數

Page()方法中默認生成的onPullDownRefresh()、onReachBottom()、onShareAppMessage()以及未自動生成的onPageScroll()、onTabItemTap()均屬于頁面事件處理函數，具體說明如下。

?　onPullDownRefresh()：監聽用戶下拉刷新事件，需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。

?　onReachBottom()：監聽用戶上拉觸底事件，可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。在觸發距離內滑動期間，本事件只會被觸發一次。

?　onPageScroll(OBJECT)：監聽用戶滑動頁面事件。其參數OBJECT具有唯一屬性scrollTop，該屬性為Number類型，表示頁面在垂直方向已滾動的距離（單位為px）。

?　onShareAppMessage(OBJECT)：監聽用戶單擊頁面內“轉發”按鈕（<button>按鈕組件，其屬性值open-type="share"）或右上角菜單“轉發”按鈕的行為，并且自定義轉發內容。其OBJECT參數如表3-6所示。

表3-6 onShareAppMessage()方法的OBJECT參數

此事件需要返回一個Object對象，用于自定義轉發內容，返回內容如表3-7所示。

表3-7 onShareAppMessage()方法的返回的Object對象

onShareAppMessage(OBJECT)方法的示例代碼如下：

說明：第8行引號中的/page/user是自定義頁面地址，id=123是自定義參數內容。

?　onTabItemTap(OBJECT)：單擊tab時觸發，從基礎庫1.9.0開始支持，低版本需做兼容處理。其OBJECT參數如表3-8所示。

表3-8 onTabItemTap()方法的OBJECT參數

onTabItemTap(OBJECT)方法的示例代碼如下：

4 組件事件處理函數

Page()方法中還可以定義組件事件處理函數，在WXML頁面的組件上添加事件綁定，當事件被觸發時就會主動執行Page()中對應的事件處理函數。

例如tap就是單擊事件，可以使用bindtap屬性在組件上進行綁定。這里以<button>按鈕組件為例，為其綁定單擊事件的WXML相關代碼如下：

<button bindtap="btnTap">單擊此處</button>

在JS的Page()方法中相關代碼如下：

除了bindtap可以綁定單擊事件外，還有很多事件，詳見3.2.1節“WXML”。

5 route

在Page()方法中可以使用this.route查看當前頁面的路徑地址。例如：

6 setData()

在Page()方法中，setData()可以用來同步更新data屬性中的數據值，也能異步更新相關數據到WXML頁面上。其參數說明如表3-9所示。

表3-9 setData()參數

例如在Page()的data中定義初始數據，JS文件代碼如下：

此時WXML頁面的{{today}}初始值為2018-01-01。

為組件追加自定義單擊事件changeData，WXML頁面代碼如下：

<view bindtap="changeData">{{today}} </view>

在Page()中追加自定義函數changeData()的具體內容，JS文件代碼如下：

如果用戶觸發了該組件的單擊事件，WXML中的{{today}}值將立刻更新成2018-09-09。

setData()方法在使用時不是必須事先在Page()方法的data中定義初始值，可以在data數據空白的情況下直接用該方法設置一些新定義的變量。

如果想讀取data中的數值，可以使用this.data的形式。例如，上述代碼如果只是想獲得當前today值，可以用this.data.today表示。

7 生命周期

小程序應用與頁面有各自的生命周期函數，它們在使用過程中也會互相影響。

小程序應用生命周期如圖3-3所示。

圖3-3 小程序應用生命周期

小程序在被打開時會首先觸發onLaunch()進行程序啟動，完成后調用onShow()準備展示頁面，如果被切換進入后臺會調用onHide()，直到下次程序在銷毀前重新被喚起會再次調用onShow()。

小程序頁面生命周期如圖3-4所示。

圖3-4 小程序頁面生命周期

在小程序應用生命周期調用完onShow()以后就準備觸發小程序頁面生命周期了。頁面初次打開會依次觸發onLoad()、onShow()、onReady()這3個函數。同樣，如果被切換到后臺，會調用頁面onHide()，從后臺被喚醒會調用頁面onShow()。直到頁面關閉會調用onUnload()，下次打開還會依次觸發onLoad()、onShow()、onReady()這3個函數。

需要注意的是，tab頁面的互相切換以及在當前頁面上打開一個新頁面都不算頁面關閉，只是起到了隱藏的作用。這幾種情況只會觸發onHide()，回到此頁面只觸發onShow()，具體情況見3.1.3節“頁面路由”。

3.1.3 頁面路由

1 頁面棧

在小程序中頁面之間的切換路由均由框架統一進行管理，框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候，頁面棧的表現如表3-10所示。

表3-10 路由方式與頁面棧的表現

2 獲取頁面棧

小程序使用getCurrentPages()方法獲取當前頁面棧的實例，實例將以數組形式按棧的順序給出。其中，第一個元素為首頁，最后一個元素為當前頁面。

3 路由方式

路由方式及頁面生命周期函數如表3-11所示。

表3-11 路由方式與頁面生命周期函數

<navigator>的用法見第4章“小程序組件”，API的用法見第11章“界面API”。

由于tab頁面的切換情況比較復雜，這里用A、B、C、D幾個頁面舉例說明。假設其中A、B為tabBar頁面，C是從A打開的頁面，D是從C打開的頁面，tab切換對應的生命周期如表3-12所示。

表3-12 tab切換對應的生命周期函數

3.1.4 模塊化

1 文件的作用域

在小程序的任意JS文件中聲明的變量和函數只在該文件中有效，不同的JS文件中可以聲明相同名字的變量和函數，不會互相影響。

如果需要跨頁面進行數據共享，可以在app.js中定義全局變量，然后在其他JS文件中使用getApp()獲取和更新。例如在app.js中設置全局變量msg，代碼如下：

假設在test.js文件中希望修改全局變量msg的值，代碼如下：

此時在任意其他JS文件中再讀取msg的值都會是更新后的內容。

2 模塊的調用

小程序支持將一些公共JavaScript代碼放在一個單獨的JS文件中，作為一個公共模塊，可以被其他JS文件調用。注意，模塊只能通過module.exports或者exports對外提供接口。

例如在根目錄下新建utils文件夾并創建公共JS文件common.js，代碼如下：

上述代碼創建了兩個自定義函數，即sayHello()和sayGoodbye()，且都帶有參數name。需要注意的是，exports是module.exports的一個引用，因此在模塊中隨意更改exports的指向會造成未知錯誤。

在頁面JS中使用require引用common.js文件，此時可以調用其中的函數，代碼如下：

3.1.5 API

小程序開發框架提供豐富的微信原生API接口，可以方便地調用微信提供的功能，例如獲取用戶信息、本地存儲、地理定位等。常用的API如下。

?　網絡：實現小程序與服務器端的網絡交互。

?　媒體：實現圖片、錄音、音／視頻和相機管理。

?　文件：實現臨時文件和本地文件的管理。

?　數據：實現小程序本地數據的緩存。

?　位置：使用小程序獲取地理位置和控制地圖組件。

?　設備：獲得手機內存、網絡、傳感器、掃碼、剪貼板、振動等功能。

?　界面：實現交互反饋、導航條設置、頁面導航、動畫、繪圖等功能。

這些API及其相關標簽會在后續章節陸續介紹。