6***@qq.com
6***@qq.com
  • 发布:2021-04-13 14:09
  • 更新:2022-10-24 09:19
  • 阅读:1224

请问uniapp 在app端如何实现公共层组件(做公告)

分类:uni-app

请问uniapp 在app端如何实现公共层组件(做公告),类似在h5端的跟router-view同一层级展示,不需要重新渲染页面

2021-04-13 14:09 负责人:无 分享
已邀请:
像素方舟_青阳

像素方舟_青阳

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

boommax

boommax - boommax

我也遇到同样的问题,uni官方也没个人来回复

1***@163.com

1***@163.com

export default Vue.extend({
mpType: "app",
onLaunch() {
uni.preloadPage({ url: "/pages/popup/index" }); // 使用 preloadPage 实现公共层组件
uni.showPopup("login", { title: "xxx" });
},
});

这种写法突然报错了,大佬这个是咋回事啊

要回复问题请先登录注册