微信小程序：框架——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配置项列表

属性	类型	必填	描述
pages	StringArray	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部tab的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启debug模式

pages

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

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

window

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

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading图的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新

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

属性	类型	必填	默认值	描述
color	HexColor	是		tab上文字颜色
selectedColor	HexColor	是		tab选中时的文字颜色
backgroundColor	HexColor	是		tab背景色
borderStyle	String	否	black	tab边框的颜色， 仅支持 black/white
list	Array	是		tab的列表

list属性：

属性	类型	必填	说明
pagePath	String	是	关联的页面路径
text	String	是	tab上按钮文字
iconPath	String	是	图标图片路径，40kb以内
selectedIconPath	String	是	选中图标图片路径，40kb以内

networkTimeout

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

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

debug

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