微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

—— 2017 ——
12/20
00:00

来源：

作者：未知

阅读：0

栏目：小程序开发

2017/12/20 0:00:00 来源：不详 作者：未知

1. 开篇导言    
  • 本节目标：通过上一节的讲解，相信大家对小程序框架MINA的目录结构和配置有了一定的了解。接下来将会讲解视图层，逻辑层及其之间的交互。
  • 目标用户：无编程经验，但对微信小程序感兴趣的同学。
  • 学习目标：了解MINA框架的视图层(View)，逻辑层(App Service)，及其之间的交互。
  • 案例分析：helloworld小程序。
  • 代码下载
  • 传送门：

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

  • 备注：有编程经验或看过微信官网简易教程的同学，请酌情略过该章节。

2. MINA结构基础
从某种程度来来讲，我们可以把MINA的结构简化如下图：
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

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

3. 案例展示
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层
上图为该项目的两个页面。左面：主页面。右面：logs页面。
下面将分为三部分对helloworld进行讲解：启动流程，主页面，logs页面。

4. 启动流程
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层
  • 逻辑入口：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. 主页面
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

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

  • 文件层

找寻在路径【"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>
  12.  
复制代码

  • 主页面和logs页面之间的跳转

微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

7. 小结

知识点：了解MINA框架的视图层(View)，逻辑层(App Service)，及其之间的交互。
              了解事件的基本使用方式。
              了解界面之间的跳转方式及栈空间。

8. 预告

了解并使用微信开发工具的调试功能。

【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！



▼点击进入科汛官网了解更多



热门标签
微信小程序 SaaS
上/下篇
换一换相关推荐
精选内容
热点精选
产品服务
商家服务
关于我们

科汛专注于在线教育软件及私域社交电商SaaS平台解决方案，让商业经营更简单。

地址：厦门市观音山国际商务中心6号楼606号

电话：400-008-0263/0596-2218051

邮箱：partner@kesion.com

关注我们

Copyright©2006-2022厦门科汛软件有限公司 All Rights Reserved.

闽ICP备06009871号

闽公网安备35020302001540号

国家高新技术认定企业

国家高新技术认定企业

ISO20000

ISO20000

ISO27001

ISO27001

OHSAS18001

OHSAS18001

© 2006-2024 厦门科汛软件有限公司 版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1 闽公网安备 35020302001540号 统一社会信用代码：91350206MA2XN2XQ4A 国家高新技术企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证联盟企业编号：928180109031687687593 国际权威认证：信息技术服务管理体系标准（ISO 20000） 信息安全管理体系国际认证（ISO/IEC 27001）
在线咨询 电话咨询