微信團隊為小程序提供的框架命名為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:原窗口打開頁面。
