微信小程序：框架——MINA

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

MINA基本结构.png

• 基本工作原理

MINA的核心是一个响应的数据绑定系统。

整个系统分为两块：视图层(View) 和 逻辑层(App Service)。
MINA可以让数据与视图保持同步非常简单。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

<!--视图层 --><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文件结构

文件必需作用app.js是小程序逻辑app.json是小程序公共设置app.wxss否小程序公共样式表

各个页面（page）文件结构

文件必需作用wxml是页面结构wxss否页面样式表json否页面配置js是页面逻辑

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

二、 配置 ——对.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配置项列表

属性类型必填描述pagesStringArray是设置页面路径windowObject否设置默认页面的窗口表现tabBarObject否设置底部tab的表现networkTimeoutObject否设置网络超时时间debugBoolean否设置是否开启debug模式

pages

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

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

window

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

属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/whitenavigationBarTitleTextString
导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉背景字体、loading图的样式，仅支持dark/lightenablePullDownRefreshBooleanfalse是否开启下拉刷新

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按数组顺序排序。
属性说明：

属性类型必填默认值描述colorHexColor是
tab上文字颜色selectedColorHexColor是
tab选中时的文字颜色backgroundColorHexColor是
tab背景色borderStyleString否blacktab边框的颜色， 仅支持 black/whitelistArray是
tab的列表

list属性：

属性类型必填说明pagePathString是关联的页面路径textString是tab上按钮文字iconPathString是图标图片路径，40kb以内selectedIconPathString是选中图标图片路径，40kb以内

networkTimeout

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

属性类型必填说明requestNumber否wx.request的超时时间，单位msconnectSocketNumber否wx.connectSocket的超时时间，单位msuploadFileNumber否wx.uploadFile的超时时间，单位msdownloadFileNumber否wx.downloadFile的超时时间，单位ms

debug

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