微信小程序教程入口[4]，查看MINA框架的层逻辑层

1. 开篇导言 本节的目标：通过上一节的解释，我相信每个人都对小程序框架MINA的目录结构和配置有一定的了解。下一步是解释视图层，逻辑层以及它们之间的交互。目标用户：没有编程经验但对微信小程序感兴趣的学生。学习目标：了解MINA框架的视图层（View），逻辑层（App Service）以及它们之间的交互。案例研究：helloworld小程序。代码下载门户网站：上一篇：微信小程序教程 - 入门[3]下一篇：微信小程序教程 - 入门[5]备注：有编程经验的学生或已经看过微信官方网站的简单教程，请酌情跳过本章。2. MINA结构基础在某种程度上，我们可以简化MINA的结构如下：视图模块：负责UI显示。它由开发人员编写的微信提供的wxml，wxss和相关组件组成。服务模块：负责应用程序的后台逻辑。它由小程序的js代码和微信提供的相关辅助模块组成。视图模块由视图线程驱动，服务模块由AppService线程驱动。我们说视图模块和服务模块之间的交互实际上是指线程之间的交互。 小程序只有一个服务进程，它在程序生命周期中在后台运行。当小程序进入后台一段时间，或系统资源占用过高时，它将被销毁。3. 案例展示上图显示了该项目的两个页面。左：主页面。右：日志页面。 以下将分为三个部分来解释helloworld：汇海进程，主页面，日志页面。4. 汇海流程逻辑条目：app.jsapp.js的代码如下：app.js //1。 App（）函数用于注册小程序。接受指定小程序的生命周期函数的对象参数，依此类推。 App（{//2.生命周期函数 - 监视小程序初始化，当小程序初始化完成时，onLaunch将被触发（仅全局一次）onLaunch: function（）{//调用API从本地缓存获取数据var logs=wx .getStorageSync（'logs'）|| [] logs.unshift（Date.now（））wx.setStorageSync（'logs'，logs）}，//3.成员方法：获取用户数据。 getUserInfo: function（cb）{var that=this if（this.globalData.userInfo）{typeof cb=='function'＆amp;＆amp; cb（this.globalData.userInfo）} else {//调用登录界面wx.login（{success: function（）{wx.getUserInfo（{success: function（res）{that.globalData.userInfo=res.userInfo typeof cb=='function'＆amp;＆amp; cb（that.globalData.userInfo）}}）}}）}}，//4。全局数据globalData: {userInfo: null}}）//注意：App（）必须在app.js中注册，并且不能注册多个。 //不要在App（）中定义的函数上调用getApp（），使用它来获取应用程序实例。 //不要在onLaunch上调用getCurrentPage（），页面尚未生成。复制上面的代码显示了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']，copy code5. 主页面上图显示了输入汇海后小程序的调用流程。文件层在路径['pages/index/index']中查找带有后缀.json，js，wxml，wxss的文件并对它们进行集成。路由后，代码层调用onLoad，onShow作为主页面。该项目中的子项如下：//index.js//1。获取应用程序实例var app=getApp（）//2。 Page（）函数用于注册页面。接受指定页面的初始数据，生命周期函数，事件处理程序等的对象参数。 Page（{//3.页面数据的初始数据: {motto:'Hello World'，userInfo: {}}，//4.事件处理程序，当用户点击组件时，调用事件处理程序。到日志页面。 bindViewTap: function（）{wx.navigateTo（{url:'./logs/logs'}）}，//5。页面加载，一个页面只会被调用一次。 onLoad: function（）{console.log（'onLoad'）var that=this //调用应用程序实例的方法获取全局数据app.getUserInfo（function（userInfo）{//更新数据that.setData（{userInfo: userInfo}）}）}}）复制代码视图层，逻辑层的交互由事件机制实现。上面的代码[4]显示了逻辑层的处理逻辑。事件代码在视图层中，如下所示：{{userInfo.nickName}}复制代码如上所示。从编码层面来看，事件机制由两部分组成。其中一个是在页面相关的wxml文件中。第二种是在.js文件中定义相应的处理函数，并按函数名称标识关联。6. logs页面日志页面分析logs.js代码如下：/logs.js//1。加载模块var util=require（'././utils/util.js'）Page（{//2.Page。（）函数用于注册页面。它接受一个指定页面初始值的对象参数数据，生命周期函数，事件处理程序等。 数据: {logs: []}，//3。页面加载，页面只会被调用一次。 onLoad: function（）{this.setData（{logs:（wx.getStorageSync（'logs'）|| []）。map（function（log）{return util.formatTime（new Date（log））}）}）复制代码logs.wxml，如下所示：{{index + 1}}。 {{log}}复制代码主页面在日志页面和日志页面之间跳转7. 小结知识点：了解视图层（View），MINA框架的逻辑层（App Service），以及它们之间的交互他们。了解事件的基本用法。了解接口之间的跳转模式和堆栈空间。8. 预告了解并使用微信开发工具的调试功能。

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。