uniapp 中实现全局自定义浮层

业务场景中有许多的全局浮层需求，例如WEB端常见的登录框浮层，带有抢单功能的APP、小程序等

在WEB端可以通过将浮层组件定义在顶层父组件中的方式实现，但uniapp的App.vue中不能写视图元素，也无法使用vue-router的嵌套路由功能，无法以常规方式实现

一、手动在需要的页面添加组件（不实用）

最简单能想到的方式是在每一个要用到的页面引入组件，并处理相关逻辑

导入可以用easycom规范的组件，省略每个页面的导入、注册语句

组件使用逻辑可以用Vue2-mixin或Vue3-Hooks的方式复用，省略重复的逻辑代码

但每个页面需要机械式的插入<CompName />组件使用语句，不是一个适合应用的方法

---

也有网友提供了自动插入的脚本，本质上也是将公共代码插入到每个页面中，只是交由了脚本完成：

vue2 + webpack：vue-inset-loader

vue3 + vite：vite-plugin-vue-insert-code

二、透明页面模拟弹窗

通过设置pages.json中页面的style属性，让页面背景色透明，再添加浮现的页面跳转动画效果，模拟弹窗的效果

配置代码（IOS 端测试成功，其他设备需要测试兼容性）：

{
  "path": "xxx",
  "style": {
    "disableScroll": true,
    "app-plus": {
      "backgroundColorTop": "transparent",
      "backgroundColorBottom": "transparent",
      "background": "transparent",
      "titleNView": false,
      "scrollIndicator": false,
      "popGesture": "none",
      "animationType": "fade-in"
    }
  }
}