uni-app 兼容全平台的弹框插件需求

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

uni-app 兼容全平台的弹框插件需求

开发环境 版本号 项目创建方式

能否做下uni-popup弹框的全平台兼容，或者出一个兼容全平台的弹框，官方出品的弹框uni-popup竟然不支持全平台，那么请问uniapp一套代码编到14个平台的意义何在？？？

Harmonyos Next教程
3 回复

或者出下 钉钉小程序、快手小程序、飞书小程序、京东小程序 的弹框解决方案也可以


uview 这个框架试过了吗？uview

在开发uni-app应用时，实现一个兼容全平台的弹框插件，可以利用uni-app提供的条件编译和平台特有的API来实现。以下是一个基本的实现思路及代码示例，展示如何在不同平台上展示弹框。

1. 插件结构

首先，我们定义一个名为custom-toast的插件，该插件包含一个组件CustomToast.vue和一个index.js用于导出插件。

2. CustomToast.vue

<template>
  <view v-if="visible" class="toast-container">
    <view class="toast-content">{{ message }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: ''
    };
  },
  methods: {
    showToast(msg) {
      this.message = msg;
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, 3000); // 显示3秒后隐藏
    }
  }
};
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 9999;
}
</style>

3. index.js

import CustomToast from './CustomToast.vue';

const toast = {
  install(Vue) {
    Vue.component('CustomToast', CustomToast);

    Vue.prototype.$showToast = function(message) {
      // 条件编译，根据平台使用不同的方式展示弹框
      #ifdef H5 || MP-WEIXIN || MP-TOUTIAO
        const toastComponent = Vue.extend({ render: h => h(CustomToast) });
        const instance = new toastComponent().$mount();
        document.body.appendChild(instance.$el);
        instance.$data.showToast(message);
      #elseif APP-PLUS
        plus.ui.createToast({
          content: message,
          duration: 'short'
        }).show();
      #endif
    };
  }
};

export default toast;

4. 使用插件

在main.js中引入并使用插件：

import Vue from 'vue';
import App from './App';
import toast from './plugins/custom-toast';

Vue.use(toast);

new Vue({
  render: h => h(App)
}).$mount('#app');

在任意组件中调用弹框：

this.$showToast('Hello, this is a cross-platform toast!');

总结

上述代码展示了如何创建一个简单的跨平台弹框插件。对于H5、微信小程序和头条小程序，使用Vue组件来展示弹框；对于App平台（如5+ App），则利用平台提供的API来展示弹框。这种方式确保了弹框在不同平台上的兼容性。

回到顶部