一、前言

在uni-app项目中，经常需要展示一些错误信息给用户。然而，uni-app官方提供的uni.showToast()方法已经无法满足我们项目的特殊需求。当内容条数过多时，然而，小程序中只显示两行内容，无法将完整的内容展示出来。另外，对于uView组件库的u-toast组件，需要将其引入到每个页面中，并通过ref调用。这无疑增加了开发成本和维护成本。因此，决定自己编写一个全局的Toast组件，以满足项目的实际需求。

在本文中，将介绍如何创建一个全局的Toast组件，以及如何将其集成到uni-app项目中。通过这个组件，可以轻松地展示错误信息，并保证信息的完整性和可读性。同时，该组件的使用也非常简单，只需要通过一个方法就可以轻松地调用。希望通过本文的介绍，能够帮助大家更好地解决项目中遇到的问题，提高开发效率和用户体验。

二、实现

在components创建一个globalToast.vue文件

// 以下内容可以根据自己的项目需求自行更改
<template>
  <view v-if="visible" class="global-toast">
    {{ message }}
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: ""
    };
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      uni.$toast = this.showToast
      uni.$hide = this.hide
    },
    hide() {
      this.message = ''
      this.visible = false
    }
    showToast(message) {
      this.message = message;
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, 2000); // 控制消息提示显示时间，这里设置为2秒
    }
  }
};
</script>

<style scoped>
.global-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
}
</style>

2.在main.js中引入

import globalToast from '@/components/globalToast/globalToast.vue'
Vue.component('globalToast', globalToast)

3.使用插件vue-inset-loader

 // 1. npm install vue-inset-loader --save-dev  // 支持wx小程序
 // 由于vue-inset-loader源码中的环境判断只在微信小程序中有效，所以我拿掉了vue-inset-loader源码中的环境判断
 // 重新上传到了npm,可以根据自己的需求选择安装：custom-vue-inset-loader 
 // 2. npm install custom-vue-inset-loader --save-dev  // 支持app 小程序
 // 3. 在vue.config.js中注入loader,没有就新建一个
 const path = require('path')
 module: {
	rules: [
       {
          test: /\.vue$/,
            use:{
                // // 针对Hbuilder工具创建的uni-app项目
                // loader: path.resolve(__dirname,"./node_modules/vue-inset-loader")
                loader: path.resolve(__dirname,"./node_modules/custom-vue-inset-loader")
            }
        }
    ]
 }
 // 4.在pages.json中添加insetLoader
 "insetLoader": {
    "config": {
      "globalToast": "<globalToast ref='globalToast'></globalToast>"
    },
    "label": ["globalToast"],
    "rootEle": "view"
  },
  "pages": []

使用方法

// 安装插件,修改pages.json等文件后 需要重新运行项目
uni.$toast('show Message')

三、总结

本文介绍了使用uni-app开发全局组件的一种实现思路。通过自定义一个Toast组件，可以满足项目中对错误信息的展示需求，并解决小程序中显示内容不完整的问题。通过使用vue-inset-loader组件，可以将Vue组件以内联方式加载到页面中。希望本文能够为大家提供一些启示和帮助，同时也欢迎大家分享更好的方法和经验，共同进步。

uni-app全局弹窗组件（App&小程序）

一、前言

二、实现

三、总结