API

wepy.app Class

App 基类,小程序入口。

  1. export class App extends wepy.app {
  2. onLaunch () {
  3. }
  4. }

属性

  • $wxapp:Object: this.$wxapp等同于getApp()
  • $pages:List<Page>: 所有页面列表

    格式如下:

    1. this.$pages = {
    2. './pages/index': IndexPage
    3. }
  • $interceptors:List<Object>:所有拦截器列表

    格式如下:

    1. this.$interceptors = {
    2. 'request': {
    3. config (p) {
    4. return p;
    5. },
    6. success (rst) {
    7. }
    8. }
    9. }

    方法

  • use(middleWare:String|Function):使用中间件。

    当前内置两个中间件:

    • requestfix: 修复小程序请求并发问题。
    • promisify:使用wepy.xxx的方式请求小程序原生API都将Promise化。

      使用方法如下:

      1. this.use('requestfix');
      2. this.use('promisify');
  • intercept(api:String, provider:Object):使用拦截器对原生API请求进行拦截。

    格式如下:

    1. // app.js
    2. constructor () {
    3. super();
    4. this.intercept('request', {
    5. config (p) {
    6. p.timestamp = +new Date();
    7. return p;
    8. },
    9. success (obj) {
    10. console.log('request success');
    11. }
    12. });
    13. }

wepy.component Class

组件基类

属性

  • $name:String: 组件名称。
  • $isComponent:Boolean:是否是组件,如果是页面,此值为false。
  • $wxpage:Object: 小程序原生page。
  • $parent:Page|App:组件的父组件,如果当前是组件是Page对象,那么$parent的值为App对象。
  • $root:Page: 组件所在的Page对象,如果当前组件是Page对象,那么$root的值就是自己本身。
  • $coms:List<Component>:组件的子组件列表。
  • $mixins:Array[Mixin]:组件所注入的Mixin对象。
  • data:Object: 组件需要绑定的数据。
  • methods:List<Function>:组件需要响应的事件列表。
  • props:List<Props>:组件允许传递的props列表。
  • events:List<Function>:组件通信时所需要的事件表现。

方法

  • setData(key:String|Object, [value:Object]):对原有小程序的setData的封装。

    因为WePY的脏查检流程会自动执行setData操作,所以通常情况下不需要使用此方法。

    使用方法如下:

    1. this.setData('list', ['apple', 'pen']);
    2. this.setData({
    3. list: ['apple', 'pen']
    4. });
  • getCurrentPages():相当于全局方法getCurrentPages()

  • $getComponent(com:String):通过组件名称路径查找组件对象。

    使用方法如下:

    1. this.$getComponent('./coma/comb');
    2. this.$getComponent('../comc');
  • $invoke(com:String|Component):调用另一组件的方法。

    优先调用methods中方法,如果方法不存在,则调用组件的自定义方法,调用自定义方法时,不会传递事件$event。

    使用方法如下:

    1. // coma.js
    2. this.$invoke('./ComB', 'func1', 'p1', 'p2');
    3. this.$invoke('./ComB', 'func2', 'p1', 'p2');
    4. // comb.js
    5. export class ComB extends wepy.component {
    6. methods = {
    7. func1 (p1, p2, evt) {}
    8. },
    9. func2 (p1, p2) {}
    10. }
  • $broadcast(eventName:String, [args]):组件发起一个广播事件。

    向所有子组件发起一个广播事件,事件会依次传播直至所有子组件遍历完毕或者事件被手动终止传播。

    使用方法如下:

    1. // page1.js
    2. components = { ComA };
    3. this.$broadcast('broadcast-event', 'p1', 'p2');
    4. // coma.js
    5. events = {
    6. 'broadcast-event': (p1, p2, event) {}
    7. }
  • $emit(eventName:String, [args]):组件发起一个冒泡事件。

    向父组件发起一个冒泡事件,事件会向上冒泡直至Page或者者事件被手动终止传播。

    使用方法如下:

    1. // coma.js
    2. this.$emit('emit-event', 'p1', 'p2');
    3. // page1.js
    4. components = { ComA };
    5. events = {
    6. 'emit-event': (p1, p2, event) => {}
    7. }
  • $apply([func:Function]):组件发起脏检查。

    正常流程下,改变数据后,组件会在流程结束时自动触发脏检查。
    在异步或者回调流程中改变数据时,需要手动调用$apply方法。

    使用方法如下:

    1. this.userName = 'Gcaufy';
    2. this.$apply();
    3. this.$apply(() => {
    4. this.userName = 'Gcaufy';
    5. });
  • $nextTick([func:Function]):组件数据绑定完成后的回调事件,v1.6.1以上可用。

数据绑定后的回调事件,在不传入function时,返回一个promise对象

使用方法如下:

  1. this.userName = 'Gcaufy';
  2. this.$nextTick(function () {
  3. console.log('UI updated');
  4. });

或者:

  1. this.userName = 'Gcaufy';
  2. this.$nextTick().then(function () {
  3. console.log('UI updated');
  4. });

wepy.page Class

页面类,继承自wepy.component,拥有页面所有的属性与方法。

属性

全部属性继承自wepy.component

方法

  • $preload(key:String|Object, [value:Object]):给页面加载preload数据

    加载preload数据后,跳转至另一个页面时,在onLoad方法中可以获取到上个页面的preload数据。

    使用方法如下:

    1. // page1.js
    2. this.$preload('userName', 'Gcaufy');
    3. this.$redirect('./page2');
    4. // page2.js
    5. onLoad (params, data) {
    6. console.log(data.preload.userName);
    7. }
  • $redirect(url:String|Object, [params:Object])wx.redirectTo的封装方法。

    使用方法如下:

    1. this.$redirect('./page2', {a: 1, b: 2});
    2. this.$redirect({
    3. url: './pages?a=1&b=2'
    4. });
  • $navigate(url:String|Object, [params:Object])wx.navigateTo的封装方法

  • $switch(url:String|Object)wx.switchTab的封装方法

wepy.event Class

小程序事件封装类

  1. new wepy.event(name:String, source:Component, type:String)

属性

  • name(String): 事件名称

    当事件为小程序原生事件时,如tapchange等,name值为system
    当事件为用户自定事件或者组件通信事件时,如$emit$broadcast等,name值为自定事件的名称。

  • source(Component):事件来源组件

    无论是小程序原生事件还是自定事件,都会有对应的事件来源组件。

  • type(String): 事件类型

    $emit事件中,type值为emitbindtap事件中,type值为tap

方法

  • $destroy():终止事件传播

    $emit或者$broadcast事件中,调用$destroy事件终止事件的传播。

  • $transfor(wxevent:Object):将内部小程序事件的属性传递到当前事件。

wepy.mixin Class

Mixin基类,用于复用不同组件中的相同功能。

  1. // mymixn.js
  2. export class MyMixin extends wepy.mixin {
  3. // my logic here
  4. }
  5. // mycom.js
  6. import MyMixin from './mymixin';
  7. export class MyCom extends wepy.component {
  8. mixins = [MyMixin];
  9. }