uni-app 轻提示

uni-app 提供了 uni.showToast API 用于轻提示，但其传的参数比较复杂，通过封装来简化参数的传递。

新建 utils/utils.js

/**
 * 项目中会用的一系列的工具方法
 */
uni.utils = {
  /**
   * 用户反馈（轻提示）
   * @param {string} title 提示文字内容
   * @param {string} icon 提示图标类型
   */
  toast(title = '数据加载失败！', icon = 'none') {
    uni.showToast({
      title,
      icon,
      mask: true,
    })
  },
}

这里的方法将来是会被全局引用的，因此在入口 main.js 中导入 utils/utils.js

import { createSSRApp } from 'vue'

import App from './App'
import '@/utils/utils'

export function createApp() {
  const app = createSSRApp(App)
  return {
    app,
  }
}

在入口文件 main.js 中使用条件编译兼容了 Vue2 和 Vue3，由于本项目确定了要使用 Vue3 且会用到组合式 API，因此可以将 Vu2 部分的代码删除掉。

将来就可以任意位置来使用 utils 的封装了，用法如下所示：

<!-- pages/test/index.vue -->
<script setup>
  import { http } from '@/utils/http.js'

  async function onButtonClick() {
    // 1. 普通用法
    const result = await http.request({
      url: '/echo',
      // 省略这里的代码...
    })
		
    // 这是工具方法的用法
    uni.utils.toast('测试轻提示')
  }
</script>