uni-app+vue3 封装全局函数(详细完整的方法)

在uni-app和vue3中,我们可以封装全局函数来复用代码。以下是详细的步骤:

  1. 首先,我们需要在main.js文件中引入我们封装的全局函数。这样我们就可以在整个项目中使用这些函数。

    复制代码
     import globalFunctions from './globalFunctions'
     Vue.prototype.$globalFunctions = globalFunctions
  2. 然后,我们在globalFunctions.js文件中定义我们的全局函数。例如,我们可以定义一个打印日志的函数和一个发送网络请求的函数。

    复制代码
     // 打印日志的函数
     export function log(message) {
         console.log(message)
     }
     
     // 发送网络请求的函数
     export function request(url, method = 'GET', data = {}) {
         return new Promise((resolve, reject) => {
             uni.request({
                 url: url,
                 method: method,
                 data: data,
                 success: (res) => {
                     resolve(res)
                 },
                 fail: (err) => {
                     reject(err)
                 }
             })
         })
     }
  3. 最后,我们可以在我们的组件中使用这些全局函数。例如,我们可以在methods对象中定义一个使用这些函数的方法。

    复制代码
     export default {
         methods: {
             test() {
                 // 使用全局函数打印日志
                 this.$globalFunctions.log('Hello, World!')
                 // 使用全局函数发送网络请求
                 this.$globalFunctions.request('/api/data').then(res => {
                     console.log(res)
                 }).catch(err => {
                     console.error(err)
                 })
             }
         }
     }

以上就是在uni-app和vue3中封装全局函数的详细完整的方法。

相关推荐
梦帮科技1 小时前
GRAVIS v4.0:基于Web的极速套利架构设计与实时数据流实现
前端·人工智能·rust·自动化·区块链·智能合约·数字货币
爱勇宝2 小时前
办公资料反复修改、补传、交接混乱,我做了个桌面工具来解决这件事
前端·后端·程序员
微信开发api-视频号协议2 小时前
企业微信外部群开发自动化实践过程
java·前端·微信·自动化·企业微信·ipad
甲维斯3 小时前
Fable5:20美金的顶级设计师!
前端·人工智能
kyriewen3 小时前
我同时用了 Claude Code、Cursor 和 Codex,说说三个工具的真实差距——2026 年选错工具比不用 AI 更浪费时间
前端·ai编程·claude
CHB3 小时前
uni-app x 蒸汽模式 iOS版 性能测试基准报告 Benchmark
ios·uni-app·swiftui
Jackson__3 小时前
为了拯救我的腰椎和颈椎,我做了款浏览器插件!
前端·javascript·开源
衍生星球3 小时前
SpringBoot3 + Vue3 + 微信小程序如何学习,以及学哪些技术,组件
sql·微信小程序·uni-app·vue·springboot
闲猫3 小时前
Python FastAPI + SQLAlchemy 入门教程:从零搭建你的第一个 Web 应用
前端·python·fastapi
林小帅4 小时前
NestJS v11 + Prisma v7 ESM 迁移配置解析
前端·javascript·后端