小程序框架简介和生命周期

框架名称:MINA(MINA IS NOT APP)是在微信中开发小程序的框架。

框架结构 :MINA框架由两部分组成.视图层(View)和逻辑层(App Service)。

框架特征 :响应式的数据绑定(MINA用响应式数据绑定的方式，在视图层和逻辑层之间进行通信。从某种程度上，可以看成是MVVM模式。)

结构：MINA程序包含一个描述整体程序的app和多个描述各自页面的page。
一个MINA程序主体部分由三个文件组成，必须放在根目录下。

Paste_Image.png

一个MINA页面由四个文件组成。如下图

Paste_Image.png

注：为了方便开发者减少配置项，规定描述页面的这四个文件必须有相同的路径和文件名。

配置：
在MINA程序的主体部分中，是通过app.json文件来对小程序进行全局配置的。包括页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
App.json配置项列表

Paste_Image.png

1.逻辑层（AppService）

MINA的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
在JavaScript的基础上，我们做了一些修改，以方便地开发MINA程序。

增加App和Page方法，进行程序和页面的注册。
提供丰富的API，如扫一扫，支付等微信特有能力。
每个页面有独立的作用域，并提供模块化能力。
由于MINA并非运行在浏览器中，所以JavaScript在web中一些能力都无法使用，如document，window等。
 开发者写的所有代码最终将会打包成一份JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似ServiceWorker，所以逻辑层也称之为App Service。

App.js

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

Paste_Image.png

微信小程序中的前台、后台定义： 当用户点击左上角关闭，或者按了设备Home键离开微信，小程序并没有正在的销毁，而是进入了后台；当再次启动微信或再次打开小程序，又会从后台进入前台。

注意：
App()必须在app.js中注册，且不能注册多个。
不要在定义于App()内的函数中调用getApp()，使用this就可以拿到app实例。
不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。
通过getApp获取实例之后，不要私自调用生命周期函数。

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

Paste_Image.png

Page页面管理：在小程序中所有页面的路由全部由MINA进行管理，对于路由的触发方式以及页面生命周期函数如下：

Paste_Image.png

2.视图层(View)

MINA的视图层由WXML与WXSS编写。(WXML类似HTML ,WXSS类似CSS)
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
WXML(nWeiXi Markup language)用于描述页面的结构。
WXSS(WeiXin Style Sheet)用于描述页面的样式。

WXML:WXML(WeiXin Markup Language)是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXML的能力：

数据绑定：{{ demo }} 其中{{ demo }} 为 .js 文件中 data 里面的变量demo的值。
列表渲染： {{item}} 。通过 wx：for-items可以对数组进行遍历渲染，构造出多个view视图。
条件渲染：通过对 .js里面的变量 view的值，去判断显示哪个视图。

Paste_Image.png

模板：模板功能是通过对template 标签的属性 name=”” 去创建不同模板，通过is=”name的值”来使用。模板：模板功能是通过对template 标签的属性 name=”” 去创建不同模板，通过is=”name的值”来使用。

Paste_Image.png

Paste_Image.png

事件：通过bindtap=”方法名称”属性，来定义该控件点击事件。

WXSS:

WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言，用于描述WXML的组件样式。
WXSS用来决定WXML的组件应该怎么显示?
为了适应广大的前端开发者，WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序，对CSS进行了扩充以及修改。
与css相比我们扩展的特性有：1.尺寸单位 2.样式导入.
尺寸单位： rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
样式导入: 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

小程序的额生命周期

微信小应用的每一个page都有其生命周期。 onLoad,onReady,onShow,onHide,onUnload。我们在index.js里面每个生命周期里面打印出log。如下图。

Paste_Image.png

Paste_Image.png

可以看到一个page从打开到显示，他的生命周期执行的顺序是 onLoad->onShow->onReady,当跳转到另一个页面时，执行的是onHide,当从其他页面返回的时,又会重新调用onShow.