WePY
一、前置
本地使用版本V1.7.3
最新版本V2.x
二、使用
export class App extends wepy.app {} 小程序入口,App基类
wepy.page注册页面
wepy.component注册组件
wepy.app 入口
方法:use(‘使用中间件’)
this.use('requestfix'); //'requestfix':修复小程序请求并发问题
this.use('promisify'); //'promisify':使用wepy.xxx的方式请求小程序原生API都将Promise化
属性 $wxapp:Object: this.$wxapp 等同于getApp()
wepy.component 组件
import wepy from 'wepy' // 引入wepy export default class Message extends wepy.component {
// 创建组件实例 props = { /* 接收参数 */ } onShow(){ /* 无用 */ } }
组件
this.$invoke('./ComB', 'func1', 'p1', 'p2'); //调用另一组件的方法 this.$emit() //组件发起一个冒泡事件 $nextTick([func:Function]):
组件数据绑定完成后的回调事件;在不传入function时,返回一个promise对象
this.$nextTick().then()
wepy.page 页面
this.$parent this.$broadcast('isFixed') //广播事件,通知子组件执行isFixed方法 this.$apply() //wepy 在异步函数中更新数据的时候,必须手动调用$apply方法,才会触发脏数据检查流程的运行
*在 $emit 或者 $broadcast 事件中,调用 $destroy 事件终止事件的传播。
三、备注:
1、this.$apply()使用场景:(wepy1.x中method中方法不需要,自定义方法、onshow()中需要)
1.1异步更新数据
1.2.手动刷新DOM
1.3.子组件的onload周期使用
2、wepy1使用脏检查进行数据绑定,wepy2使用vue Observer实现数据绑定,不用$apply();
四、记录
1、Wepy中ES6使用
wepy 中使用async/await , 需要npm安装'wepy-async-function',npm install wepy-async-function –save
在app.wpy文件里引入 import 'wepy-async-function'
async函数是异步操作
采用promise封装异步请求的API,可以return new Promise
return new Promise(function(resolve,reject){}).then()
2、Page实例继承Component,即Page也是组件
onShow () {} // 只在Page中存在的页面生命周期函数
onLoad () {} // 在Page和Component共用的生命周期函数
3、自定义方法位置(重要)
通自定义方法在methods对象外声明,与methods平级