有一些常用的东西，如 http 请求、弹窗、错误处理等等，如果在每个页面都引用一遍，会增加不必的代码量，我们可以在 app.js 中对 Page 对象进行简单地封装，从而让 Page 的能力更强

Page封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import $http from './plugins/http.js';

App({
  // 展示成功弹窗（toast）
  showSuccess (title, hideLoading) {
    if (hideLoading) wx.hideLoading();
    wx.showToast({ title, mask: true, duration: 500, icon: 'success' });
  },

  // 展示失败弹窗（modal）
  showError (title, content, hideLoading) {
    if (hideLoading) wx.hideLoading();
    wx.showModal({ title, content, showCancel: false });
  },

  // 增强Page能力，小程序不支持prototype的形式拓展能力
  enhancePage() {
    const oPage = Page;
    Page = config => oPage(Object.assign(config, {
      $http,
      $showSuccess: this.showSuccess,
      $showError: this.showError,
      $showLoading: (title) => wx.showLoading({ mask: true, title: title }),
      $hideLoading: () => wx.hideLoading(),
    }));
  },
  onLaunch() {
    this.enhancePage();
  },

在页面中的应用

1
2
3
4
5
6
7
8
9
Page({
  onLoad() {
    this.$http('/api').then(() => ...)
    this.$showSuccess('请求成功')
    this.$showError('请求失败', '请稍后重试')
    this.$showLoading('数据加载中')
    this.$hideLoading()
  }
})