实例

通过前文的介绍可知，在 WePY 中，小程序被分为三个实例：小程序实例App、页面实例Page、组件实例Component。其中Page实例继承自Component。各自的声明方式如下：

import wepy from 'wepy';
// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
}
// 声明一个Page页面实例
export default class IndexPage extends wepy.page {
}
// 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}

App小程序实例

App小程序实例中主要包含小程序生命周期函数、config配置对象、globalData全局数据对象，以及其他自定义方法与属性。

import wepy from 'wepy';
export default class MyAPP extends wepy.app {
    customData = {};
    customFunction ()　{ }
    onLaunch () {}
    onShow () {}
    config = {}  // 对应 app.json 文件
    globalData = {}
}

在Page页面实例中，可以通过this.$parent来访问App实例。

Page页面实例和Component组件实例

由于Page页面实际上继承自Component组件，即Page也是组件。除扩展了页面所特有的config配置以及特有的页面生命周期函数之外，其它属性和方法与Component一致，因此这里以Page页面为例进行介绍。

import wepy from 'wepy';
export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
    customData = {}  // 自定义数据
    customFunction ()　{}  //自定义方法
    onLoad () {}  // 在Page和Component共用的生命周期函数
    onShow () {}  // 只在Page中存在的页面生命周期函数
    config = {};  // 只在Page实例中存在的配置数据，对应于原生的page.json文件
    data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定
    components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件
    mixins = [];  // 声明页面所引用的Mixin实例
    computed = {};  // 声明计算属性（详见后文介绍）
    watch = {};  // 声明数据watcher（详见后文介绍）
    methods = {};  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
    events = {};  // 声明组件之间的事件处理函数
}

注意，对于WePY中的methods属性，因为与Vue中的使用习惯不一致，非常容易造成误解，这里需要特别强调一下：WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致的。示例如下：

// 错误示例
import wepy from 'wepy';
export default class MyComponent extends wepy.component {
    methods = {
        bindtap () {
            let rst = this.commonFunc();
            // doSomething
        },
        bindinput () {
            let rst = this.commonFunc();
            // doSomething
        },
        //错误：普通自定义方法不能放在methods对象中
        customFunction () {
            return 'sth.';
        }
    };
}
// 正确示例
import wepy from 'wepy';
export default class MyComponent extends wepy.component {
    methods = {
        bindtap () {
            let rst = this.commonFunc();
            // doSomething
        },
        bindinput () {
            let rst = this.commonFunc();
            // doSomething
        },
    }
    //正确：普通自定义方法在methods对象外声明，与methods平级
    customFunction () {
        return 'sth.';
    }
}