I 、.wpy文件说明
II、实例
- 在 WePY 中，小程序被分为三个实例：小程序实例App、页面实例Page、组件实例Component。其中Page实例继承自Component
App实例
- 通过
this.$parent来获取App实例this.$parent.checkReg(async () => {
Page页面实例和Component组件实例
Page也是组件,除扩展了页面所特有的config配置以及特有的页面生命周期函数之外，其它属性和方法与Component一致
WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例
III、computed 计算属性
- 类型:
{ [key: string]: Function }可直接被当作绑定数据来使用，类似于data属性。// 计算属性aPlus，在脚本中可通过this.aPlus来引用，在模板中可通过来插值 computed = { aPlus () { return this.a + 1 } }
IV、 props 传值
- props传值在WePY中属于父子组件之间传值的一种机制，包括静态传值与动态传值。
props = { // 静态传值 title: String, // 父向子单向动态传值 syncTitle: { type: String, default: 'null' }, twoWayTitle: { type: Number, default: 'nothing', twoWay: true } };
V、 组件通信与交互
wepy.component基类提供$broadcast、$emit、$invoke三个方法用于组件之间的通信和交互
$emit
- 子组件：事件发起组件的所有祖先组件会依次接收到
$emit事件
this.$emit('some-event', 1, 2, 3, 4);
this.$emit('answer-event', 1)// 触发条件：答对了
- 祖先组件: 事件处理函数需要写在组件和页面的
events对象
events = {
'some-event': (p1, p2, p3, $event) => {
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
}
'answer-event': knanswer => {
if (knanswer === 1) {
// 处理答对的情况
} else {
// 处理失败的情况
this.$apply()
}
}
};
$broadcast
$broadcast事件是由父组件发起，所有子组件都会收到此广播事件
子组件：
'helpTips': () => {
//处理分享之后的View渲染
}
父组件: 分享回调的处理
this.$broadcast('helpTips')
$invoke
$invoke是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。
- 想在页面Page_Index中调用组件ComA的某个方法：
this.$invoke('ComA', 'someMethod', 'someArgs'); 如果想在组件ComA中调用组件ComG的某个方法：this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
VI、 WePY数据绑定方式
在异步函数中更新数据的时候，必须手动调用$apply方法，才会触发脏数据检查流程的运行
See Also
/Users/devzkn/bin/knpost wepy_Advanced wepy进阶介 -t miniprogram #原来""的参数，需要自己加上""
转载请注明：张坤楠的博客 > wepy_Advanced
