微信小程序 - 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
4000
() {
//调用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程序，应该十分有趣。