微信小程序教程入门篇【4】,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文件的用处：注册App()。这里面包含两部分。
其一：生命周期函数的定义(onLaunch/onShow/onHide)。
其二：自定义函数，通常用于操作全局数据或微信提供的用户等业务逻辑数据。
           全局数据。

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

启动后的主页面，根据app.json中【pages】中的部分来决定。准备的来说，谁在上面则主页面是谁。在该项目中，代码如下：
如果我们把index和logs更换位置，则主页面则由上图中的左图更换为右图。代码如下：


5. 主页面


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

• 文件层

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

• 代码层

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

视图层和逻辑层的交互是通过事件机制来实现的，上面代码【4】所示为逻辑层的处理逻辑。事件代码在视图层如下所示：
如上所示，从coding层面上讲，事件机制由两部分组成。其一在page相关的wxml文件中。其二在.js文件中，定义相应的处理函数，并通过函数名进行关联识别。

6. logs页面

• logs页面分析

logs.js代码如下：
logs.wxml如下：

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

7. 小结

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

8. 预告

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