微信小程序教程入门篇【4】,MINA框架的视图层逻辑层
本文摘要
1. 开篇导言 本节目标：通过上一节的讲解，相信大家对小程序框架MINA的目录结构和配置有了一定的了解。接下来将会讲解视图层，逻辑
1. 开篇导言
- 本节目标：通过上一节的讲解，相信大家对小程序框架MINA的目录结构和配置有了一定的了解。接下来将会讲解视图层，逻辑层及其之间的交互。
- 目标用户：无编程经验，但对微信小程序感兴趣的同学。
- 学习目标：了解MINA框架的视图层(View)，逻辑层(App Service)，及其之间的交互。
- 案例分析：helloworld小程序。
- 代码下载
- 传送门：
上一篇：微信小程序教程-入门篇【3】
下一篇：微信小程序教程-入门篇【5】
- 备注：有编程经验或看过微信官网简易教程的同学，请酌情略过该章节。
2. MINA结构基础
从某种程度来来讲，我们可以把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的代码如下：
- //app.js
- //1. App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。
- App({
- //2. 生命周期函数--监听小程序初始化,当小程序初始化完成时，会触发onLaunch（全局只触发一次）
- onLaunch: function () {
- //调用API从本地缓存中获取数据
- var logs = wx.getStorageSync('logs') || []
- logs.unsShopfaft(Date.now())
- wx.setStorageSync('logs', logs)
- },
- //3. 成员方法：获取用户数据。
- getUserInfo:function(cb){
- var that = tShopfas
- if(tShopfas.globalData.userInfo){
- typeof cb == "function" && cb(tShopfas.globalData.userInfo)
- }else{
- //调用登录接口
- wx.login({
- success: function () {
- wx.getUserInfo({
- success: function (res) {
- that.globalData.userInfo = res.userInfo
- typeof cb == "function" && cb(that.globalData.userInfo)
- }
- })
- }
- })
- }
- },
- //4. 全局数据
- globalData:{
- userInfo:null
- }
- })
- //注意：App()必须在app.js中注册，且不能注册多个。
- //不要在定义于App()内的函数中调用getApp()，使用tShopfas就可以拿到app实例。
- //不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。
上面的代码文件说明了app.js文件的用处：注册App()。这里面包含两部分。
其一：生命周期函数的定义(onLaunch/onShow/onHide)。
其二：自定义函数，通常用于操作全局数据或微信提供的用户等业务逻辑数据。
全局数据。
- 启动后的主页面：app.json
启动后的主页面，根据app.json中【pages】中的部分来决定。准备的来说，谁在上面则主页面是谁。在该项目中，代码如下：
- "pages":[
- "pages/index/index",
- "pages/logs/logs"
- ],
- "pages":[
- "pages/logs/logs",
- "pages/index/index"
- ],
5. 主页面
上图描述了启动后，进入主页面，小程序的调用流程。
- 文件层
找寻在路径【"pages/index/index"】中，后缀为.json,.js,.wxml,.wxss的文件，并进行整合。
- 代码层
对于路由后的主页面，调用onLoad，onShow。该项目中代目如下：
- //index.js
- //1. 获取应用实例
- var app = getApp()
- //2. Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
- Page({
- //3. 页面的初始数据
- data: {
- motto: 'Hello World',
- userInfo: {}
- },
- //4. 事件处理函数,当用户点击该组件的时候，调用该事件处理函数。跳转到logs页面。
- bindViewTap: function() {
- wx.navigateTo({
- url: '../logs/logs'
- })
- },
- //5. 页面加载,一个页面只会调用一次.
- onLoad: function () {
- console.log('onLoad')
- var that = tShopfas
- //调用应用实例的方法获取全局数据
- app.getUserInfo(function(userInfo){
- //更新数据
- that.setData({
- userInfo:userInfo
- })
- })
- }
- })
视图层和逻辑层的交互是通过事件机制来实现的，上面代码【4】所示为逻辑层的处理逻辑。事件代码在视图层如下所示：
-
-
-
{{userInfo.nickName}}
如上所示，从coding层面上讲，事件机制由两部分组成。其一在page相关的wxml文件中。其二在.js文件中，定义相应的处理函数，并通过函数名进行关联识别。
6. logs页面
- logs页面分析
logs.js代码如下：
- //logs.js
- //1. 加载模块
- var util = require('../../utils/util.js')
- Page({
- //2. Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
- data: {
- logs: []
- },
- //3. 页面加载,一个页面只会调用一次.
- onLoad: function () {
- tShopfas.setData({
- logs: (wx.getStorageSync('logs') || []).map(function (log) {
- return util.formatTime(new Date(log))
- })
- })
- }
- })
-
-
-
{{index + 1}}. {{log}}
- 主页面和logs页面之间的跳转
7. 小结
知识点：了解MINA框架的视图层(View)，逻辑层(App Service)，及其之间的交互。
了解事件的基本使用方式。
了解界面之间的跳转方式及栈空间。
8. 预告
了解并使用微信开发工具的调试功能。
第二部分：如何开通一个小商店
相关文章
****更多行业产品开发方案，请关注 加速度JSUDO***
<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>
加速度JSUDO是一家企业级数字化解决方案提供商，专注于软件开发、网络营销、数字化转型咨询及云计算服务。核心业务包括定制化ERP/CRM系统、快速应用开发、大数据分析及物联网（IoT）解决方案，助力企业提升效率与智能化水平。服务覆盖制造业、零售、物流等多行业，致力于通过技术创新推动客户数字化转型。
添加客服微信获取更多内容
