wepy一个小顺序的组件化开辟框架

Github地点

疾速入门

项目建立与运用

装置wepy

以下装置都经由历程npm装置

装置 wepy 命令行东西。

npm install wepy-cli -g

在开辟目次天生开辟DEMO。

wepy new myproject

开辟及时编译。

wepy build --watch

项目目次构造

dist
node_modules
src
components
com_a.wpy
com_b.wpy
pages
index.wpy
page2.wpy
app.wpy
package.json

开辟运用申明

1. 运用微信开辟者东西新建项目，当地开辟挑选dist目次。

2. 微信开辟者东西 &＃8211;> 项目 &＃8211;> 封闭ES6转ES5。

3. 当地项目根目次运转wepy build --watch，开启及时编译。

代码范例：

1. 变量与要领运用只管运用驼峰式定名，防止运用$开首。
   以$开首的要领或许属性为框架内建要领或许属性，能够被运用，运用前请[参考API文档]()。

2. 进口，页面，组件的定名后缀为.wpy。外链的文件能够是别的后缀。
   请参考wpy文件申明

3. 运用ES6语法开辟。
   框架在ES6下开辟，因而也须要运用ES6开辟小递次，ES6中有大批的语法糖能够让我们的代码越发简约高效。

4. 运用Promise
   框架默许对小递次供应的API全都举行了 Promise 处置惩罚，以至能够直接运用async/await等新特征举行开辟。

重要处理题目：

1. 开辟形式转换

在原有的小递次的开辟形式下举行再次封装，更贴近于现有MVVM框架开辟形式。框架在开辟历程当中参考了一些如今框架的一些特征，而且融入个中，以下是运用wepy前后的代码对照图。

官方DEMO代码：

//index.js
//猎取运用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事宜处置惩罚函数
bindViewTap: function() {
console.log('button clicked')
},
onLoad: function () {
console.log('onLoad')
}
})

基于wepy的完成：

import wepy from 'wepy';
export default class Index extends wepy.page {
data = {
motto: 'Hello World',
userInfo: {}
};
methods = {
bindViewTap () {
console.log('button clicked');
}
};
onLoad() {
console.log('onLoad');
};
}

2. 支撑组件化开辟。

拜见章节：组件
示例代码：

// index.wpy



3. 支撑加载外部NPM包。

在编译历程当中，会递归遍历代码中的require然后将对应依靠文件从node_modules当中拷贝出来，而且修正require为相对途径，从而完成对外部NPM包的支撑。以下图：

4. 单文件形式，使得目次构造越发清楚。

官方目次构造要求app必需有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。而且文件必需同名。
所以运用wepy开辟前后开辟目次对照以下：
官方DEMO：

project
pages
index
index.json
index.js
index.wxml
index.wxss
log
log.json
log.wxml
log.js
log.wxss
app.js
app.json
app.wxss

运用wepy框架后目次构造：

project
src
pages
index.wpy
log.wpy
app.wpy

5. 默许运用babel编译，支撑ES6/7的一些新特征。

用户能够经由历程修正.wepyrc设置文件，设置自身熟习的babel环境举行开辟。默许开启运用了一些新的特征如promise，async/await等等。

示例代码：

import wepy from 'wepy';
export default class Index extends wepy.page {
getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({data: 123});
}, 3000);
});
};
async onLoad() {
let data = await this.getData();
console.log(data.data);
};
}

6. 针对原生API举行优化。

对如今API举行promise处置惩罚，同时修复一些现有API的缺点，比方：wx.request并发题目等。
原有代码：

OnLoad= function () {
var self = this;
wx.login({
success: function (data) {
wx.getUserInfo({
success: function (userinfo) {
self.setData({userInfo: userinfo});
}
});
}
});
}

基于wepy完成代码：

async onLoad() {
await wx.login();
this.userInfo = await wx.getUserInfo();
}

在同时并发10个request要求测试时：
不运用wepy:

运用wepy后：

进阶申明

.wepyrc 设置文件申明

实行wepy new demo后，会天生相似设置文件。

{
"wpyExt": ".wpy",
"sass": {},
"less": {},
"babel": {}
}

wpyExt：缺省值为&＃8217;.wpy&＃8217;，IDE默许情况下不会对此文件范例高亮，此时能够修正一切文件为.vue后缀(由于与vue高亮划定规矩一样)，然后将此选项修正为.vue，就可以处理部份IDE代码高亮题目。

sass：sass编译设置，拜见这里。

less：less编译设置，拜见这里。

babel：babel编译设置，拜见这里。

wpy文件申明

wpy文件的编译历程过下：

一个.wpy文件分为三个部份：

1. 款式对应原有wxss。

2. 模板对应原有wxml。

3. 代码对应原有js。

个中进口文件app.wpy不须要template，所以编译时会被疏忽。这三个标签都支撑type和src属性，type决议了其代码编译历程，src决议是不是外联代码，存在src属性且有用时，疏忽内联代码，示例以下：

标签对应 type 值以下表所示：

script申明

递次进口app.wpy

进口app.wpy继续自wepy.app，包含一个config属性和其全局属性、要领、事宜。个中config属性对应原有的app.json，编译时会依据config天生app.json文件，假如须要修正config中的内容，请运用体系供应API。

页面index.wpy

页面进口继续自wepy.page，重要属性申明以下：

组件com.wpy

页面进口继续自wepy.component，属性与页面属性一样，除了不须要config以及页面特有的一些小递次事宜等等。

组件

小递次支撑js模块化援用，也支撑wxml模板，但相互自力，营业代码与交互事宜仍需在页面处置惩罚。没法完成组件化的松耦合与复用的结果。
比方模板A中绑定一个bindtap="myclick"，模板B中一样绑定一样bindtap="myclick"，那末就会影响统一个页面事宜。关于数据一样云云。因而只要经由历程转变变量或许事宜要领，或许给其加差别前缀才完成绑定差别事宜或许差别数据。当页面庞杂以后就非常不利于开辟保护。
因而wepy让小递次支撑组件化开辟，组件的一切营业与功能在组件自身完成，组件与组件之间相互断绝，上述例子在wepy的组件化开辟历程当中，A组件只会影响到A绑定的myclick，B也云云。

组件援用

当页面或许组件须要引入子组件时，须要在页面或许script中的components给组件分派唯一id，而且在template中增加标签，如index.wpy。

页面和组件都能够引入子组件，引入多少组件后，以下图：

Index页面引入A，B，C三个组件，同时组件A和B又有自身的子组件D，E，F，G，H。

组件通讯与交互

wepy.component基类供应三个要领$broadcast，$emit，$invoke，因而任一页面或任一组件都能够挪用上述三种要领完成通讯与交互，如：

$this.$emit('some-event', 1, 2, 3, 4);

组件的事宜监听须要写在events属性下，如：

import wepy form 'wepy';
export default class Com extends wepy.component {
compOnents= {};
data = {};
methods = {};
events = {
'some-event': ($event, ...args) {
console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
}
};
// Other properties
}

1. $broadcast
   $broadcast事宜是由父组件提议，一切子组件都邑收到此播送事宜，除非事宜被手动作废。事宜播送的递次为广度优先搜刮递次，如上图，假如Page_Index提议一个$broadcast事宜，那末吸收到事宜的先后递次为：A, B, C, D, E, F, G, H。以下图：

1. $emit
   $emit与$broadcast恰好相反，事宜提议组件的父组件会顺次吸收到$emit事宜，如上图，假如E提议一个$emit事宜，那末吸收到事宜的先后递次为：A, Page_Index。以下图：

1. $invoke
   $invoke是一个组件对另一个组件的直接挪用，经由历程传入的组件途径找到响应组件，然后再挪用其要领。

假如想在Page_Index中挪用组件A的某个要领：

this.$invoke('ComA', 'someMethod', 'someArgs');

假如想在组件A中挪用组件G的某个要领：

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

数据绑定

小递次数据绑定体式格局

小递次经由历程Page供应的setData要领去绑定数据，如：

this.setData({title: 'this is title'});

由于小递次架构自身缘由，页面衬着层和JS逻辑层离开的，setData操纵现实就是JS逻辑层与页面衬着层之间的通讯，那末假如在统一次运转周期内屡次实行setData操纵时，那末通讯的次数是一次照样屡次呢？这个取决于API自身的设想。

wepy数据绑定体式格局

wepy运用脏数据检核对setData举行封装，在函数运转周期结束时实行脏数据搜检，一来能够不必体贴页面屡次setData是不是会有性能上的题目，二来能够越发简约去修正数据完成绑定，不必反复去写setData要领。代码以下：

this.title = 'this is title';

但需注意，在函数运转周期以外的函数里去修正数据须要手动挪用$apply要领。如：

setTimeout(() => {
this.title = 'this is title';
this.$apply();
}, 3000);

wepy脏数据搜检流程

在实行脏数据搜检是，会经由历程this.$$phase标识当前搜检状况，而且会保证在并发的流程当中，只会有一个脏数据搜检流程在运转，以下是实行脏数据搜检的流程图：

别的优化细节

1. wx.request 吸收参数修正

点这里检察官方文档

// 官方
wx.request({
url: 'xxx',
success: function (data) {
console.log(data);
}
});
// wepy 运用体式格局
// request 接口从只吸收Object变成可吸收String
wx.request('xxxx').then((d) => console.log(d));

2. 优化事宜参数通报

点这里检察官方文档

// 官方
Click me!
Page({
tapName: function(event) {
console.log(event.currentTarget.hi)// output: WeChat
}
});
// wepy 发起传参体式格局
Click me!
events: {
tapName (event, id, title, other) {
console.log(id, title, other)// output: 1, wepy, something
}
}

3. 转变数据绑定体式格局

保存setData要领，但不发起运用setData实行绑定，修复传入undefined的bug，而且修正入参支撑：
this.setData(target, value)
this.setData(object)

点这里检察官方文档

// 官方
{{ message }}
onLoad: function () {
this.setData({message: 'hello world'});
}
// wepy
{{ message }}
onLoad () {
this.message = 'hello world';
}

4. 组件替代模板和模块

点这里检察官方文档

// 官方