3.小程序方法的封装

详情

// 在使用 toast 方法时，可以传入参数，也可以不传入参数
// 如果需要传入参数，要传入对象作为参数
// const toast = (options = {}) => {}

/**
 * @description 消息提示框
 * @param { Object } options 参数和 wx.showToast 参数保持一致
 */
const toast = ({ title = '数据加载中...', icon = 'none', duration = 2000, mask = true } = {}) => {
  // 如果用户传入了对象作为参数
  // 在形参位置通过解构的方式获取用户传入的参数，同时设置默认值

  wx.showToast({
    title,
    icon,
    duration,
    mask
  })
}

/**
 * @description 模态对话框
 * @param { Object } options 参数和 wx.showModal 参数保持一致
 */
const modal = (options = {}) => {
  // 在调用 modal 方法时，可以传递参数，也可以不传递参数
  // 如果不传递参数，默认值就是空对象
  // 如果传递参数，参数需要时一个对象，对象中的属性需要和 wx.showModal 参数保持一致

  // 在方法内部需要通过 Promise 返回用户的操作
  // 如果用户点击了确定，需要通过 resolve 返回 true
  // 如果用户点击了取消，需要通过 resolve 返回 false
  return new Promise((resolve) => {
    // 默认的参数
    const defaultOpt = {
      title: '提示',
      content: '您确定执行该操作吗？',
      confirmColor: '#f3514f'
    }

    // 通过 Object.assign 方法将参数进行合并
    // 需要使用传入的参数覆盖默认的参数
    // 为了不影响默认的参数，需要将合并以后的参数赋值给一个空对象
    const opts = Object.assign({}, defaultOpt, options)

    wx.showModal({
      // 将合并以后的参数通过展开运算符赋值给 wx.showModal 对象
      ...opts,
      complete({ confirm, cancel }) {
        confirm && resolve(true)
        cancel && resolve(false)
      }
    })
  })
}

// 如果有很多 .js 文件，都需要调用 toast 方法
// 每次使用都需要导入 toast，然后进行调用，太麻烦
// 可以将 toast 方法挂载到 wx 全局对象身上
// 如果想挂载到 wx 全局对象上这种写法生效，需要让当前文件执行一次
wx.toast = toast
wx.modal = modal

// 如果其他 .js 文件，需要使用 toast 方法
// 需要先导入 toast ，然后进行调用才可以
export { toast, modal }

解析

这段代码是一个 对 wx.showToast 的二次封装函数，目的是更方便地调用微信小程序的提示框。

我给你按 Java 开发的思路拆解一下（你有后端背景，这样理解更快）。

---

一、整体作用

const toast = ({ title = '数据加载中...', icon = 'none', duration = 2000, mask = true } = {}) => {

👉 定义了一个函数 toast

👉 用来调用 wx.showToast() 显示消息提示框

👉 并且提供了默认参数

---

二、核心知识点

这里有两个重要知识点：

① 参数对象解构 + 默认值

({ title = '数据加载中...', icon = 'none', duration = 2000, mask = true } = {})

这段是 ES6 的 对象解构赋值 + 默认值写法。

等价于下面的传统写法：

const toast = (options) => {
  const title = options.title || '数据加载中...'
  const icon = options.icon || 'none'
  const duration = options.duration || 2000
  const mask = options.mask || true
}

但是原代码写法更优雅。

---

② = {} 的作用（非常重要）

({ ... } = {})

这个 = {} 是给整个参数一个默认值。

为什么需要？

因为如果你这样调用：

toast()

如果没有 = {}，就会报错：

Cannot destructure property 'title' of undefined

所以：

= {}

的作用是：

如果用户没有传参数，默认用空对象 {}，避免报错。

---

三、函数体

wx.showToast({
  title,
  icon,
  duration,
  mask
})

这是 ES6 的 对象属性简写。

等价于：

wx.showToast({
  title: title,
  icon: icon,
  duration: duration,
  mask: mask
})

因为变量名和 key 一样，所以可以省略。

---

四、完整逻辑流程

举例：

情况1：什么都不传

toast()

实际调用：

wx.showToast({
  title: '数据加载中...',
  icon: 'none',
  duration: 2000,
  mask: true
})

---

情况2：只改 title

toast({ title: '保存成功' })

实际调用：

wx.showToast({
  title: '保存成功',
  icon: 'none',
  duration: 2000,
  mask: true
})

---

情况3：全部自定义

toast({
  title: '成功',
  icon: 'success',
  duration: 3000,
  mask: false
})

---

五、和 Java 对比理解

这段代码本质上相当于 Java 里的：

public void toast(String title, String icon, Integer duration, Boolean mask) {
    if (title == null) title = "数据加载中...";
    if (icon == null) icon = "none";
    if (duration == null) duration = 2000;
    if (mask == null) mask = true;
}

只不过 JS 支持：

• 参数默认值
• 对象解构
• 属性简写

所以代码更简洁。

---

六、总结一句话

这段代码是：

对微信小程序 wx.showToast 的一个封装函数，

使用 ES6 对象解构 + 默认值，让调用更简洁、安全、优雅。

---

结构

很好，这个问题问得非常关键 👍
"解构"是 ES6 里非常重要的语法特性。

---

一句话解释

解构（Destructuring）=
把数组或对象里面的值，拆出来，直接赋值给变量。

就像把一个盒子拆开，把里面的东西分别拿出来。

---

一、对象解构（你刚才代码里的那种）

普通写法

const obj = {
  name: 'Tom',
  age: 18
}

const name = obj.name
const age = obj.age

---

解构写法

const { name, age } = obj

等价于：

const name = obj.name
const age = obj.age

这就叫：

对象解构

意思是：

👉 把对象里的字段拆出来

👉 直接赋值给同名变量

---

二、数组解构

普通写法

const arr = [10, 20]

const a = arr[0]
const b = arr[1]

---

解构写法

const [a, b] = arr

等价。

---

三、为什么叫"解构"？

英文是：

Destructuring

意思是：

• structure = 结构
• de-structure = 拆解结构

也就是：

把结构拆开

---

四、解构 + 默认值

const { name = '匿名', age = 0 } = {}

意思是：

如果对象里没有这个字段

就用默认值

---

五、函数参数里的解构（你刚才那个）

const toast = ({ title = '默认标题' } = {}) => {
}

意思是：

1. 参数必须是一个对象
2. 从对象里拿出 title
3. 如果没有 title，用默认值
4. 如果没传参数，用空对象 {}

---

六、用 Java 思维理解

JS 解构 ≈ Java 里手动取字段：

String name = obj.getName();
int age = obj.getAge();

JS 只是帮你省略了：

const { name, age } = obj

---

七、最常见的三种解构场景

1️⃣ API 返回数据

const res = {
  code: 200,
  data: { id: 1 }
}

const { code, data } = res

---

2️⃣ 函数参数

function user({ name, age }) {
}

---

3️⃣ 交换变量（数组解构）

let a = 1
let b = 2

[a, b] = [b, a]

---

八、总结一句话

解构就是：

把对象或数组里的值，拆出来，直接赋值给变量。

---

如果你愿意，我可以给你做一张：

👉 「JS 解构完整知识脑图」

👉 或者做一个 "前端 ES6 必会语法速通表"

你现在已经开始进入前端核心语法区了 👌