基础开发

注册小程序

原生示例

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

  1. App({
  2.     // 生命周期函数处理
  3.     onLaunch(){},
  4.     onShow() {},
  5.     // 小程序出错处理
  6.     onError(e) {
  7.         errorHandler(e);
  8.     },
  9.     // 全局数据缓存
  10.     globalData: {
  11.         userInfo: null,
  12.         isGuess: true,
  13.         configs: {}
  14.     },
  15. });

详细的官方链接基础开发 - 图1

wxa示例

使用wxa2，开发者无需手动注册App，直接export一个默认实例即可：

  1. import {App} from '@wxa/core';
  3. // 使用App装饰器为Main类增加能力
  4. @App
  5. export default class Main {
  6.     globalData = {
  7.         userInfo: null,
  8.         isGuess: true,
  9.         configs: {}
  10.     }
  11.     // 生命周期函数
  12.     onLaunch() {
  13.         // 事件触发
  14.         this.eventbus.emit('app-launch');
  15.     }
  16.     // 全局方法
  17.     async login() {
  18.         // 调用promisify后的wx.login接口
  19.         let succ = await this.$wxapi.login();
  21.         return succ;
  22.     }
  23. }

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

  1. 使用@App装饰器
  2. 导出并声明一个Main主类

App装饰器并不是必须的，如果觉得项目中并不需要用到那么多功能，可以按需使用对应的Decorators。

最后，wxa会自动将导出主类实例化后调用App注册小程序。

提示

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

注意

@App虽然挂载了Router方法，但是请勿在小程序onLaunch之前调用。

注册页面

原生示例

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

  1. let instance = {
  2.     data: {},
  3.     // 生命周期函数
  4.     onLoad() {},
  5.     onShow(){},
  6.     // 自定义事件处理函数
  7.     tap(e) {}
  8.     // 设置分享
  9.     onShareAppMessage(){}
  10. };
  12. Page(instance);

详细的官方链接基础开发 - 图2

wxa示例

在wxa2开发者无需手动注册Page，直接export一个默认实例即可：

  1. import {Page} from '@wxa/core';
  3. // 使用Page装饰器自动挂载class装饰器。
  4. @Page
  5. export default class Index {
  6.     // 页面数据
  7.     data = {}
  8.     // 生命周期函数
  9.     onLoad() {}
  10.     onShow() {}
  11.     // 回调处理函数
  12.     tap(e) {}
  13. }

提示

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

@wxa/core为每个页面实例注入了$go方法，解决微信跳转延迟的引发的多次跳转问题，在重构阶段可以快速开发页面。

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

  1. 使用@Page装饰器
  2. 声明并导出一个Index页面类

同样的这处的Page装饰器也不是必须的，开发者可以根据实际需要引入指定的装饰器即可。

wxa将会自动将导出的Index类实例化后调用Page注册页面。