首頁>技術>

邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。

開發者寫的所有程式碼最終將會打包成一份 JavaScript 檔案,並在小程式啟動的時候執行,直到小程式銷燬。這一行為類似 ServiceWorker,所以邏輯層也稱之為 App Service。

在 JavaScript 的基礎上,我們增加了一些功能,以方便小程式的開發:

增加 App 和 Page 方法,進行程式註冊和頁面註冊。增加 getApp 和 getCurrentPages 方法,分別用來獲取 App 例項和當前頁面棧。提供豐富的 API,如微信使用者資料,掃一掃,支付等微信特有能力。提供模組化能力,每個頁面有獨立的作用域。

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

1、註冊小程式

每個小程式都需要在 app.js 中呼叫 App 方法註冊小程式例項,繫結生命週期回撥函式、錯誤監聽和頁面不存在監聽函式等。

// app.jsApp({  onLaunch (options) {    // Do something initial when launch.  小程式啟動初始化完成時,觸發這個函式且只觸發一次。  },  onShow (options) {    // Do something when show. 小程式啟動或從後臺進入前臺顯示,觸發這個函式。  },  onHide () {    // Do something when hide. 小程式從前臺進入後臺,觸發這個函式。  },  onError (msg) {    console.log(msg)  },  globalData: 'I am global data'})

整個小程式只有一個 App 例項,是全部頁面共享的。開發者可以通過 getApp 方法獲取到全域性唯一的 App 例項,獲取App上的資料或呼叫開發者註冊在 App 上的函式。

// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data
註冊頁面

對於小程式中的每個頁面,都需要在頁面對應的 js 檔案中進行註冊,指定頁面的初始資料、生命週期回撥、事件處理函式等。

使用 Page 構造器註冊頁面

簡單的頁面可以使用 Page() 進行構造。

//index.js//資料全部包含在Page( { } )內。Page({     data: {    //這個data : { }中的text的值 對應著wxml中 { { text } } 。    text: "This is page data."  },  onLoad: function(options) {      // 頁面建立時執行      js裡的寫法 onLoad( options ) { } ;  },  onShow: function() {    // 頁面出現在前臺時執行  },  onReady: function() {    // 頁面首次渲染完畢時執行  },  onHide: function() {    // 頁面從前臺變為後臺時執行  },  onUnload: function() {    // 頁面銷燬時執行  },  onPullDownRefresh: function() {    // 觸發下拉重新整理時執行  },  onReachBottom: function() {    // 頁面觸底時執行  },  onShareAppMessage: function () {    // 頁面被使用者分享時執行  },  onPageScroll: function() {    // 頁面滾動時執行  },  onResize: function() {    // 頁面尺寸變化時執行  },  onTabItemTap(item) {    // tab 點選時執行    console.log(item.index)    console.log(item.pagePath)    console.log(item.text)  },  // 事件響應函式  viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    }, function() {      // this is setData callback    })  },  // 自由資料  customData: {    hi: 'MINA'  }})
在頁面中使用 behaviors

頁面可以引用 behaviors 。 behaviors 可以用來讓多個頁面有相同的資料欄位和方法。

// my-behavior.jsmodule.exports = Behavior({  data: {    sharedText: 'This is a piece of data shared between pages.'  },  methods: {    sharedMethod: function() {      this.data.sharedText === 'This is a piece of data shared between pages.'    }  }})
// page-a.jsvar myBehavior = require('./my-behavior.js')Page({  behaviors: [myBehavior],  onLoad: function() {    this.data.sharedText === 'This is a piece of data shared between pages.'  }})
使用 Component 構造器構造頁面

Page 構造器適用於簡單的頁面。但對於複雜的頁面, Page 構造器可能並不好用。此時,可以使用 Component 構造器來構造頁面。 Component 構造器的主要區別是:方法需要放在 methods: { } 裡面。

Component({  data: {    text: "This is page data."  },  methods: {    onLoad: function(options) {      // 頁面建立時執行    },    onPullDownRefresh: function() {      // 下拉重新整理時執行    },    // 事件響應函式    viewTap: function() {      // ...    }  }})

這種建立方式非常類似於 自定義元件 ,可以像自定義元件一樣使用 behaviors 等高階特性。

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 什麼是Linux?