微信小程序 --- 通用模块封装（showToast，showModal ，本地存储）

目录

01. 为什么进行模块封装

02. 消息提示模块封装

03. 模态对话框封装

04. 封装本地存储 API

05. 拓展:封装异步存储API+优化代码

---

01. 为什么进行模块封装

在进行项目开发的时候，我们经常的会频繁的使用到一些 API，

例如：wx.showToast() 、wx.showModal()等消息提示 API ，这些 API 的使用方法如下:

wx.showToast({
  title: '消息提示框', // 提示的内容
  icon: 'success',   // 提示图标
  duration: 2000,	 // 提示的延迟时间
  mask: true		 // 是否显示透明蒙层，防止触摸穿透
})

wx.showModal({
  title: '提示', // 提示的标题
  content: '您确定执行该操作吗？', // 提示的内容
  confirmColor: '#f3514f', // 确定按钮的样式
  // 接口调用结束的回调函数（调用成功、失败都会执行）
  complete({ confirm, cancel }) {
    if (confirm) {
      console.log('用户点击了确定')
      return
    }

    if (cancel) {
      console.log('用户点击了取消')
    }
  }
})

如果每次使用的时候，都直接调用这些 API，会导致代码很冗余，为了减少了代码冗余，我们需要将这些 API 封装成公共方法，封装后的使用方式如下：

// wx.showToast() 封装后的调用方式
toast()
toast({ title: '数据加载失败....', mask: true })

// wx.showModal() 封装后的调用方式
const res = await modal({
  title: '提示',
  content: '鉴权失败，请重新登录 ？'
})

// 用户点击了确定
if (res) { ... } else { ... }

可以看到封装后方法，极大简化 API 的调用，

同时，我们在后续还会进行网络通用模块的封装，如果直接进行封装难度比较大，

进行通过模块的封装，也是为后续 [网络请求封装] 做铺垫。

02. 消息提示模块封装

基本使用：

wx.showToast() 消息提示框是在项目中频繁使用的一个小程序 API，常用来给用户进行消息提示反馈。使用方式如下：

wx.showToast({
  title: '消息提示框', // 提示的内容
  icon: 'success',   // 提示的图标，success(成功)、error(失败)、loading(加载)、none(不显示图标)
  duration: 2000,	 // 提示的延迟时间
  mask: true		 // 是否显示透明蒙层，防止触摸穿透
})

封装思路：

1. 创建一个 toast 方法对 wx.showToast() 方法进行封装

2. 调用该方法时，传递对象作为参数

   • 如果没有传递任何参数，设置一个空对象 {} 作为默认参数

   • 从对象中包含 title、icon、duration、mask 参数，并给参数设置默认值

3. 在需要显示弹出框的时候调用 toast 方法，并传入相关的参数，有两种参数方式：

   • 不传递参数，使用默认参值
   • 传入部分