MINA框架的视图层和逻辑层实例分析

本篇内容主要讲解“MINA框架的视图层和逻辑层实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“MINA框架的视图层和逻辑层实例分析”吧!

1. 开篇导言    

• 目标用户：无编程经验，但对微信小程序感兴趣的同学。

• 学习目标：了解MINA框架的视图层(View)，逻辑层(App Service)，及其之间的交互。

• 案例分析：helloworld小程序。

2. MINA结构基础

view模块：负责UI显示。它由开发者编写的wxml，wxss及微信提供的相关组件来组成。
service模块：负责应用的后台逻辑，它由小程序的 js 代码以及微信提供的相关辅助模块组成。
其中view模块由view thread进行驱动，service模块则由AppService Thread进行驱动。我们说view模块和service模块之间的交互，其实指的是线程间的交互。
一个小程序只有一个 service 进程，它在程序生命周期内后台运行。当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

3. 案例展示

上图为该项目的两个页面。左面：主页面。右面：logs页面。
下面将分为三部分对helloworld进行讲解：启动流程，主页面，logs页面。

4. 启动流程

• 逻辑入口：app.js

app.js的代码如下：

1. //app.js

2.  

3. //1. App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。

4. App({

5.  

6.   //2. 生命周期函数--监听小程序初始化,当小程序初始化完成时，会触发onLaunch（全局只触发一次）  

7.   onLaunch: function () {

8.     //调用api从本地缓存中获取数据

9.     var logs = wx.getStorageSync('logs') || []

10.     logs.unshift(Date.now())

11.     wx.setStorageSync('logs', logs)

12.   },

13.  

14.   //3. 成员方法：获取用户数据。

15.   getUserInfo:function(cb){

16.     var that = this

17.     if(this.globalData.userInfo){

18.       typeof cb == "function" && cb(this.globalData.userInfo)

19.     }else{

20.       //调用登录接口

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. 全局数据

35.   globalData:{

36.     userInfo:null

37.   }

38. })

39.  

40. //注意：App()必须在app.js中注册，且不能注册多个。

41. //     不要在定义于App()内的函数中调用getApp()，使用this就可以拿到app实例。

42. //     不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。

复制代码

上面的代码文件说明了app.js文件的用处：注册App()。这里面包含两部分。
其一：生命周期函数的定义(onLaunch/onShow/onHide)。
其二：自定义函数，通常用于操作全局数据或微信提供的用户等业务逻辑数据。
           全局数据。

• 启动后的主页面：app.JSON

启动后的主页面，根据app.json中【pages】中的部分来决定。准备的来说，谁在上面则主页面是谁。在该项目中，代码如下：

1. "pages":[

2.     "pages/index/index",

3.     "pages/logs/logs"            

4.   ],

复制代码

如果我们把index和logs更换位置，则主页面则由上图中的左图更换为右图。代码如下：

1. "pages":[

2.     "pages/logs/logs",

3.     "pages/index/index"               

4.   ],

复制代码

5. 主页面


上图描述了启动后，进入主页面，小程序的调用流程。

• 文件层

找寻在路径【"pages/index/index"】中，后缀为.json,.js,.wxml,.wxss的文件，并进行整合。

• 代码层

对于路由后的主页面，调用onLoad，onShow。该项目中代目如下：

1. //index.js

2.  

3. //1. 获取应用实例

4. var app = getApp()

5.  

6. //2. Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

7. Page({

8.  

9.   //3. 页面的初始数据

10.   data: {

11.     motto: 'Hello World',

12.     userInfo: {}

13.   },

14.  

15.   //4. 事件处理函数,当用户点击该组件的时候，调用该事件处理函数。跳转到logs页面。

16.   bindViewTap: function() {

17.     wx.navigateTo({

18.       url: '../logs/logs'

19.     })

20.   },

21.  

22.   //5. 页面加载,一个页面只会调用一次.

23.   onLoad: function () {

24.     console.log('onLoad')

25.     var that = this

26.     //调用应用实例的方法获取全局数据

27.     app.getUserInfo(function(userInfo){

28.       //更新数据

29.       that.setData({

30.         userInfo:userInfo

31.       })

32.     })

33.   }

34.  

35. })

36.  

复制代码

视图层和逻辑层的交互是通过事件机制来实现的，上面代码【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>

复制代码

如上所示，从coding层面上讲，事件机制由两部分组成。其一在page相关的wxml文件中。其二在.js文件中，定义相应的处理函数，并通过函数名进行关联识别。

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() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

9.   data: {

10.     logs: []

11.   },

12.  

13.   //3. 页面加载,一个页面只会调用一次.

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控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。-->

5.   <!-- block wx:for 渲染一个包含多节点的结构块。-->  

6.   <!-- 用 wx:for-item 可以指定数组当前元素的变量名。-->

7.   <block wx:for="{{logs}}" wx:for-item="log">

8.   

9.     <text class="log-item">{{index + 1}}. {{log}}</text>

10.   </block>

11. </view>

到此，相信大家对“MINA框架的视图层和逻辑层实例分析”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！