1. 程式人生 > >wx小程式 開發框架:MINA

wx小程式 開發框架:MINA

  微信團隊為小程式提供的框架命名為MINA應用框架。MINA框架通過封裝微信客戶端提供的檔案系統、網路通訊、任務管理、資料安全等基礎功能,對上層提供一整套JavaScript API,讓開發者能夠非常方便地使用微信客戶端提供的各種基礎功能與能力,快速構建一個應用。

  

  通過框架圖我們可以看到兩大部分:在頁面檢視層,wxml是MINA提供的一套類似html標籤的語言以及一系列基礎元件。開發者使用wxml檔案來搭建頁面的基礎檢視結構,使用wxss檔案來控制頁面的展現樣式。AppService應用邏輯層是MINA的服務中心,由微信客戶端啟用非同步執行緒單獨載入執行。頁面渲染所需的資料、頁面互動處理邏輯都在AppService中實現。MINA框架中的AppService使用JavaScript來編寫互動邏輯、網路請求、資料處理,但不能使用JavaScript中的DOM操作。小程式中的各個頁面可以通過AppService實現資料管理、網路通訊、應用生命週期管理和頁面路由。

  MINA框架為頁面元件提供了bindtap、bindtouchstart等事件監聽相關的屬性,來與AppService中的事件處理函式繫結在一起,實現也面向AppService層同步使用者互動資料。MINA框架同時提供了很多方法將AppService中的資料與頁面進行單向繫結,當AppService中的資料變更時,會主動觸發對應頁面元件的重新渲染。MINA使用virtualdom技術,加快了頁面的渲染效率。

  框架的核心是一個響應的資料繫結系統,它讓資料與檢視非常簡單地保持同步。當做資料修改的時候,只需要在邏輯層修改資料,檢視層就會做相應的更新。我們看下面這個例子:

<!--demo.wxml-->
<view> Hello {{name}}</view>
<button bindtap="changeName">Click Me</button>

 

// demo.js
var helloData = {
  name: 'WeChat'
}

Page({
  /**
   * 頁面的初始資料
   */
  data: helloData, 
  changeName: function (e) {
    this.setData({
      name: 'MINA'
    })
  }
})

 

  ♦ 開發者通過框架將邏輯層資料庫中的name與檢視層的name進行了繫結,所以在頁面一開啟的時候會顯示Hello WeChat 

  ♦ 當點選按鈕的時候,檢視層會發送changeName的事件給邏輯層,邏輯層找到對應的事件處理函式。

  ♦ 邏輯層執行了setData的操作,將name從WeChat 變為 MINA,因為該資料和試圖層已經綁定了,從而檢視層會自動改變為Hello MINA。

  微信小程式不僅在底層架構的執行機制上做了大量的優化,還在重功能(如page切換、tab切換、多媒體、網路連線等)上使用接近於native的元件承載。所以微信小程式MINA有著接近原生App的執行速度,做了大量的框架層面的優化設計,對Android端和iOS端做了高度一致的呈現,並且準備了完備的開發和除錯工具。

 

邏輯層

  邏輯層是事務邏輯處理的地方。對於微信小程式而言,邏輯層就是所有.js指令碼檔案的集合。微信小程式在邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。

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

  ♦ 增加app和page方法,進行程式和頁面的註冊

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

  ♦ 每個頁面有獨立的作用域,並提供模組化能力。

  邏輯層的實現就是編寫各個頁面的.js指令碼檔案。但由於小程式並非執行在瀏覽器中,所以JavaScript在Web中的一些能力無法使用,如document、window等。

  我們開發編寫的所有程式碼最終會打包成一份JavaScript,並在小程式啟動的時候執行,直到小程式銷燬。

 

檢視層

  框架的檢視層由WXML與WXSS編寫,由元件來進行展示。於微信小程式而言,檢視層就是所有.wxml檔案與.wxss檔案的集合:

  ♦ .wxml檔案用於描述頁面的結構。

  ♦ .wxss檔案用於描述頁面的樣式。

  微信小程式在邏輯層將資料進行處理後傳送給檢視層展現出來,同時接收檢視層的事件反饋。

  檢視層以給定的樣式展現資料並反饋時間給邏輯層,而資料展現是以元件來進行的。元件是檢視的基本組成單元。

 

資料層

  資料層包括臨時資料或快取、檔案儲存、網路儲存與呼叫。

  1.頁面臨時資料或快取

  在Page()中,我們要使用setData函式將資料從邏輯層傳送到檢視層,同時改變對應的this.data的值。

注意:
直接修改this.data無效,無法改變頁面的狀態,還會造成資料不一致。
單次設定的資料不能超過1024KB,請儘量避免一次設定過多的資料。

  setData()函式的引數接收一個物件。以key,value的形式表示將this.data中的key對應的值改變成value。其中key可以非常靈活,包括以資料路徑的形式給出,如array[2].message,a.b.c.d,並且無需在this.data中預先定義。

  2.檔案儲存(本地儲存)

  使用資料API介面,如下所示:

  ♦ wx.getStorage:獲取本地資料快取。

  ♦ wx.setStorage:設定本地資料快取。

  ♦ wx.clearStorage:清理本地資料快取。

  3.網路儲存或呼叫

  上傳或下載檔案API介面,如下:

  ♦ wx.request:發起網路請求。

  ♦ wx.uploadFile:上傳檔案。

  ♦ wx.downloadFile:下載檔案。

  呼叫URL的API介面,如下:

  ♦ wx.navigateTo:新視窗開啟頁面。

  ♦ wx.redirectTo:原視窗開啟頁面。

 

來源