微信小程序 框架(MINA)

1、小程序開發框架的目標是通過儘可能簡單、高效的方式讓開發者可以在微信中開發具有原生APP體驗的服務。

框架提供了自己的視圖層描述語言WXMLWXSS,以及基於JavaScript的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統,可以讓開發者可以方便的聚焦於數據與邏輯上。

2、框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候,只需要在邏輯層修改數據,視圖層就會做相應的更新

 

3、

頁面管理


框架管理了整個小程序的頁面路由,可以做到頁面間的無縫切換,並給以頁面完整的生命週期。開發者需要做的只是將頁面的數據,方法,生命週期函數註冊進框架中,其他的一切複雜的操作都交由框架處理。

基礎組件


框架提供了一套基礎的組件,這些組件自帶微信風格的樣式以及特殊的邏輯,開發者可以通過組合基礎組件,創建出強大的微信小程序 。

豐富的API


框架提供豐富的微信原生API,可以方便的調起微信提供的能力,如獲取用戶信息本地存儲支付功能等。

 

4、

文件結構

MINA程序包含一個描述整體程序的app和多個描述各自頁面的page。

一個MINA程序主體部分由三個文件組成,必須放在項目的根目錄,如下:

文件 必需 作用
app.js 小程序邏輯
app.json 小程序公共設置
app.wxss 小程序公共樣式表

一個MINA頁面由四個文件組成,分別是:

文件類型 必須 作用
wxml 頁面結構
wxss 頁面樣式表
json 頁面配置
js 頁面邏輯

注意:爲了方便開發者減少配置項,我們規定描述頁面的這四個文件必須具有相同的路徑與文件名。

 

5、我們使用app.json文件來對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

 

app.json 配置項列表

屬性 類型 必填 描述
pages String Array 設置頁面路徑
window Object 設置默認頁面的窗口表現
tabBar Object 設置底部 tab 的表現
networkTimeout Object 設置網絡超時時間
debug Boolean 設置是否開啓 debug 模式

pages

接受一個數組,每一項都是字符串,來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息,數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面,都需要對 pages 數組進行修改。

文件名不需要寫文件後綴,因爲框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。

window

用於設置小程序的狀態欄、導航條、標題、窗口背景色。

 

{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}

 

tabBar

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

Tip:

1. 當設置 position 爲 top 時,將不會顯示 icon

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

 

networkTimeout

可以設置各種網絡請求的超時時間。

 

屬性說明:

屬性 類型 必填 說明
request Number wx.request的超時時間,單位毫秒
connectSocket Number wx.connectSocket的超時時間,單位毫秒
uploadFile Number wx.uploadFile的超時時間,單位毫秒
downloadFile Number wx.downloadFile的超時時間,單位毫秒

 

debug

可以在開發者工具中開啓 debug 模式,在開發者工具的控制檯面板,調試信息以 info 的形式給出,其信息有Page的註冊頁面路由數據更新事件觸發 。可以幫助開發者快速定位一些常見的問題。

page.json

每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。頁面的配置比app.json全局配置簡單得多,只是設置 app.json 中的 window 配置項的內容,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

頁面的.json只能設置window相關的配置項,以決定本頁面的窗口表現,所以無需寫window這個鍵

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章