uni-app全局组件通用解决方案

发布于 1周前 作者 caililin 来自 Uni-App

uni-app全局组件通用解决方案

实现方案

需求：

自定义toast在main.js挂载，然后页面直接使用api调用即可实现吐司。

目前问题：

目前插件市场所有吐司弹窗的方式都需要在页面引入一次，不太方便。

解决方法：

目前已经通过document.body.appendChild的方式在h5实现了该需求。 但是移动端没有document，想问下是否有支持移动端页面动态添加元素的方法

Harmonyos Next教程
12 回复

h5端 可以这么实现，但是app端又该怎么弄


同问,app那边如何操作

app端无解

刚写了个loader，可以实现全局引用，https://ask.dcloud.net.cn/article/39345

uniapp自带的toast不就可以吗

appPlus [https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast]

这么干mian.js该有多庞大

app端可以放在APP.VUE的 globalData 全局文件里 进行this赋值对象

APP端的全局弹窗我这边是用的webview，比如登录完回到之前拦截到登录的页面，延迟个2S，将webview append到页面中（这个时候页面跳转已经执行完成）

很好用

刚写了个loader，可以实现全局引用，https://ask.dcloud.net.cn/article/39345

在uni-app中，全局组件的注册和使用是开发高效、可维护应用的关键部分。以下是一个通用的解决方案，通过代码示例展示如何在uni-app项目中注册和使用全局组件。

1. 创建全局组件

首先，在项目的components目录下创建一个新的组件，例如MyGlobalComponent.vue。

<!-- components/MyGlobalComponent.vue -->
<template>
  <view class="my-global-component">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  name: 'MyGlobalComponent',
  props: {
    message: {
      type: String,
      default: 'Hello, I am a global component!'
    }
  }
}
</script>

<style scoped>
.my-global-component {
  padding: 20px;
  background-color: #f0f0f0;
}
</style>

2. 全局注册组件

在main.js或App.vue中全局注册该组件。这里以main.js为例：

// main.js
import Vue from 'vue'
import App from './App'
import MyGlobalComponent from './components/MyGlobalComponent.vue'

// 全局注册组件
Vue.component('MyGlobalComponent', MyGlobalComponent)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

3. 使用全局组件

现在，MyGlobalComponent组件可以在项目的任何页面中使用，而无需单独导入和注册。例如，在pages/index/index.vue中使用：

<!-- pages/index/index.vue -->
<template>
  <view>
    <MyGlobalComponent message="Welcome to the Home Page!" />
  </view>
</template>

<script>
export default {
  name: 'Index'
}
</script>

<style>
/* 页面样式 */
</style>

4. 动态组件和插槽（可选）

如果全局组件需要更灵活的使用，可以考虑使用动态组件和插槽。例如，在MyGlobalComponent.vue中添加一个默认插槽：

<!-- components/MyGlobalComponent.vue -->
<template>
  <view class="my-global-component">
    <slot></slot>
  </view>
</template>

然后在页面中使用插槽内容：

<!-- pages/index/index.vue -->
<template>
  <view>
    <MyGlobalComponent>
      <text>This is custom content passed via slot.</text>
    </MyGlobalComponent>
  </view>
</template>

通过上述步骤，您已经成功地在uni-app项目中注册并使用了一个全局组件。这种方法有助于提高代码复用性和项目可维护性。

回到顶部