微信小程序wepy框架笔记小结(4)

对于组件data数据,components组件,events事件以及其它自定义方法采用默认式混合,即如果组件未声明该数据,组件,事件,自定义方法等,那么将混合对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。

// mixins/test.js import wepy from 'wepy'; export default class TestMixin extends wepy.mixin { data = { foo: 'foo defined by page', bar: 'bar defined by testMix' }; methods: { tap () { console.log('mix tap'); } } } // pages/index.wpy import wepy from 'wepy'; import TestMixin from './mixins/test'; export default class Index extends wepy.page { data = { foo: 'foo defined by index' }; mixins = [TestMixin ]; onShow() { console.log(this.foo); // foo defined by index. console.log(this.bar); // foo defined by testMix. } }

兼容式混合

对于组件methods响应事件,以及小程序页面事件将采用兼容式混合,即先响应组件本身响应事件,然后再响应混合对象中响应事件。

// mixins/test.js import wepy from 'wepy'; export default class TestMixin extends wepy.mixin { methods = { tap () { console.log('mix tap'); } }; onShow() { console.log('mix onshow'); } } // pages/index.wpy import wepy from 'wepy'; import TestMixin from './mixins/test'; export default class Index extends wepy.page { mixins = [TestMixin]; methods = { tap () { console.log('index tap'); } }; onShow() { console.log('index onshow'); } } // index onshow // mix onshow // ----- when tap // index tap // mix tap

拦截器

可以使用全域拦截器配置API的config、fail、success、complete方法,参考示例:

import wepy from 'wepy'; export default class extends wepy.app { constructor () { this.intercept('request', { config (p) { p.timestamp = +new Date(); return p; }, success (p) { console.log('request success'); return p; }, fail (p) { console.log('request error'); return p; } }); } }

WePY数据绑定方式

WePY使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写setData方法。

this.title = 'this is title';

在函数运行周期之外的函数里去修改数据需要手动调用$apply方法

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

优化事件参数传递

// 官方 <view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view> Page({ tapName: function(event) { console.log(event.currentTarget.dataset.id)// output: 1 console.log(event.currentTarget.dataset.title)// output: wepy console.log(event.currentTarget.dataset.other)// output: otherparams } }); // WePY 1.1.8以后的版本,只允许传string。 <view bindtap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view> methods: { tapName (id, title, other, event) { console.log(id, title, other)// output: 1, wepy, otherparams } }

改变数据绑定方式

保留setData方法,但不建议使用setData执行绑定,修复传入undefined的bug,并且修改入参支持: this.setData(target, value) this.setData(object)

// 官方 <view> {{ message }} </view> onLoad: function () { this.setData({message: 'hello world'}); } // WePY <view> {{ message }} </view> onLoad () { this.message = 'hello world'; }

重要提醒

使用微信开发者工具–>添加项目,项目目录请选择dist目录。

微信开发者工具–>项目–>关闭ES6转ES5。 重要:漏掉此项会运行报错。

微信开发者工具–>项目–>关闭上传代码时样式自动补全。 重要:某些情况下漏掉此项也会运行报错。

微信开发者工具–>项目–>关闭代码压缩上传。 重要:开启后,会导致真机computed, props.sync 等等属性失效。(注:压缩功能可使用WePY提供的build指令代替,详见后文相关介绍以及Demo项目根目录中的wepy.config.js和package.json文件。)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8a64423c4178929c1e7bb56379c44390.html