舟山闪爸电子技术有限公司

產(chǎn)品中心
更多服務(wù)

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

—— 2017 ——
12/20
00:00

來源：

作者：未知

閱讀：0

欄目：小程序開發(fā)

2017/12/20 0:00:00 來源：不詳 作者：未知

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

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

  • 備注：有編程經(jīng)驗(yàn)或看過微信官網(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進(jìn)行驅(qū)動，service模塊則由AppService Thread進(jìn)行驅(qū)動。我們說view模塊和service模塊之間的交互，其實(shí)指的是線程間的交互。
一個(gè)小程序只有一個(gè) service 進(jìn)程，它在程序生命周期內(nèi)后臺運(yùn)行。當(dāng)小程序進(jìn)入后臺一定時(shí)間，或者系統(tǒng)資源占用過高，才會被真正的銷毀。

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

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

app.js的代碼如下：
  1. //app.js
  2.  
  3. //1. App()函數(shù)用來注冊一個(gè)小程序。接受一個(gè)object參數(shù)，其指定小程序的生命周期函數(shù)等。
  4. App({
  5.  
  6.   //2. 生命周期函數(shù)--監(jiān)聽小程序初始化,當(dāng)小程序初始化完成時(shí)，會觸發(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中注冊，且不能注冊多個(gè)。
  41. //     不要在定義于App()內(nèi)的函數(shù)中調(diào)用getApp()，使用this就可以拿到app實(shí)例。
  42. //     不要在onLaunch的時(shí)候調(diào)用getCurrentPage()，此時(shí)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)備的來說，誰在上面則主頁面是誰。在該項(xiàng)目中，代碼如下：
  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框架的視圖層邏輯層

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

  • 文件層

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

  • 代碼層

對于路由后的主頁面，調(diào)用onLoad，onShow。該項(xiàng)目中代目如下：
  1. //index.js
  2.  
  3. //1. 獲取應(yīng)用實(shí)例
  4. var app = getApp()
  5.  
  6. //2. Page() 函數(shù)用來注冊一個(gè)頁面。接受一個(gè) 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ǎn)擊該組件的時(shí)候，調(diào)用該事件處理函數(shù)。跳轉(zhuǎn)到logs頁面。
  16.   bindViewTap: function() {
  17.     wx.navigateTo({
  18.       url: '../logs/logs'
  19.     })
  20.   },
  21.  
  22.   //5. 頁面加載,一個(gè)頁面只會調(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ù)制代碼

視圖層和邏輯層的交互是通過事件機(jī)制來實(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ù)，并通過函數(shù)名進(jìn)行關(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ù)用來注冊一個(gè)頁面。接受一個(gè) object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
  9.   data: {
  10.     logs: []
  11.   },
  12.  
  13.   //3. 頁面加載,一個(gè)頁面只會調(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ù)制代碼

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

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

7. 小結(jié)

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

8. 預(yù)告

了解并使用微信開發(fā)工具的調(diào)試功能。

【本站聲明】
  1、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿，由于未聯(lián)系到知識產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識產(chǎn)權(quán)的登記，如有知識產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請立即聯(lián)系。
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類商品/服務(wù)詳細(xì)的資訊，請您直接與該類商品/服務(wù)的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺、在線教育SaaS服務(wù)平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢等。

KESION 不斷通過技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過科技驅(qū)動商業(yè)革新，讓商業(yè)變得更智慧！



▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多



熱門標(biāo)簽
微信小程序 SaaS
上/下篇
換一換相關(guān)推薦
精選內(nèi)容
熱點(diǎn)精選