注冊

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

2017-12-20
導(dǎo)讀：本帖最后由 狂兔科技 于 2016-11-1 18:14 編輯 1. 開篇導(dǎo)言 本節(jié)目標(biāo)：通過 上一節(jié) 的講解，相信大家對小程序框架MINA的目錄結(jié)構(gòu)和配置有了一定的了解。接下來將會講解視圖層，邏輯層及...

1. 開篇導(dǎo)言    
  • 本節(jié)目標(biāo)：通過上一節(jié)的講解，相信大家對小程序框架MINA的目錄結(jié)構(gòu)和配置有了一定的了解。接下來將會講解視圖層，邏輯層及其之間的交互。
  • 目標(biāo)用戶：無編程經(jīng)驗，但對微信小程序感興趣的同學(xué)。
  • 學(xué)習(xí)目標(biāo)：了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互。
  • 案例分析：helloworld小程序。
  • 代碼下載
  • 傳送門：

上一篇：微信小程序教程-入門篇【3】   
下一篇：微信小程序教程-入門篇【5】   

  • 備注：有編程經(jīng)驗或看過微信官網(wǎng)簡易教程的同學(xué)，請酌情略過該章節(jié)。

2. MINA結(jié)構(gòu)基礎(chǔ)
從某種程度來來講，我們可以把MINA的結(jié)構(gòu)簡化如下圖：
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層

view模塊：負(fù)責(zé)UI顯示。它由開發(fā)者編寫的wxml，wxss及微信提供的相關(guān)組件來組成。
service模塊：負(fù)責(zé)應(yīng)用的后臺邏輯，它由小程序的 js 代碼以及微信提供的相關(guān)輔助模塊組成。
其中view模塊由view thread進行驅(qū)動，service模塊則由AppService Thread進行驅(qū)動。我們說view模塊和service模塊之間的交互，其實指的是線程間的交互。
一個小程序只有一個 service 進程，它在程序生命周期內(nèi)后臺運行。當(dāng)小程序進入后臺一定時間，或者系統(tǒng)資源占用過高，才會被真正的銷毀。

3. 案例展示
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層
上圖為該項目的兩個頁面。左面：主頁面。右面：logs頁面。
下面將分為三部分對helloworld進行講解：啟動流程，主頁面，logs頁面。

4. 啟動流程
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層
  • 邏輯入口：app.js

app.js的代碼如下：
  1. //app.js
  2.  
  3. //1. App()函數(shù)用來注冊一個小程序。接受一個object參數(shù)，其指定小程序的生命周期函數(shù)等。
  4. App({
  5.  
  6.   //2. 生命周期函數(shù)--監(jiān)聽小程序初始化,當(dāng)小程序初始化完成時，會觸發(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中注冊，且不能注冊多個。
  41. //     不要在定義于App()內(nèi)的函數(shù)中調(diào)用getApp()，使用this就可以拿到app實例。
  42. //     不要在onLaunch的時候調(diào)用getCurrentPage()，此時page還沒有生成。
復(fù)制代碼

上面的代碼文件說明了app.js文件的用處：注冊App()。這里面包含兩部分。
其一：生命周期函數(shù)的定義(onLaunch/onShow/onHide)。
其二：自定義函數(shù)，通常用于操作全局?jǐn)?shù)據(jù)或微信提供的用戶等業(yè)務(wù)邏輯數(shù)據(jù)。
           全局?jǐn)?shù)據(jù)。

  • 啟動后的主頁面：app.json

啟動后的主頁面，根據(jù)app.json中【pages】中的部分來決定。準(zhǔn)備的來說，誰在上面則主頁面是誰。在該項目中，代碼如下：
  1. "pages":[
  2.     "pages/index/index",
  3.     "pages/logs/logs"            
  4.   ],
復(fù)制代碼
如果我們把index和logs更換位置，則主頁面則由上圖中的左圖更換為右圖。代碼如下：
  1. "pages":[
  2.     "pages/logs/logs",
  3.     "pages/index/index"               
  4.   ],
復(fù)制代碼


5. 主頁面
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層

上圖描述了啟動后，進入主頁面，小程序的調(diào)用流程。

  • 文件層

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

  • 代碼層

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

視圖層和邏輯層的交互是通過事件機制來實現(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層面上講，事件機制由兩部分組成。其一在page相關(guān)的wxml文件中。其二在.js文件中，定義相應(yīng)的處理函數(shù)，并通過函數(shù)名進行關(guān)聯(lián)識別。

6. logs頁面
  • logs頁面分析

logs.js代碼如下：
  1. //logs.js
  2.  
  3. //1. 加載模塊
  4. var util = require('../../utils/util.js')
  5.  
  6. Page({
  7.  
  8.   //2. Page() 函數(shù)用來注冊一個頁面。接受一個 object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
  9.   data: {
  10.     logs: []
  11.   },
  12.  
  13.   //3. 頁面加載,一個頁面只會調(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控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。-->
  5.   <!-- block wx:for 渲染一個包含多節(jié)點的結(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ù)制代碼

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

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

7. 小結(jié)

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

8. 預(yù)告

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

第一部分：小商店是什么

第二部分：如何開通一個小商店

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

第四部分：開店任務(wù)常見問題

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

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

第七部分：小程序直播

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

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

第十部分：小程序客服

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

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