首页uniapp vue3 ts全局封装方法

uniapp vue3 ts全局封装方法

时间: 2024-12-14 21:15:38 浏览: 83

UniApp是一个基于Vue.js的跨平台框架，它允许开发者编写一次代码，可以在微信小程序、H5、App等多个平台上运行。在Vue 3中结合TypeScript使用，我们可以创建一些全局封装方法来提高代码复用性和模块化。首先，你需要设置一个`utils.ts`或者类似的文件作为你的全局工具库，里面可以包含各种通用函数： ```typescript // utils.ts import { App } from 'uni-app' export function showToast(message: string) { // 使用uni.showToast方法展示消息 App showToast({ message, duration: 2000 }) } // 其他封装方法... export function fetchData(url: string): Promise<any> { return new Promise((resolve, reject) => { // 这里模拟网络请求，实际应用中替换为axios或其他http客户端 setTimeout(() => resolve({ data: '获取数据成功' }), 2000) }) } ``` 然后，在需要使用这些方法的地方导入并调用它们： ```vue <script lang="ts"> import { showToast, fetchData } from '@/utils' export default { methods: { async getData() { try { const response = await fetchData('https://example.com/api') console.log(response.data) showToast('数据加载完成') } catch (error) { showToast('加载数据失败') } } } } </script> ```

阅读全文