微信小程序開發(fā)框架MINA的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序開發(fā)框架MINA的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

小程序MINA框架，及優(yōu)點(diǎn)

MINA框架：

小程序使用的是MINA框架，目的是通過(guò)簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生App體驗(yàn)的服務(wù)。   

MINA的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。

 整個(gè)系統(tǒng)分為兩塊：視圖層（view,描述語(yǔ)言wxml和wxss）和邏輯層（App Serice，基于 JavaScript）。這可以讓數(shù)據(jù)與視圖非常簡(jiǎn)單的保持同步。當(dāng)做數(shù)據(jù)修改時(shí)，只需要在邏輯層改數(shù)據(jù)，視圖層就會(huì)做響應(yīng)的更新。開發(fā)者只需要將頁(yè)面路由、方法、生命周期函數(shù)注冊(cè)進(jìn)框架，其他的一切復(fù)雜的操作都將由框架處理。

小程序優(yōu)點(diǎn)：

? 方便使用：無(wú)需下載，打開即用，用完即走。不占用手機(jī)內(nèi)存，省流量，省安裝時(shí)間
? 開發(fā)簡(jiǎn)單：開發(fā)的本質(zhì)是MVVM風(fēng)格的Javascript框架上開發(fā)的，有前端經(jīng)驗(yàn)的程序員可以無(wú)縫銜接，無(wú)經(jīng)驗(yàn)的“小白”也可以快速入門。
? 跨平臺(tái)運(yùn)行：不用再分別開發(fā)IOS和Andriod版本，只需要發(fā)布微信小程序平臺(tái)，所有平臺(tái)都可以使用。開發(fā)成本低
? 快速分發(fā)與迭代：無(wú)需關(guān)心各種發(fā)布渠道，也無(wú)須擔(dān)心舊版本升級(jí)的兼容問(wèn)題。 

 打開速度比H5快，體驗(yàn)接近原生APP

小程序開發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)。

微信團(tuán)隊(duì)為小程序提供的框架命名為MINA。MINA框架通過(guò)封裝微信客戶端提供的文件系統(tǒng)、網(wǎng)絡(luò)通信、任務(wù)管理、數(shù)據(jù)安全等基礎(chǔ)功能，對(duì)上層提供一整套JavaScript API，讓開發(fā)者方便的使用微信客戶端提供的各種基礎(chǔ)功能與能力，快速構(gòu)建應(yīng)用。

MINA框架

微信小程序的框架示意圖如下所示：

MINA框架主要分為兩大部分：

第一部分頁(yè)面視圖層，開發(fā)者使用WXML文件來(lái)搭建頁(yè)面的基本視圖結(jié)構(gòu)（WXML是類似于HTML標(biāo)簽的語(yǔ)言和一系列基礎(chǔ)組件），使用WXSS文件來(lái)控制頁(yè)面的表現(xiàn)樣式。

第二部分AppService應(yīng)用邏輯層，是MINA框架的服務(wù)中心，通過(guò)微信客戶端啟動(dòng)異步線程單獨(dú)加載運(yùn)行，頁(yè)面渲染所需的數(shù)據(jù)、頁(yè)面交互處理邏輯都在其中實(shí)現(xiàn)。MINA框架中的AppService使用JavaScript來(lái)編寫交互邏輯、網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)處理，但不能使用JavaScript中的DOM操作。小程序中的各個(gè)頁(yè)面可以通過(guò)AppService實(shí)現(xiàn)數(shù)據(jù)管理、網(wǎng)絡(luò)通信、生命周期管理和頁(yè)面路由。

MINA框架為頁(yè)面組件提供了一系列事件監(jiān)聽相關(guān)的屬性（比如bindtap、bindtouchstart等），來(lái)與AppService中的事件處理函數(shù)綁定在一起，來(lái)實(shí)現(xiàn)頁(yè)面向AppService層同步用戶交互數(shù)據(jù)。MINA框架同時(shí)提供了很多方法將AppService中的數(shù)據(jù)與頁(yè)面進(jìn)行單向綁定（注意數(shù)據(jù)的綁定方向是單向的），當(dāng)AppService中的數(shù)據(jù)變更時(shí)，會(huì)主動(dòng)觸發(fā)對(duì)應(yīng)頁(yè)面組件的重新渲染。

框架的核心是一個(gè)響應(yīng)式的數(shù)據(jù)綁定系統(tǒng)，它能讓數(shù)據(jù)與視圖很簡(jiǎn)單的保持同步。只需要在邏輯層修改數(shù)據(jù)，視圖層就會(huì)做相應(yīng)的更新。示例如下：

<!--頁(yè)面視圖層代碼--> 
<view class="apptitle">
 <text class="app-avatar">歡迎使用{{appname}}</text>
 <button bindtap="changeAppname">更換名稱 </button>
</view>
//AppService應(yīng)用邏輯層代碼
//初始數(shù)據(jù)
page({
 data:{
  appname:'易投票'
 },
 changeAppname:function(e){
  this.setData({
  appname:'我的小程序'
 })
 }
})

圖1：初始名稱

圖2：點(diǎn)擊按鈕“更換名稱”以后

示例中數(shù)據(jù)是如何更新的呢？首先，開發(fā)者通過(guò)框架將AppService應(yīng)用邏輯層數(shù)據(jù)中的appname與頁(yè)面視圖層名為appname的變更進(jìn)行了綁定，頁(yè)面在剛打開的時(shí)候會(huì)顯示“歡迎使用 易投票。然后，當(dāng)點(diǎn)擊按鈕“更換名稱”之后，視圖層會(huì)發(fā)送changeAppname的tap事件給邏輯層，邏輯層找到事件函數(shù)changeAppname。最后，邏輯層changeAppname函數(shù)執(zhí)行了setData操作，將對(duì)象appname的值改變?yōu)椤拔业男〕绦颉保驗(yàn)樵搶?duì)象已經(jīng)在視圖層綁定，所以視圖層會(huì)顯示為圖2的名稱了。

小程序的MINA框架有著接近原生App的運(yùn)行速度，在框架層面做了大量的優(yōu)化，在重功能上（page或tab切換、多媒體、網(wǎng)絡(luò)連接等）上使用接近于native的組件繼承，對(duì)安卓和ios端做出了高度一致的呈現(xiàn)，還有近乎完備的開發(fā)、調(diào)試工具。

目錄結(jié)構(gòu)

典型的小程序目錄結(jié)構(gòu)非常簡(jiǎn)潔，一般一個(gè)項(xiàng)目包含兩個(gè)目錄（pages和utils）三個(gè)文件（app.js、app.json、app.wxss）。pages目錄下包括程序所需的各個(gè)頁(yè)面，一個(gè)頁(yè)面對(duì)應(yīng)一個(gè)目錄，包含2至4個(gè)文件（.js、.wxml、.json及.wxss）。utils目錄則包含一些公共的js代碼文件。當(dāng)然，我們還可以添加其他的公共目錄，如用來(lái)存放本地圖片資源的images目錄。

邏輯層

小程序的邏輯層就是所有.js腳本文件的集合。小程序在邏輯層處理數(shù)據(jù)并發(fā)送至視圖層，同時(shí)接受視圖層發(fā)回的事件請(qǐng)求。

MINA框架的邏輯層是由JavaScript編寫，在此基礎(chǔ)上，微信團(tuán)隊(duì)做出了一些優(yōu)化，以便更高效的開發(fā)小程序，這些優(yōu)化包括：

1、增加app方法用來(lái)注冊(cè)程序，增加page方法用來(lái)注冊(cè)頁(yè)面；

2、提供豐富的API接口；

3、頁(yè)面的作用域相對(duì)獨(dú)立，并擁有了模塊化的能力；

簡(jiǎn)單概括，邏輯層就是各個(gè)頁(yè)面的.js腳本文件。

需要注意的是，小程序的邏輯層由js編寫，但并不是在瀏覽器中運(yùn)行的，所以JavaScript在Web中的一些能力都不能使用，比如 dom、window等，這也是我們開發(fā)過(guò)程中要克服的阻礙。

視圖層

對(duì)于微信小程序而言，視圖層就是所有的.wxml（WeiXin Markup language）文件與.wxss（WeiXin Style Sheet）文件的集合：.wxml用于描述頁(yè)面結(jié)構(gòu)而.wxss用于描述頁(yè)面樣式。

視圖層以給定的樣式來(lái)展現(xiàn)數(shù)據(jù)并反饋事件給邏輯層，而數(shù)據(jù)展現(xiàn)是以組件來(lái)進(jìn)行的。組件（Component）是視圖的基本組成單元。

數(shù)據(jù)層

數(shù)據(jù)層包括臨時(shí)數(shù)據(jù)或緩存、文件存儲(chǔ)、網(wǎng)絡(luò)存儲(chǔ)與調(diào)用。

1、頁(yè)面臨時(shí)數(shù)據(jù)或緩存

在頁(yè)面page()中，我們要使用setData函數(shù)來(lái)將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的this.data的值。this在小程序中一般指調(diào)用頁(yè)面，廣泛情況下指的是包含它的函數(shù)作為方法被調(diào)用時(shí)所屬的對(duì)象。直接修改this.data是無(wú)效的，無(wú)法改變頁(yè)面的狀態(tài)，還會(huì)造成數(shù)據(jù)的不一致。單次設(shè)置的數(shù)據(jù)有一個(gè)大小限制，不能超過(guò)1024KB，避免一次性設(shè)置過(guò)多的數(shù)據(jù)。

setData()函數(shù)的參數(shù)接受一個(gè)對(duì)象。以key,value的形式表示，將this.data中的key對(duì)應(yīng)的值改變?yōu)関alue。key可以非常靈活，包括以數(shù)據(jù)路徑的形式表示，如array[0].title，并且無(wú)需在this.data中預(yù)定義。

2、文件存儲(chǔ)（本地存儲(chǔ)）

使用微信提供的現(xiàn)成數(shù)據(jù)API接口，如：

wx.getStorage：獲取本地?cái)?shù)據(jù)緩存

wx.setStorage：設(shè)置本地?cái)?shù)據(jù)緩存

wx.clearStorage：清理本地?cái)?shù)據(jù)緩存

3、網(wǎng)絡(luò)存儲(chǔ)與調(diào)用

上傳或下載文件的API接口，如：

wx.request：發(fā)起網(wǎng)絡(luò)請(qǐng)求

wx.uploadFile：上傳文件

wx.downloadFile：下載文件

調(diào)用URL的API接口如下：

wx.navigateTo：保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。可返回原頁(yè)面。

wx.redirectTo：關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面。不可返回原頁(yè)面。

關(guān)于“微信小程序開發(fā)框架MINA的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。