MINA小程式開發架構

MINA

(MINA IS NOT APP) 是在微信中開發

小程式

的架構。

的目标是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生APP體驗的服務。

提供了自己的視圖層描述語言WXML和WXSS，以及基于JavaScript的邏輯層架構，并在視圖層與邏輯層間提供了資料傳輸和事件系統，可以讓開發者可以友善的聚焦于資料與邏輯上。

檔案結構

架構程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。

一個架構程式主體部分由三個檔案組成，必須放在項目的根目錄，如下：

檔案	必填	作用
app.js	是	小程式邏輯
app.json		小程式公共設定
app.wxss	否	小程式公共樣式表

一個架構頁面由四個檔案組成，分别是：

檔案類型
js		頁面邏輯
wxml		頁面結構
wxss		頁面樣式表
json		頁面配置

配置

我們使用app.json檔案來對微信小程式進行全局配置，決定頁面檔案的路徑、視窗表現、設定網絡逾時時間、設定多 tab 等。

以下是一個包含了所有配置選項的簡單配置app.json ：

{

"pages": [

"pages/wechat/wechat",

"pages/note/note",

"pages/find/find",

"pages/mine/mine",

"pages/message/message",

"pages/audio/audio",

"pages/info/info",

"pages/newfriend/newfriend",

"pages/moments/moments",

"pages/picker/picker",

"pages/upload/upload",

"pages/ws/ws",

"pages/index/index",

"pages/logs/logs"

],

"window":{

"navigationBarBackgroundColor": "#000",

"navigationBarTextStyle": "white",

"navigationBarTitleText": "",

"backgroundColor": "#eee",

"backgroundTextStyle": "dark"

},

"tabBar": {

"backgroundColor":"#333",

"selectedColor":"red",

"list": [{

"pagePath": "pages/wechat/wechat",

"iconPath":"image/wechat.png",

"selectedIconPath":"image/wechat_2.png",

"text": "微信"

}, {

"pagePath": "pages/note/note",

"iconPath":"image/note.png",

"selectedIconPath":"image/note_2.png",

"text": "通訊錄"

}, {

"pagePath": "pages/find/find",

"iconPath":"image/find.png",

"selectedIconPath":"image/find_2.png",

"text": "發現"

}, {

"pagePath": "pages/mine/mine",

"iconPath":"image/mine.png",

"selectedIconPath":"image/mine_2.png",

"text": "我"

}]

},

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

},

"debug": true

}           

app.json 配置項清單

屬性	類型		描述
pages	Array		設定頁面路徑
window	Object		設定預設頁面的視窗表現
tabBar			設定底部 tab 的表現
networkTimeout			設定網絡逾時時間
debug	Boolean		設定是否開啟 debug 模式

接受一個數組，每一項都是字元串，來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔案名】資訊，數組的第一項代表小程式的初始頁面。小程式中新增/減少頁面，都需要對 pages 數組進行修改。

檔案名不需要寫檔案字尾，因為架構會自動去尋找路徑.json,.js,.wxml,.wxss的四個檔案進行整合。

用于設定小程式的狀态欄、導覽列、标題、視窗背景色。

		預設值
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顔色，如"#000000"
navigationBarTextStyle	String	white	導航欄标題顔色，僅支援 black/white
navigationBarTitleText		導航欄标題文字内容
backgroundColor		#ffffff	下拉視窗的背景色
backgroundTextStyle		dark	下拉背景字型、loading 圖的樣式，僅支援 dark/light

如果我們的小程式是一個多 tab 應用（用戶端視窗的底部有tab欄可以切換頁面），那麼我們可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

tabBar 是一個數組，隻能配置最少2個、最多5個 tab，tab 按數組的順序排序。

屬性說明：

color			tab 上的文字預設顔色
selectedColor			tab 上的文字選中時的顔色
			tab 的背景色
borderStyle			black	tabbar上邊框的顔色， 僅支援 black/white
list			tab 的清單，詳見 list 屬性說明，最少2個、最多5個 tab

其中 list 接受一個數組，數組中的每個項都是一個對象，其屬性值如下：

			說明
pagePath			頁面路徑，必須在 pages 中先定義
text			tab 上按鈕文字
iconPath			圖檔路徑，icon 大小限制為40kb
selectedIconPath			選中時的圖檔路徑，icon 大小限制為40kb

可以設定各種網絡請求的逾時時間。

request	Number		wx.request的逾時時間，機關毫秒
connectSocket			wx.connectSocket的逾時時間，機關毫秒
uploadFile			wx.uploadFile的逾時時間，機關毫秒
downloadFile			wx.downloadFile的逾時時間，機關毫秒

可以在開發者工具中開啟 debug 模式，在開發者工具的控制台面闆，調試資訊以 info 的形式給出，其資訊有Page的注冊，頁面路由，資料更新，事件觸發 。 可以幫助開發者快速定位一些常見的問題。

每個頁面的配置檔案（.json）

每一個小程式頁面也可以使用.json檔案來對本頁面的視窗表現進行配置。 頁面的配置比app.json全局配置簡單得多，隻是設定 app.json 中的 window 配置項的内容，頁面中配置項會覆寫 app.json 的 window 中相同的配置項。

頁面的.json隻能設定 window 相關的配置項，以決定本頁面的視窗表現，是以無需寫 window 這個鍵，如：

{  

"navigationBarBackgroundColor":"#ffffff", 

"navigationBarTextStyle":"black",  

"navigationBarTitleText":"微信接口功能示範",  

"backgroundColor":"#eeeeee",  

"backgroundTextStyle":"light"

}           

雲伺服器ECS位址：阿裡雲·雲小站