微信小程序封装

消息反馈

在开发过程中需要向用户反馈消息的场景有很多，如检验接口调用的结果，表单验证的提示消息等，为此我们来对API wx.showToast 进行简单的封装，方便开发中调用：

1.1 基础封装

新建 src/utils/utils.js 文件，然后在这里完成具体的封装逻辑：

/**
 * 工具方法
 */
const utils = {
  /**
   * 封装 wx.showToast
   * @param {string} title 消息提示的内容
   */
  toast(title = '数据加载失败...') {
    wx.showToast({
      title,
      mask: true,
      icon: 'none',
    })
  },
}
/**
 * 扩展 wx 全局对象，切记不要与原用 api 重名
 */
wx.utils = utils
/**
 * 模块化导出
 */
export default utils

上述代码中将定义了一个对象 utils，在这个对象下可以扩展开发中经常用到的方法，然后将 utils 挂载到全局对象 wx 上，方便全局调用 uitls 中的方法。

::: tip 提示: 上述代码中 export default utils 的作用是除了通过 wx 全局可引用外，也可以当模块导入使用。 :::

1.2 全局加载

接下来在入口文件 app.js 中加载 uitls/utils 工具库：

- // 加载 utils/uitls.js
+ import './utils/utils'
App({
  globalData: {},
})

最后在页面中调用 wx.utils.toast 进行测试：

Page({
  onLoad() {
    // 不传参的方式
    wx.utils.toast()
    // 传入提示文字
    wx.utils.toast('用户名只能中文字符！')
  },
})

1.3 局部加载

在需要使用 utils 的场景下导入 utils/utils 模块：

// 导入 utils/utils 模块
import uitls from '../../utils/utils'
Page({
  data: {},
  async onLoad() {
    // 不传参的方式
    utils.toast()
    // 传入提示文字
    utils.toast('用户名只能中文字符！')
  },
})

提交代码:# 查看当前被修改的文件
git status
# 暂存文件
git add .
# 提交到本地
git commit -m 'feat(utils): 封装工具方法'v