请问uniapp 在app端如何实现公共层组件（做公告），类似在h5端的跟router-view同一层级展示，不需要重新渲染页面
6***@qq.com
- 发布：2021-04-13 14:09
- 更新：2022-10-24 09:19
- 阅读：2661
App.vue，初始化的时候挂载 showPopup，并且预加载弹窗页
<script>
import Vue from "vue";
Vue.config.productionTip = false;
export default Vue.extend({
mpType: "app",
onLaunch() {
uni.preloadPage({ url: "/pages/popup/index" }); // 使用 preloadPage 实现公共层组件
uni.showPopup("login", { title: "xxx" });
},
});
/**
* 显示全局弹窗
* @param {string} type 类型
* @param {object} opts 参数
*/
uni.showPopup = (type = "", opts = {}) => {
if (!type) return;
uni.navigateTo({
url: `/pages/popup/index`,
success: () => uni.$emit("popup@show", { type, opts }),
});
};
/**
* 关闭当前弹窗
* @param {function} success 回调函数
*/
uni.hidePopup = (success = noop) => {
uni.$emit("popup@hide", success);
};
</script>pages.json 设置页面：无标题、全透明、无动画、阻止ios侧滑关闭
{
"path": "pages/popup/index",
"style": {
"app-plus": {
"titleNView": false,
"animationType": "none",
"background": "transparent",
"popGesture": "none"
}
}
}pages/popup/index.nvue
<template>
<component :is="name" :options="opts" />
</template>
<script lang="js">
import PopLogin from '@/components/pop/pop-login.vue' // 弹窗-登录
const TYPE_NAME_MAP = {
login: 'pop-login', // 类型和组件的映射
}
export default {
components: {
PopLogin,
},
data() {
return {
name: '',
opts: {},
}
},
onLoad() {
uni.$on('popup@show', ({ type, opts }) => {
this.name = TYPE_NAME_MAP[type]
this.opts = opts
})
uni.$on('popup@hide', (callback) => {
uni.hideKeyboard()
this.name = ''
this.opts = {}
uni.navigateBack()
setTimeout(() => {
callback && callback()
}, 50)
})
},
onUnload() {
uni.$off('popup@show')
uni.$off('popup@hide')
},
onBackPress({ from }) {
if (from !== 'navigateBack') return true // 阻止返回
},
}
</script>剩下的就是在组件里面实现了
像素方舟_青阳
补充一下优缺点，优点 1. 可以通过重写 uni.showModal / uni.showLoading 等 定制扩展uni能力（实现安卓和苹果UI的统一），2. 实机测试安卓下弹出效果也基本能达到原生的速度，3.一些公共能力可以组件化不用注册页面（我自己应用里面开屏广告、幕布广告、模态窗、快捷评论、登录绑定等都是用这套做的）。缺点，1. 是暂不支持重复弹出（多实例，实际是一个透明页面），PS: 提供的代码优点小瑕疵，hide前需要判断name是否为空，否则会导致重复back
2021-09-14 14:17
1***@163.com
export default Vue.extend({
mpType: "app",
onLaunch() {
uni.preloadPage({ url: "/pages/popup/index" }); // 使用 preloadPage 实现公共层组件
uni.showPopup("login", { title: "xxx" });
},
});
这种写法突然报错了，大佬这个是咋回事啊
2022-10-24 10:50