首先，我们将艺龙微信小程序的框架组件分为以下四个部分来分析：
1.局部组件
2.独立组件
3.集成组件
4.网络请求
先看三张的动态效果图：
总体而言，其目录结构如下：
[AppleScript] 纯文本查看 复制代码
├── README.MD
├── app.js
├── app.json
├── app.wxss
├── components
├── image
├── pages
├── service
└── utils
├── api.js
├── cookie.js
├── data-center.js
├── overwrite.js
├── page-events.js
├── path.js
├── promise.js
└── service.js框架使用说明
框架对所有微信原生api进行了一层包装，以便管控和扩展。
[AppleScript] 纯文本查看 复制代码
//index.js
var api = require("./utils/api.js")();
api.login({
success: function(res) {
console.log(res);
}
});[AppleScript] 纯文本查看 复制代码
//index.js
var api = require("./utils/api.js")();
api.login({
success: function(res) {
console.log(res);
}
});对于后端接口，框架提供service层进项管理，接口返回一个Promise对象。
[AppleScript] 纯文本查看 复制代码
//demo.js
var Service = require("../utils/service.js");
module.exports = {
GetTime: Service({
url: 'https://xxx.xxx.xxx/api/getserverdate/',
params: [], //参数列表
method: 'GET',
noLoading: true,
mockData: function() { //模拟数据
return new Date();
},
dataTransform: function(data) { //适配处理
return data;
}
})
};[AppleScript] 纯文本查看 复制代码
//index.js
var service = require('service/demo'); //框架约定，所有的后端接口，要注册到对应的service文件中
var serverDate = service.GetTime( /*service可配置参数列表，这里传入相对应的参数*/ ).then(function(date) {
that.setData({
serverDate: date
});
});小程序不支持cookie机制，若要兼容现有后端cookie处理（不做改动），可使用框架模拟的cookie机制。
[AppleScript] 纯文本查看 复制代码
//index.js
var COOKIE = require('./cookie.js');
var expire = new Date().getTime() + res.expire * 1000;
COOKIE.set(key, value, expire);[AppleScript] 纯文本查看 复制代码
//service.js //... headers["Cookie"] = Cookie.getAll(); //用户cookie将随http请求发送至服务器 //...
Page() 函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等，框架对Page做了重写，这样可以方便的使用扩展能力，使用时仅需将原来的业务代码用包装器包装一下即可。
[AppleScript] 纯文本查看 复制代码
//微信小程序原生页面注册形式
Page({
data: {},
onLoad: function() {}
});
//框架重写注册形式
var dirname = 'pages/index',
overwrite = require('../../utils/overwrite.js');
(function(require, Page) { //重写require、Page
Page({
data: {},
onLoad: function() {}
});
})(overwrite.require(require, dirname), overwrite.Page);globalData监听，框架支持全局事件监听机制
[AppleScript] 纯文本查看 复制代码
//index.js
var dirname = 'pages/index',
overwrite = require('../../utils/overwrite.js');
(function(require, Page) {
//获取应用实例
var app = getApp();
var service = require('service/demo');
Page({
data: {
indate: '',
indateText: ''
},
onLoad: function() {
this.listenerGlobalData('indate', function(indate) {
this.data.indate = indate
this.data.indateText = new Date(indate).format('MM-dd')
}.bind(this));
}
})
})(overwrite.require(require, dirname), overwrite.Page);事件机制，页面间跳转可以传递数据，框架支持页面间传递数据的同时，还可以通过跳转接口返回的事件对象监听自定义事件。
[AppleScript] 纯文本查看 复制代码
//index页面
var event = api.Navigate.go({
url: '../list/index',
params: {
name: 'billy'
}
});
event.on("listok", function(params) {
console.log(params);
});[AppleScript] 纯文本查看 复制代码
//http页面
Page({
onLoad: function(data) {
if (data.name === 'billy') {
this.fireEvent("listok", 'hello ' + data.name);
}
}
});组件使用说明
内置组件
框架重写Page构造方法，内置了一些常用的组件，例如 alert、picker、setLoading，其中 alert 和 setLoading 内部分别封装了原生的 wx.showModal 、wx.showToast，封装使得调用参数结构化，方便业务使用，使用时不用引入页面结构，直接调用即可；picker则需要首先引入到页面中表现层结构，按照配置要求传递配置项。
[AppleScript] 纯文本查看 复制代码
//setLoading
this.setLoading(true);//ture/false
//picker 引入表现层结构
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<text class="userinfo-nickname">{{current}}</text>
</view>
<include src="../../components/base.wxml" />
</view>
//picker 使用
overwrite.picker({
content: "选择排序",
init: this.data.sortIndex,
data: this.data.sortList,
bindtap: function(id, index) {
if (that.data.sort != id) {
that.setData({
sortIndex: index,
current: this.data.sortList[index].text
});
}
},
bindcancel: function() {
console.log('cancel')
}
});
//alert
overwrite.alert({
content: '弹框对话框，参数配置详见文档说明',
cancelText: '取消',
bindconfirm: function() {
console.log('确定');
},
bindcancel: function() {
console.log('取消');
}
});独立页面组件
独立页面组件其实就是一个完整的页面单元（js、wxml、wxss组成），使用很简单，通过引入相关js方法，调用打开组件即可（可传递callback用于数据交换处理）。--其实现原理是组件提供的js方法将会打开一个新页面（api.Navigate.go），并通过注册事件的形式交互行为数据
[AppleScript] 纯文本查看 复制代码
//index.js
var dirname = 'pages/externalComponent',
overwrite = requi