关于#app#的问题,如何解决?

uniapp中,我新建了一个vue文件,里面存放了一个悬浮球,而现在我想要让那个悬浮球在所有页面都有展示,请问我应该在哪里布设全局

只有H5可以实现

import App from './App'
import Ball from '@/components/Ball/index' // 引入组件


import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// 加入以下代码
const BallVM = new Vue({
    ...Ball
})
document.body.appendChild(BallVM.$mount().$el)

img

封装成组件,然后在app.json里面引入组件。每个页面的话需要加一下~

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7768281
  • 你也可以参考下这篇文章:记一次vue遇到的坑,表格发送添加或删除请求并重新请求数据,发现数据并没有同步刷新。
  • 除此之外, 这篇博客: 封装一个uniapp的全局弹窗组件,vue中也可以使用,在任何页面都可以弹出中的 第二步: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  •  注册一个全局函数,使用 Vue.prototype,首先创建一个js文件来存放你的全局方法,之后在main.js中引入挂载

    以下代码中几个关键点:

    1、install,参数可以拿到Vue函数,等价于 main.js 中 import 进来的 Vue

    2、Vue.extend(Invite),这里可以看到 Invite 是我导入的组件实例对象,该方法传入组件实例对象可以返回给你该组件的实例构造器,方便我们后续多次构建并操作该组件

    3、instance._props._specia = params,这里只是向新构建的组件内传递一个props参数

    4、instance.vm = instance.$mount(),挂载模板,生成真实dom,作用和$el一致

    5、invite-box是组件最外层盒子的类名

    6、setTimeout,因为要添加到最后,需要异步添加

     invite.js

    import Invite from '../components/invite.vue'
    
    export default {
      install(Vue) {
        const Profile = Vue.extend(Invite)
        
        // 弹出邀请
        Vue.prototype.$openInvite = function(params) {
          const instance = new Profile()
          instance._props._specia = params
          instance.vm = instance.$mount()
          const InviteEle = document.body.lastElementChild
          if(InviteEle.className === 'invite-box') return
          setTimeout(() => document.body.appendChild(instance.vm.$el))
          return instance
        }
    
        // 关闭邀请
        Vue.prototype.$closeInvite = function() {
          const instance = new Profile()
          instance.vm = instance.$mount()
          const InviteEle = document.body.lastElementChild
          if(InviteEle.className !== 'invite-box') return
          document.body.removeChild(InviteEle)
          return instance
        }
      }
    }

    main.js

    // 导入invite.js
    import invite from './utils/invite'
    // 安装插件
    Vue.use(invite)
  • 以下回答由chatgpt基于相关博客总结生成:

    对于在uniapp中将悬浮球组件设置为全局展示,可以按照以下步骤进行操作:

    1. 创建一个公共组件,命名为FloatBall,在项目的components目录下创建一个FloatBall.vue的文件。
    <template>
      <div class="float-ball">
        <!-- 这里放置悬浮球的内容 -->
      </div>
    </template>
    
    <script>
    export default {
      name: 'FloatBall',
      // 这里放置悬浮球组件的逻辑代码
    }
    </script>
    
    <style scoped>
    .float-ball {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 60px;
      height: 60px;
      background-color: #f00;  // 这里可以按需修改悬浮球的背景色
      border-radius: 50%;
      z-index: 999;
    }
    </style>
    
    1. App.vue文件中全局引入FloatBall组件。
    <template>
      <div id="app">
        <!-- 这里放置其他页面内容 -->
        <float-ball></float-ball>  // 在最顶层添加 float-ball 组件
      </div>
    </template>
    
    <script>
    import FloatBall from '@/components/FloatBall'  // 通过相对路径引入 FloatBall 组件
    
    export default {
      name: 'App',
      components: {
        FloatBall  // 注册 FloatBall 组件
      }
    }
    </script>
    
    1. 现在悬浮球组件已经全局展示在所有页面中,可以根据需要在FloatBall组件中添加逻辑和样式。在示例代码中,悬浮球是一个红色的圆形,可以根据需要修改样式和添加点击事件等功能。

    通过以上步骤,在uniapp中就可以将悬浮球组件设置为全局展示了。请注意,上述代码中的组件路径和名称可能需要根据项目的实际情况进行调整。