再說邏輯層之前,先說說微信小程序框架(MINA)
小程序開發框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生APP體驗的服務。
- 框架提供了自己的視圖層描述語言WXML和WXSS,以及基於JavaScript的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統,可以讓開發者可以方便的聚焦於數據與邏輯上。
- 框架的核心是一個響應的數據綁定系統。整個系統分為兩塊視圖層(View)和邏輯層(App Service)
- 框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候,只需要在邏輯層修改數據,視圖層就會做相應的更新。
- 框架管理了整個小程序的頁面路由,可以做到頁面間的無縫切換,並給以頁面完整的生命周期。開發者需要做的只是將頁面的數據,方法,生命周期函數注冊進框架中,其他的一切復雜的操作都交由框架處理。
- 框架提供了一套基礎的組件,這些組件自帶微信風格的樣式以及特殊的邏輯,開發者可以通過組合基礎組件,創建出強大的微信小程序 。
- 框架提供豐富的微信原生API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。
接下來就要介紹邏輯層
小程序開發框架的邏輯層是由JavaScript編寫,邏輯層將數據進行處理后發送給視圖層,同時接受視圖層的事件反饋。
注冊程序APP()函數
App()函數用來注冊一個小程序。接受一個object參數,其指定小程序的生命周期函數等。
getApp()函數是用來獲取小程序實例,其中App()必須在app.js中注冊,且不能注冊多個。不要在定義於App()內的函數中調用getApp(),使用this就可以拿到app實例。不要在onLaunch的時候調用getCurrentPage(),此時page還沒有生成。通過getApp()獲取實例之后,不要私自調用生命周期函數。
具體參數見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
場景值
通過什么樣的方式進入小程序。比如1001--通過發現欄界面的小程序入口進入;1005--通過頂部搜索欄搜索進入小程序;1011---通過掃描二維碼進入小程序
詳細場景值ID見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
頁面注冊
我們用Page() 函數用來注冊一個頁面。接受一個 object 參數,其指定頁面的初始數據、生命周期函數、事件處理函數等。
詳細見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
初始化數據
初始化數據將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層,所以其數據必須是可以轉成 JSON 的格式:字符串,數字,布爾值,對象,數組。
渲染層可以通過 WXML 對數據進行綁定。例如:
<view>{{text}}</view> <view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
事件處理函數
在渲染層可以在組件中加入事件綁定,當達到觸發事件時,就會執行 Page 中定義的事件處理函數。例如
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
常用函數
Page.prototype.route:route 字段可以獲取到當前頁面的路徑。
Page.prototype.setData():setData 函數用於將數據從邏輯層發送到視圖層,同時改變對應的 this.data 的值。
setData() 參數格式:key-value對形式,注意的是直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致
生命周期

頁面路由
路由簡單來說就是數據包從源到目的地,那么頁面路由就是一個頁面到另一個頁面的跳轉
會發生頁面跳轉的情況有
- 小程序啟動
- 打開新頁面---調用 API
wx.navigateTo或使用組件<navigator open-type="navigateTo"/> - 頁面重定向---調用 API
wx.redirectTo或使用組件<navigator open-type="redirectTo"/> - 頁面返回---調用 API
wx.navigateBack或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕 - tarbar切換
詳細見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
文件作用域
在 JavaScript 文件中聲明的變量和函數只在該文件中有效;不同的文件中可以聲明相同名字的變量和函數,不會互相影響。
通過全局函數 getApp() 可以獲取全局的應用實例,如果需要全局的數據可以在 App() 中設置
*模塊化
可以將一些公共的代碼抽離成為一個單獨的 js 文件,作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。注意的是exports 是 module.exports 的一個引用,因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以更推薦開發者采用 module.exports來暴露模塊接口,除非你已經清晰知道這兩者的關系。
// common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye
var common = require('common.js')//通過require(path)將公共代碼引入 Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } })
API
小程序開發框架提供豐富的微信原生 API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。詳細介紹請參考 API 文檔。
