注冊(cè)

微信小程序教程入門(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)化如下圖：
微信小程序教程入門(mén)篇【4】,MINA框架的視圖層邏輯層

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. 案例展示
微信小程序教程入門(mén)篇【4】,MINA框架的視圖層邏輯層
上圖為該項(xiàng)目的兩個(gè)頁(yè)面。左面：主頁(yè)面。右面：logs頁(yè)面。
下面將分為三部分對(duì)helloworld進(jìn)行講解：?jiǎn)?dòng)流程，主頁(yè)面，logs頁(yè)面。

4. 啟動(dòng)流程
微信小程序教程入門(mén)篇【4】,MINA框架的視圖層邏輯層
  • 邏輯入口：app.js

app.js的代碼如下：
  1. //app.js
  2.  
  3. //1. App()函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè)object參數(shù)，其指定小程序的生命周期函數(shù)等。
  4. App({
  5.  
  6.   //2. 生命周期函數(shù)--監(jiān)聽(tīng)小程序初始化,當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā)onLaunch（全局只觸發(fā)一次）  
  7.   onLaunch: function () {
  8.     //調(diào)用API從本地緩存中獲取數(shù)據(jù)
  9.     var logs = wx.getStorageSync('logs') || []
  10.     logs.unshift(Date.now())
  11.     wx.setStorageSync('logs', logs)
  12.   },
  13.  
  14.   //3. 成員方法：獲取用戶數(shù)據(jù)。
  15.   getUserInfo:function(cb){
  16.     var that = this
  17.     if(this.globalData.userInfo){
  18.       typeof cb == "function" && cb(this.globalData.userInfo)
  19.     }else{
  20.       //調(diào)用登錄接口
  21.       wx.login({
  22.         success: function () {
  23.           wx.getUserInfo({
  24.             success: function (res) {
  25.               that.globalData.userInfo = res.userInfo
  26.               typeof cb == "function" && cb(that.globalData.userInfo)
  27.             }
  28.           })
  29.         }
  30.       })
  31.     }
  32.   },
  33.  
  34.   //4. 全局?jǐn)?shù)據(jù)
  35.   globalData:{
  36.     userInfo:null
  37.   }
  38. })
  39.  
  40. //注意：App()必須在app.js中注冊(cè)，且不能注冊(cè)多個(gè)。
  41. //     不要在定義于App()內(nèi)的函數(shù)中調(diào)用getApp()，使用this就可以拿到app實(shí)例。
  42. //     不要在onLaunch的時(shí)候調(diào)用getCurrentPage()，此時(shí)page還沒(méi)有生成。
復(fù)制代碼

上面的代碼文件說(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)目中，代碼如下：
  1. "pages":[
  2.     "pages/index/index",
  3.     "pages/logs/logs"            
  4.   ],
復(fù)制代碼
如果我們把index和logs更換位置，則主頁(yè)面則由上圖中的左圖更換為右圖。代碼如下：
  1. "pages":[
  2.     "pages/logs/logs",
  3.     "pages/index/index"               
  4.   ],
復(fù)制代碼


5. 主頁(yè)面
微信小程序教程入門(mén)篇【4】,MINA框架的視圖層邏輯層

上圖描述了啟動(dòng)后，進(jìn)入主頁(yè)面，小程序的調(diào)用流程。

  • 文件層

找尋在路徑【"pages/index/index"】中，后綴為.json,.js,.wxml,.wxss的文件，并進(jìn)行整合。

  • 代碼層

對(duì)于路由后的主頁(yè)面，調(diào)用onLoad，onShow。該項(xiàng)目中代目如下：
  1. //index.js
  2.  
  3. //1. 獲取應(yīng)用實(shí)例
  4. var app = getApp()
  5.  
  6. //2. Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
  7. Page({
  8.  
  9.   //3. 頁(yè)面的初始數(shù)據(jù)
  10.   data: {
  11.     motto: 'Hello World',
  12.     userInfo: {}
  13.   },
  14.  
  15.   //4. 事件處理函數(shù),當(dāng)用戶點(diǎn)擊該組件的時(shí)候，調(diào)用該事件處理函數(shù)。跳轉(zhuǎn)到logs頁(yè)面。
  16.   bindViewTap: function() {
  17.     wx.navigateTo({
  18.       url: '../logs/logs'
  19.     })
  20.   },
  21.  
  22.   //5. 頁(yè)面加載,一個(gè)頁(yè)面只會(huì)調(diào)用一次.
  23.   onLoad: function () {
  24.     console.log('onLoad')
  25.     var that = this
  26.     //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
  27.     app.getUserInfo(function(userInfo){
  28.       //更新數(shù)據(jù)
  29.       that.setData({
  30.         userInfo:userInfo
  31.       })
  32.     })
  33.   }
  34.  
  35. })
  36.  
復(fù)制代碼

視圖層和邏輯層的交互是通過(guò)事件機(jī)制來(lái)實(shí)現(xiàn)的，上面代碼【4】所示為邏輯層的處理邏輯。事件代碼在視圖層如下所示：
  1. <view  bindtap="bindViewTap" class="userinfo">
  2.     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  3.     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  4.   </view>
復(fù)制代碼

如上所示，從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代碼如下：
  1. //logs.js
  2.  
  3. //1. 加載模塊
  4. var util = require('../../utils/util.js')
  5.  
  6. Page({
  7.  
  8.   //2. Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
  9.   data: {
  10.     logs: []
  11.   },
  12.  
  13.   //3. 頁(yè)面加載,一個(gè)頁(yè)面只會(huì)調(diào)用一次.
  14.   onLoad: function () {
  15.     this.setData({
  16.       logs: (wx.getStorageSync('logs') || []).map(function (log) {
  17.         return util.formatTime(new Date(log))
  18.       })
  19.     })
  20.   }
  21.   
  22. })
  23.  
復(fù)制代碼
logs.wxml如下：
  1. <!--logs.wxml-->
  2. <view class="container log-list">
  3.  
  4.   <!-- wx:for 在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。-->
  5.   <!-- block wx:for 渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。-->  
  6.   <!-- 用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名。-->
  7.   <block wx:for="{{logs}}" wx:for-item="log">
  8.   
  9.     <text class="log-item">{{index + 1}}. {{log}}</text>
  10.   </block>
  11. </view>
  12.  
復(fù)制代碼

  • 主頁(yè)面和logs頁(yè)面之間的跳轉(zhuǎn)

微信小程序教程入門(mén)篇【4】,MINA框架的視圖層邏輯層

7. 小結(jié)

知識(shí)點(diǎn)：了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互。
              了解事件的基本使用方式。
              了解界面之間的跳轉(zhuǎn)方式及?？臻g。

8. 預(yù)告

了解并使用微信開(kāi)發(fā)工具的調(diào)試功能。
重磅推薦：小程序開(kāi)店目錄

第一部分：小商店是什么

第二部分：如何開(kāi)通一個(gè)小商店

第三部分：如何登錄小商店

第四部分：開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開(kāi)發(fā)