|
????仔细研究了下wepy和原生小程序的区别，总结了一下几点：
wepy支持组件化开发
import List from '../components/list';
//声明页面中将要使用到的组件
components = {
panel: Panel,counter1: Counter,counter2: Counter,list: List
};
//可用于页面模板中绑定的数据
data = {
items: [1,2,3,4]
}
- 原生小程序中要求app实例必须有三个文件：js 、json、wxss，而page一般有四个文件：js、json、wxml、wxss，同时还要求page下各个文件的名字必须相同。而wepy采用单文件的模式，使得项目目录一目了然。
- wepy对原生API进行优化：对原生API进行promise处理，如
原生：
onLoad = function () {
var self = this;
wx.login({
success: function (data) {
wx.getUserInfo({
success: function (userinfo) {
self.setData({userInfo: userinfo});
}
});
}
});
}
wepy：
import wepy from 'wepy';
async onLoad() {
await wepy.login();
this.userInfo = await wepy.getUserInfo();
}
组件循环：
使用的是的for属性，而不是wx:for
porps传参：
- 静态传参：使用属性名进行传参
- 动态传参：动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用
.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。
data = {
parentTitle: 'p-title'
};
// child.wpy
props = {
// 静态传值
title: String,// 父向子单向动态传值
syncTitle: {
type: String,default: 'null'
},twoWayTitle: {
type: String,default: 'nothing',twoWay: true
}
};
onLoad () {
this.title = 'c-title';
console.log(this.$parent.parentTitle); // p-title.
this.twoWayTitle = 'two-way-title';
this.$apply();
console.log(this.$parent.parentTitle); // two-way-title. --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
this.$parent.parentTitle = 'p-title-changed';
this.$parent.$apply();
console.log(this.title); // 'c-title';
console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}
组件通信：
????wepy.Component基类提供了一下三种组件通信方式：$broadcast、$emit、$invoke
????用于监听组件之间的通信与交互事件的事件处理函数需要写在组件和页面的events对象中。
-
$broadcast：该事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序。
-
$emit：与$broadcast正好相反，事件发起组件的所有祖先组件会依次接收到$emit事件。
-
$invoke：是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。如：this.$invoke('ComA','someMethod','someArgs');
组件自定义事件：
????可以通过使用.user修饰符为自定义组件绑定事件，如：@customEvent.user=“myFn”
其中，@表示事件修饰符，customEvent 表示事件名称，.user表示事件后缀。
目前总共有三种事件后缀：
- .default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；
- .stop: 绑定小程序捕获型事件，如catchtap；
- .user: 绑定用户自定义组件事件，通过$emit触发。注意，如果用了自定义事件，则events中对应的监听函数不会再执行。
// index.wpy
// child.wpy
数据绑定
WePY使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查，一来可以不用关心页面多次setData是否会有性能上的问题，二来可以更加简洁去修改数据实现绑定，不用重复去写setData方法。
需注意的是，在异步函数中更新数据的时候，必须手动调用$apply方法，才会触发脏数据检查流程的运行
wepy脏数据检查流程
在执行脏数据检查时，会通过this.$$phase标识当前检查状态，并且会保证在并发的流程当中，只会有一个脏数据检查流程在运行，以下是执行脏数据检查的流程图： 
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
