1.wepy组件的编译
wepy中使用一个组件时候，需要先引用(import)。再在需要使用该组件的页面（或组件）中声明。例如：
import Counter from '/path/to/Counter';
components = {
counter1: Counter,
counter2: Counter
}引入一个组件要出现在多处分别使用时，需要为组件分配不同的id，此处分别为counter1,counter2。
如果Counter组件模板
<view>{{counter}}</view>则编译后的counter1内容在其引用的页面中的样子为：
<view>{{$counter1$counter}}</view>编译后的counter2内容为
<view>{{$counter2$counter}}</view>2.wepy组件中的setData
wepy通过在函数运行周期结束时候，进行脏值检查，以便使用者可以不用手动setData更新视图。
但是在组件中，由于组件被编译成了$prefix$value的形式，即组件中定义的data，无法直接通过this.setData({key:value})形式去更新。
如果需要手动调用this.setData({key: value});需要这样使用-> this.setData({this.$prefix+key: value});
用上面的Counter组件为例：
export default class Counter extends wepy.component {
data = {
counter: 1
}
onload() {
// 正确
this.setData({this.prefix+'counter': 2});
this.data = 2; //setData 完要记得更新counter中的值。
// 错误
this.setData({counter: 2});
}
}应用场景：脏值检查时候由于值未更新，所以不会自动触发setData去更新（脏值检查会在合适时触发setData）。有时候需要特殊的效果
比如focus文本框，此时文本框已经失去了焦点，但是控制文本框焦点的变量值仍为true。此时想要让文本框再次获得焦点，setData一下。
3.wepy对于wx.xxx一系列的promise化
// 原生代码:
wx.request({
url: 'xxx',
success: function (data) {
console.log(data);
}
}); // WePY 使用方式
wepy.request('xxxx').then((d) => console.log(d));
原生代码中需要将成功回调作为参数传入request，wepy中可以通过promise的用法使用。
其中核心的代码如下：
其中obj为传入函数的参数。
翻译一下这段代码就是：
var wx = {
getStorage: function(config) {
// 如果异步事情搞定：
if(ok) {
config.success(res);
} else {
config.error({err:'错误'});
}
}
}
//使用
wx.getStorage({
success: (res)=> {},
error: (err) => {}
});
// promisify
Object.defineProperties(wx, 'getStorage', {
get() {
// get函数，则返回函数
// obj为传入函数的参数
return (obj) => {
obj = obj || {};
var p = new Promise((okFn, errFn) => {
const oldHandler = {};
oldHandler['success'] = obj.success;
oldHandler['failed'] = obj.failed;
// 成功的话，resolve这个promise。
obj.success = (res) => {
okFn(res);
}
// 失败的话reject这个promise。
obj.error = (err) => {
errFn(err);
};
// 调用这个函数
wx.getStorage(obj);
});
// 返回这个promise
return p;
}
}
})4.wepy对请求队列的优化
原生的小程序对并发的请求有最大个数限制是10个。也就是说一次发送11个请求就会报错。
wepy对其进行了优化，其核心代码如下：
import native from './native';
let RequestMQ = {
map: {},
mq: [],
running: [],
MAX_REQUEST: 5,
push (param) {
param.t = +new Date();
while ((this.mq.indexOf(param.t) > -1 || this.running.indexOf(param.t) > -1)) {
param.t += Math.random() * 10 >> 0;
}
this.mq.push(param.t);
this.map[param.t] = param;
},
next () {
let me = this;
if (this.mq.length === 0)
return;
if (this.running.length < this.MAX_REQUEST - 1) {
let newone = this.mq.shift();
let obj = this.map[newone];
let oldComplete = obj.complete;
obj.complete = (...args) => {
me.running.splice(me.running.indexOf(obj.t), 1);
delete me.map[obj.t];
oldComplete && oldComplete.apply(obj, args);
me.next();
}
this.running.push(obj.t);
return wx.request(obj);
}
},
request (obj) {
obj = obj || {};
obj = (typeof(obj) === 'string') ? {url: obj} : obj;
this.push(obj);
return this.next();
}
};核心思想为，维护一个等待队列和一个执行中队列。如果有请求过来，先放到等待队列，然后判断执行队列中任务数是否达到最大，未达到最大则从等待队列取出任务放到执行队列执行。一旦执行队列有任务执行完成。则进行新一轮的检查\执行。