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>