微信小程序 - MINA 框架 学习笔记

作为码农，似乎必须跟随潮流，兢兢战战，最近微信小程序横空出世，那么就一起来看看吧。

按惯例，先贴link为敬：http://bing.aliaii.com/wxopen/MINA.html

一、MINA

在阅读开发者文档之后，越发感觉微信小程序是一个由微信内置JS引擎启动的前端程序，打个比喻就是在微信的框架下写web应用。

而这个框架被称为MINA。

这是在百度随便找的一张微信现在的UI，实际上微信小程序与这个UI类似：

整个页面大致被分为三部分，上中下，最上面是一个导航栏，最下面是一个TAB的切换栏，而中间的page则是小程序最主要完成的部分。

而MINA这个框架也是围绕这三部分，让dev可以进行配置，嵌入引擎可执行的JS代码来完成功能。

所以MINA是微信小程序的核心框架，只有符合MINA规范的代码才能够被引擎正确调用，那么我们就来看看这个MINA。

二、从quickstart开始

可以看到大致分为三个部分 app.xx / pages / utils

utils是一些工具包，pages则是上图所述的每个page的代码，app.xx则是小程序的全局配置。

所以我们可以知道，微信小程序其实是一个app里面包括了若干page (1-5 文档说明page的最大上限是5个)

app -> global

page -> local

其实这里和extjs4+的MVC很相似，一个Ext.application作为入口，主要的页面构建和功能交由viewport和各种component完成。

我们来看看app.js

App({  onLaunch: function () {    //调用API从本地缓存中获取数据    var logs = wx.getStorageSync('logs') || []    logs.unshift(Date.now())    wx.setStorageSync('logs', logs)  },  getUserInfo:function(cb){    var that = this;    if(this.globalData.userInfo){      typeof cb == "function" && cb(this.globalData.userInfo)    }else{      //调用登录接口      wx.login({        success: function () {          wx.getUserInfo({            success: function (res) {              that.globalData.userInfo = res.userInfo;              typeof cb == "function" && cb(that.globalData.userInfo)            }          })        }      });    }  },  globalData:{    userInfo:null  }})

App是内置的注册方法，可以根据一个JS Obj来定义一个app对象，onLaunch、onShow、onHide分别表述了这个小程序的生命周期，同时可以定义其他全局方法/变量，如上述的getUserInfo/globalData，App内的其他page可以通过getApp()来获取app对象实例，继而调用这些全局方法/对象。

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是整个小程序的配置文件，指明了程序中的page，以及navigationBar和tabBar的style/link等，networkTimeout以及debug则是开发级别的配置

window节点在文档中只可以配置一些颜色以及字体样式，以及下拉刷新开关，而tabBar除了link以外也可以配置相应的icon，文本，颜色。

app.wxss 则和标准的css写法大致相同，为全局的样式表。

Page分为三个部分

js / wxml / wxss，js是由纯js代码构成，是page的逻辑部分，wxml类似HTML是page的视图部分，但必须使用MINA所提供的标签，wxss则是css的部分，使用也是相似的。

同时MINA也是一个MVVM框架，在wxml内可以使用特殊的命令属性来和js内的data绑定。

也应该注意的是全部代码运行在AppService内，并没有browsers上下文，也就意味着没有document/window，也不可以使用jquery等js lib。

Page({  data: {    text: "This is page data."  },  onLoad: function(options) {    // Do some initialize when page load.  },  onReady: function() {    // Do something when page ready.  },  onShow: function() {    // Do something when page show.  },  onHide: function() {    // Do something when page hide.  },  onUnload: function() {    // Do something when page close.  },  // Event handler.  viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    })  }})

Page是一个注册函数，传入一个js obj进行配置（如果你有extjs经验，应该习以为常）

主要的节点是data和onXX所表示的生命周期函数，也可以自定义一些方法，这些方法可以在wxml内使用，作为事件的handler（如果你有angularjs或者vue.js经验，应该习以为常）

但有一点不同的是并不能通过this.data.text来进行MVVM的双向绑定，必须通过this.setData({...})来完成 js -> view的数据绑定

<view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{obj.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>

在wxml内通过{{}}进行绑定。也提供了wx:if 、wx:for-items、<template name/is> 、bindXXX、catchXX来完成模板以及事件/属性绑定（与Vue.js类似）

也提供了类似commonJS的模块化构建

每一个js文件都是一个独立的模块，可以通过

var test=require('test.js')function sayHello(name) {  console.log('Hello ' + name + '!')}module.exports = {  sayHello: sayHello}

进行模块化JS编程。

在wx命名空间下框架提供了大量内置的方法，如果网络/媒体/数据/位置/界面等操作方法，大致可以完成远端数据交互，UX

结语：微信小程序可以看作是一个在微信内运行的web框架，dev只需按照约定就可以构建可运行的程序，而代码基本与前端编程无异，框架结合了MVVM的特性，在开发视角来看学习成本不大，最多的是js api的学习和运用。也因如此，借助于微信这一app来开发B/S程序，应该十分有趣。