微信小程序框架邏輯層(App Service)

邏輯層(App Service)

Ø 邏輯層

（1）app.js裏使用App()函數註冊一個小程序；

（2）頁面對應的js裏使用Page()函數來註冊一個頁面；

（3）模塊化

 

 

1、邏輯層將數據進行處理後發送給視圖層，同時接受視圖層的事件反饋。

 

2、在 JavaScript 的基礎上，我們增加了一些功能，以方便小程序的開發：

• 增加 App 和 Page 方法，進行程序和頁面的註冊。
• 增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實例和當前頁面棧。
• 提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。
• 每個頁面有獨立的作用域，並提供模塊化能力。

注意：小程序框架的邏輯層並非運行在瀏覽器中，因此 JavaScript 在 web 中一些能力都無法使用，如 window，document 等。

 

3、註冊程序

（1）

App(Object)

App() 函數用來註冊一個小程序。接受一個 Object 參數，其指定小程序的生命週期回調等。

App() 必須在 app.js 中調用，必須調用且只能調用一次。不然會出現無法預期的後果。

Object 參數說明：

屬性	類型	描述	觸發時機
onLaunch	Function	生命週期回調—監聽小程序初始化	小程序初始化完成時（全局只觸發一次）
onShow	Function	生命週期回調—監聽小程序顯示	小程序啓動，或從後臺進入前臺顯示時
onHide	Function	生命週期回調—監聽小程序隱藏	小程序從前臺進入後臺時
onError	Function	錯誤監聽函數	小程序發生腳本錯誤，或者 api 調用失敗時觸發，會帶上錯誤信息
onPageNotFound	Function	頁面不存在監聽函數	小程序要打開的頁面不存在時觸發，會帶上頁面信息回調該函數
其他	Any	開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問

前臺、後臺定義： 當用戶點擊右上角關閉，或者按了設備 Home 鍵離開微信，小程序並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。需要注意的是：只有當小程序進入後臺一定時間，或者系統資源佔用過高，纔會被真正的銷燬。

 

getApp(Object)

全局的 getApp() 函數可以用來獲取到小程序 App 實例。

Object 參數說明：

字段	類型	說明	最低版本
allowDefault	Boolean	在 App 未定義時返回默認實現。當App被調用時，默認實現中定義的屬性會被覆蓋合併到App中。一般用於獨立分包。	2.2.4

示例代碼：

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

注意：

• 不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就可以拿到 app 實例。
• 通過 getApp() 獲取實例之後，不要私自調用生命週期函數。

 

 

4、場景值

• 對於小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中獲取上述場景值。
• 對於小遊戲，可以在 wx.getLaunchOptionsSync 和 wx.onShow 中獲取上述場景值
• 主要就是怎麼樣利用id進行對那個操作進行控制的

5、微信小程序 註冊頁面

 

頁面 Page

Page(Object) 構造器

Page(Object) 函數用來註冊一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等。

初始化數據

---

初始化數據將作爲頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數據必須是可以轉成 JSON 的格式：字符串，數字，布爾值，對象，數組。

渲染層可以通過 WXML 對數據進行綁定。

示例代碼：

 

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

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

生命週期回調函數

---

• onLoad: 頁面加載

  • 一個頁面只會調用一次，可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。

• onShow: 頁面顯示

  • 每次打開頁面都會調用一次。

• onReady: 頁面初次渲染完成

  • 一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
  • 對界面的設置如wx.setNavigationBarTitle請在onReady之後設置。詳見生命週期

• onHide: 頁面隱藏

  • 當navigateTo或底部tab切換時調用。

• onUnload: 頁面卸載

  • 當redirectTo或navigateBack的時候調用。

onPullDownRefresh	Function	監聽用戶下拉動作
onReachBottom	Function	頁面上拉觸底事件的處理函數
onShareAppMessage	Function	用戶點擊右上角轉發
onPageScroll	Function	頁面滾動觸發事件的處理函數
onResize	Function	頁面尺寸改變時觸發，詳見 響應顯示區域變化
onTabItemTap	Function	當前是 tab 頁時，點擊 tab 時觸發
其他	Any	開發者可以添加任意的函數或數據到 Object 參數中，在頁面的函數中用 this 可以訪問

 

 

頁面事件處理函數

 

onPullDownRefresh()

監聽用戶下拉刷新事件。

• 需要在app.json的window選項中或頁面配置中開啓enablePullDownRefresh。
• 可以通過wx.startPullDownRefresh觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
• 當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

onReachBottom()

監聽用戶上拉觸底事件。

• 可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
• 在觸發距離內滑動期間，本事件只會被觸發一次。

onPageScroll(Object)

監聽用戶滑動頁面事件。

data

data 是頁面第一次渲染使用的初始數據。

頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型：字符串，數字，布爾值，對象，數組。

渲染層可以通過 WXML 對數據進行綁定。

 

注意：請只在需要的時候纔在 page 中定義此方法，不要定義空方法。以減少不必要的事件派發對渲染層-邏輯層通信的影響。 注意：請避免在 onPageScroll 中過於頻繁的執行 setData 等引起邏輯層-渲染層通信的操作。尤其是每次傳輸大量數據，會影響通信耗時。

onShareAppMessage(Object)

監聽用戶點擊頁面內轉發按鈕（<button> 組件 open-type="share"）或右上角菜單“轉發”按鈕的行爲，並自定義轉發內容。

注意：只有定義了此事件處理函數，右上角菜單纔會顯示“轉發”按鈕

 

Object 參數說明：

參數	類型	說明	最低版本
from	String	轉發事件來源。 button：頁面內轉發按鈕； menu：右上角轉發菜單	1.2.4
target	Object	如果 from 值是 button，則 target 是觸發這次轉發事件的 button，否則爲 undefined	1.2.4
webViewUrl	String	頁面中包含<web-view>組件時，返回當前<web-view>的url

組件事件處理函數

Page 中還可以定義組件事件處理函數。在渲染層的組件中加入事件綁定，當事件被觸發時，就會執行 Page 中定義的事件處理函數。

 

Page.prototype.setData(Object data, Function callback)

setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

參數說明

字段	類型	必填	描述	最低版本
data	Object	是	這次要改變的數據
callback	Function	否	setData引起的界面更新渲染完畢後的回調函數	1.5.0

Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。

其中 key 可以以數據路徑的形式給出，支持改變數組中的某一項或對象的某個屬性，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。
2. 僅支持設置可 JSON 化的數據。
3. 單次設置的數據不能超過1024kB，請儘量避免一次設置過多的數據。
4. 請不要把 data 中任何一項的 value 設爲 undefined ，否則這一項將不被設置並可能遺留一些潛在問題。

 

 

在工具類中，我們需要在下面的裏面的exports註冊我們的定義的函數，不然我們的頁面就不能那到我們函數的功能。

 

Page.route

基礎庫 1.2.0 開始支持，低版本需做兼容處理。

到當前頁面的路徑，類型爲String。

 

Page({
  onShow() {
    console.log(this.route)
  }
})