微信小程序教程入門(mén)篇【4】,MINA框架的視圖層邏輯層
2017-12-20
導(dǎo)讀:本帖最后由 狂兔科技 于 2016-11-1 18:14 編輯 1. 開(kāi)篇導(dǎo)言 本節(jié)目標(biāo):通過(guò) 上一節(jié) 的講解,相信大家對(duì)小程序框架MINA的目錄結(jié)構(gòu)和配置有了一定的了解。接下來(lái)將會(huì)講解視圖層,邏輯層及...
1. 開(kāi)篇導(dǎo)言
- 本節(jié)目標(biāo):通過(guò)上一節(jié)的講解,相信大家對(duì)小程序框架MINA的目錄結(jié)構(gòu)和配置有了一定的了解。接下來(lái)將會(huì)講解視圖層,邏輯層及其之間的交互。
- 目標(biāo)用戶:無(wú)編程經(jīng)驗(yàn),但對(duì)微信小程序感興趣的同學(xué)。
- 學(xué)習(xí)目標(biāo):了解MINA框架的視圖層(View),邏輯層(App Service),及其之間的交互。
- 案例分析:helloworld小程序。
- 代碼下載
- 傳送門(mén):
上一篇:微信小程序教程-入門(mén)篇【3】
下一篇:微信小程序教程-入門(mén)篇【5】
- 備注:有編程經(jīng)驗(yàn)或看過(guò)微信官網(wǎng)簡(jiǎn)易教程的同學(xué),請(qǐng)酌情略過(guò)該章節(jié)。
2. MINA結(jié)構(gòu)基礎(chǔ)
從某種程度來(lái)來(lái)講,我們可以把MINA的結(jié)構(gòu)簡(jiǎn)化如下圖:
view模塊:負(fù)責(zé)UI顯示。它由開(kāi)發(fā)者編寫(xiě)的wxml,wxss及微信提供的相關(guān)組件來(lái)組成。
service模塊:負(fù)責(zé)應(yīng)用的后臺(tái)邏輯,它由小程序的 js 代碼以及微信提供的相關(guān)輔助模塊組成。
其中view模塊由view thread進(jìn)行驅(qū)動(dòng),service模塊則由AppService Thread進(jìn)行驅(qū)動(dòng)。我們說(shuō)view模塊和service模塊之間的交互,其實(shí)指的是線程間的交互。
一個(gè)小程序只有一個(gè) service 進(jìn)程,它在程序生命周期內(nèi)后臺(tái)運(yùn)行。當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間,或者系統(tǒng)資源占用過(guò)高,才會(huì)被真正的銷毀。
3. 案例展示
上圖為該項(xiàng)目的兩個(gè)頁(yè)面。左面:主頁(yè)面。右面:logs頁(yè)面。
下面將分為三部分對(duì)helloworld進(jìn)行講解:?jiǎn)?dòng)流程,主頁(yè)面,logs頁(yè)面。
4. 啟動(dòng)流程
- 邏輯入口:app.js
app.js的代碼如下:
- //app.js
- //1. App()函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè)object參數(shù),其指定小程序的生命周期函數(shù)等。
- App({
- //2. 生命周期函數(shù)--監(jiān)聽(tīng)小程序初始化,當(dāng)小程序初始化完成時(shí),會(huì)觸發(fā)onLaunch(全局只觸發(fā)一次)
- onLaunch: function () {
- //調(diào)用API從本地緩存中獲取數(shù)據(jù)
- var logs = wx.getStorageSync('logs') || []
- logs.unshift(Date.now())
- wx.setStorageSync('logs', logs)
- },
- //3. 成員方法:獲取用戶數(shù)據(jù)。
- getUserInfo:function(cb){
- var that = this
- if(this.globalData.userInfo){
- typeof cb == "function" && cb(this.globalData.userInfo)
- }else{
- //調(diào)用登錄接口
- wx.login({
- success: function () {
- wx.getUserInfo({
- success: function (res) {
- that.globalData.userInfo = res.userInfo
- typeof cb == "function" && cb(that.globalData.userInfo)
- }
- })
- }
- })
- }
- },
- //4. 全局?jǐn)?shù)據(jù)
- globalData:{
- userInfo:null
- }
- })
- //注意:App()必須在app.js中注冊(cè),且不能注冊(cè)多個(gè)。
- // 不要在定義于App()內(nèi)的函數(shù)中調(diào)用getApp(),使用this就可以拿到app實(shí)例。
- // 不要在onLaunch的時(shí)候調(diào)用getCurrentPage(),此時(shí)page還沒(méi)有生成。
上面的代碼文件說(shuō)明了app.js文件的用處:注冊(cè)App()。這里面包含兩部分。
其一:生命周期函數(shù)的定義(onLaunch/onShow/onHide)。
其二:自定義函數(shù),通常用于操作全局?jǐn)?shù)據(jù)或微信提供的用戶等業(yè)務(wù)邏輯數(shù)據(jù)。
全局?jǐn)?shù)據(jù)。
- 啟動(dòng)后的主頁(yè)面:app.json
啟動(dòng)后的主頁(yè)面,根據(jù)app.json中【pages】中的部分來(lái)決定。準(zhǔn)備的來(lái)說(shuō),誰(shuí)在上面則主頁(yè)面是誰(shuí)。在該項(xiàng)目中,代碼如下:
- "pages":[
- "pages/index/index",
- "pages/logs/logs"
- ],
- "pages":[
- "pages/logs/logs",
- "pages/index/index"
- ],
5. 主頁(yè)面
上圖描述了啟動(dòng)后,進(jìn)入主頁(yè)面,小程序的調(diào)用流程。
- 文件層
找尋在路徑【"pages/index/index"】中,后綴為.json,.js,.wxml,.wxss的文件,并進(jìn)行整合。
- 代碼層
對(duì)于路由后的主頁(yè)面,調(diào)用onLoad,onShow。該項(xiàng)目中代目如下:
- //index.js
- //1. 獲取應(yīng)用實(shí)例
- var app = getApp()
- //2. Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù),其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
- Page({
- //3. 頁(yè)面的初始數(shù)據(jù)
- data: {
- motto: 'Hello World',
- userInfo: {}
- },
- //4. 事件處理函數(shù),當(dāng)用戶點(diǎn)擊該組件的時(shí)候,調(diào)用該事件處理函數(shù)。跳轉(zhuǎn)到logs頁(yè)面。
- bindViewTap: function() {
- wx.navigateTo({
- url: '../logs/logs'
- })
- },
- //5. 頁(yè)面加載,一個(gè)頁(yè)面只會(huì)調(diào)用一次.
- onLoad: function () {
- console.log('onLoad')
- var that = this
- //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
- app.getUserInfo(function(userInfo){
- //更新數(shù)據(jù)
- that.setData({
- userInfo:userInfo
- })
- })
- }
- })
視圖層和邏輯層的交互是通過(guò)事件機(jī)制來(lái)實(shí)現(xiàn)的,上面代碼【4】所示為邏輯層的處理邏輯。事件代碼在視圖層如下所示:
- <view bindtap="bindViewTap" class="userinfo">
- <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
- <text class="userinfo-nickname">{{userInfo.nickName}}</text>
- </view>
如上所示,從coding層面上講,事件機(jī)制由兩部分組成。其一在page相關(guān)的wxml文件中。其二在.js文件中,定義相應(yīng)的處理函數(shù),并通過(guò)函數(shù)名進(jìn)行關(guān)聯(lián)識(shí)別。
6. logs頁(yè)面
- logs頁(yè)面分析
logs.js代碼如下:
- //logs.js
- //1. 加載模塊
- var util = require('../../utils/util.js')
- Page({
- //2. Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù),其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
- data: {
- logs: []
- },
- //3. 頁(yè)面加載,一個(gè)頁(yè)面只會(huì)調(diào)用一次.
- onLoad: function () {
- this.setData({
- logs: (wx.getStorageSync('logs') || []).map(function (log) {
- return util.formatTime(new Date(log))
- })
- })
- }
- })
- <!--logs.wxml-->
- <view class="container log-list">
- <!-- wx:for 在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組,即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。-->
- <!-- block wx:for 渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。-->
- <!-- 用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名。-->
- <block wx:for="{{logs}}" wx:for-item="log">
- <text class="log-item">{{index + 1}}. {{log}}</text>
- </block>
- </view>
- 主頁(yè)面和logs頁(yè)面之間的跳轉(zhuǎn)
7. 小結(jié)
知識(shí)點(diǎn):了解MINA框架的視圖層(View),邏輯層(App Service),及其之間的交互。
了解事件的基本使用方式。
了解界面之間的跳轉(zhuǎn)方式及??臻g。
8. 預(yù)告
了解并使用微信開(kāi)發(fā)工具的調(diào)試功能。
第二部分:如何開(kāi)通一個(gè)小商店