微信小程序開發（五）開發框架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:原窗口打開頁面。