MINA框架的視圖層和邏輯層實(shí)例分析

本篇內(nèi)容主要講解“MINA框架的視圖層和邏輯層實(shí)例分析”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“MINA框架的視圖層和邏輯層實(shí)例分析”吧!

1. 開(kāi)篇導(dǎo)言    

• 目標(biāo)用戶(hù)：無(wú)編程經(jīng)驗(yàn)，但對(duì)微信小程序感興趣的同學(xué)。

• 學(xué)習(xí)目標(biāo)：了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互。

• 案例分析：helloworld小程序。

2. MINA結(jié)構(gòu)基礎(chǔ)

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í)指的是線(xiàn)程間的交互。
一個(gè)小程序只有一個(gè) service 進(jìn)程，它在程序生命周期內(nèi)后臺(tái)運(yùn)行。當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷(xiāo)毀。

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的代碼如下：

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. 成員方法：獲取用戶(hù)數(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ù)或微信提供的用戶(hù)等業(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è)面


上圖描述了啟動(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)用戶(hù)點(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.  

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>

到此，相信大家對(duì)“MINA框架的視圖層和邏輯層實(shí)例分析”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！