小程序框架开发笔记-wepy

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平级