uniapp小程序的全局弹窗解决方法

今天, 写小程序的同事找到我, 让我帮他解决一个问题, 就是uniapp如何实现全局弹窗 但是众所周知, uniapp在小程序对dom操作有很大的限制,那么像h5那样直接往document里面塞东西的方法肯定行不通了, 甚至连document都拿不到, 这个太折磨人了 至于每个页面都加一个弹窗组件这种方法也太麻烦了

直到我看到这篇文章zhuanlan.zhihu.com/p/183919769

大致就是说, 在文件编译之前, 我先处理下这个文件, 塞点什么东西进去, 然后再给你编译, 那这个地方可以处理的空间就大了, 这个给我打开了新世界的大门, 但是随后就关上了, 因为我用的是vue3, 用vite打包的, 不能直接复制过来用

不过, 经过一番寻找, 我还是找到了vite的实现方式, 直接上代码

// vite.config.js
import {
    defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [uni(), {
        name: 'any name', // 插件名称
        enforce: 'pre', // 插件的执行顺序, 我们需要再vite的核心插件前执行
        
        // vite提供的钩子, 处理每个文件的时候都会触发一次改钩子
        // code: string 为文件数据
        // id: string 为文件路径
        transform(code, id) {
            // 过滤出page文件
            if (/\.vue$/.test(id) && /\/pages\//.test(id)) {
                /**
                * 匹配开头的第一个标签 例:
                * <template>
                *  <view>
                *
                * 然后在下面添加需要的全局组件
                */
                code = code.replace(/[\s\S]+?<[\d\D]+?>/, _ => `
                    ${_}
                    <YourComponent />
                `)

                return code
            }
        },
    }],
})

// main.js
// 全局注册组件
app.component('YourComponent', YourComponent)

这样, 我们的每个页面都会自动添加全局组件, 像是接口调用失败需要弹出toast的这种需求, 直接用pinia管理状态就能实现了