微信小程序：框架——MINA

MINA(MINA IS NOT APP)就是微信小程序开发使用的框架。


<view> Hello {{name}}! view>
<button bindtap="changeName"> Click me! button>

// App Service
// 初始数据创建
var helloData = {
name: 'WeChat'
}

// 注册页面.
Page({
data: helloData,
changeName: function(e) {
this.setData({
name: 'MINA'
})
}
})

开发者通过MINA将逻辑层数据中的name与视图层的name进行了绑定，所以在页面一打开的时候会显示Hello WeChat!
当点击按钮的时候，视图层会发送changeName的事件给逻辑层，逻辑层找到对应的事件处理函数
逻辑层执行了setData的操作，将name从weChat变为MINA，因为该数据和视图层已经绑定了，从而视图层会自动响应改变为Hello MINA! 。
简单来说，视图层中绑定了name，在逻辑层中只需要对绑定的name操作就行了，而无需再获取"DOM对象",因为这部分关联工作MINA 已经做好了。

• 页面管理
  MINA管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进MINA中，其他的一切复杂的操作都交由MINA处理。
• 基础组件
  MINA提供了一套基础的(具有微信风格和微信逻辑的)组件，开发者通过组合各种基础组件，创建自己的微信小程序。
• API——独特的优势
  MINA提供丰富的微信原生API，调用微信功能十分方便（自个儿家产的当然用着方便），如获取用户信息，本地存储，支付功能等。

再来细致的了解一下MINA

一、目录结构：

app文件结构

各个页面（page）文件结构

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

二、 配置 ——对.json文件的详细解释

开发者使用app.json文件对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、多tab等：
各个页面的.json文件来对本页面的窗口表现进行配置。 也就是只需要配置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。

// app.json
{
 "pages": [ 
 "page/index/index",
 "page/logs/index"
 ],
 "window": {
 "navigationBarTitleText": "Demo"
 },
 "tabBar": {
 "list": [{
 "pagePath": "page/index/index",
 "text": "首页"
 }, {
 "pagePath": "page/logs/logs",
 "text": "日志"
 }]
 },
 "networkTimeout": {
 "request": 10000,
 "downloadFile": 10000
 },
 "debug": true
}

app.json配置项列表

pages

​ 接受一个字符串数组，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。

​ 文件名不需要写文件后缀，因为MINA会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

app.json中：

"window": {
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "这是我的小程序",
 "navigationBarBackgroundColor": "#fbf9fe",
 "backgroundColor": "#fbf9fe"
 }

页面.json中，只能配置当前页面，所以不用添加window键：

{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"页面上部导航标题",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}

tabBar

底部导航，小程序只支持2~5个tab，tab按数组顺序排序。
属性说明：

list属性：

networkTimeout

设置网络请求超时时间
属性说明：

debug

​ 可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，信息包括：Page的注册，页面路由，数据更新，事件触发 。