基础开发

注册小程序

原生的小程序开发使用App() 函数用来注册一个小程序。一个典型的app.js如下：

App({
    // 生命周期函数处理
    onLaunch(){},
    onShow() {},
    // 小程序出错处理
    onError(e) {
        errorHandler(e);
    },
    // 全局数据缓存
    globalData: {
        userInfo: null,
        isGuess: true,
        configs: {}
    },
});

详细的官方链接

如果想更加舒适的开发的话，可以引入@wxa/core来增强小程序，通过wxa.launchApp来注册小程序，你可以获得mixins，plugin等能力。一个典型的app.wxa如下：

<script>
import {App, wxa} from '@wxa/core'

// 使用App装饰器为Main类增加能力
@App
class Main {
    constructor() {
        // 全局数据
        this.globalData = {
            userInfo: null,
            isGuess: true,
            configs: {}
        }
    }
    // 生命周期函数
    onLaunch() {
        // 事件触发
        this.eventbus.emit('app-launch');
    }
    onShow() {}
    // 全局方法
    methods = {
        login() {
            // 调用promisify后的wx.login接口
            this.wxapi.login().then((succ)=>console{.log(succ.code)})
        }
    }
}

// 注册App
wxa.launchApp(Main);
</script>

提示

@App为Main类自动挂载了Storage，Eventbus, Wxapi, Fetch以及Utils函数

注意

@App并没有挂载Router相关的方法

可以看到注册wxa小程序，我们做了三件事

使用@App装饰器
声明一个Main主类
使用wxa.launchApp注册主类

注册页面

原生的小程序开发使用Page() 函数用来注册一个小程序。一个典型的index.js如下：

let instance = {
    data: {},
    // 生命周期函数
    onLoad() {},
    onShow(){},
    // 自定义事件处理函数
    tap(e) {}
    // 设置分享
    onShareAppMessage(){}
};

Page(instance);

详细的官方链接

同样的wxa为页面提供了常用的Page装饰器，用于给页面挂载上非常好用的api，如storage，Router等。

<script>
import {Page, wxa} from '@wxa/core'

// 使用Page装饰器增强页面能力
@Page
class Index {
    constructor() {
        // 初始化处理
        this.data = {

        }
    }
    // 生命周期函数
    onLoad() {}
    onShow() {}
    methods = {
        tap(e) {
            // 处理tap事件
        }
    }
}

// 使用wxa.lauchPage注册页面
wxa.launchPage(Index);
</script>

提示

@App为Main类自动挂载了Storage，Eventbus, Wxapi, Router, Fetch以及Utils函数

注意

@wxa/core1.4版本开始不会将取消页面的自动分享。（之前的设计的确是很糟糕） ~~wxa.launchPage自动为页面打开了分享，如果需要关闭分享需要设置onShareAppMessage=false~~
@wxa/core为每个page提供了一个私有的$go方法，解决微信跳转延迟的引发的多次跳转问题。示例：

<view bindtap="$go" data-path="/pages/index">去首页</view>
<view bindtap="$go" data-path="/pages/activity" data-type="replace">跳转活动页</view>

可以看到注册wxa的小程序页面，我们做了三件事

使用@Page装饰器
声明一个Index页面类
使用wxa.launchPage注册页面类

# 基础开发

# 注册小程序

# 注册页面

基础开发

注册小程序

注册页面