uniapp全局组件（消息提醒）

书接上回，上个帖子写的主题切换，这个该写全局组件了，也是项目写着写着发现功能竟然有全局的，又是因为没有根组件[擦汗]，ps：下次如果用uniapp，必须要做全产品功能，然后想好到底怎么搭这个框架！！！
好了，接下来就是说下这帖子我的需求。项目有个消息提醒功能，类似就是一个悬浮按钮，全局显示，一来消息，上面的数字就会变化，功能很简单，但是在uniapp实现起来却有点麻烦。
网上有很多老铁给的方法很通用啊，就是写个公共组件，然后每个组件都引用一遍，这里我想大喊一声，卧槽（我屮艸芔茻），如果我想这么麻烦那干嘛还来查？
然后就是发现了uniapp支持原生plus，发现通过plus.nativeObj.View可以实现项目要求的功能。在项目中引入vuex，这样就可以哪里想显示就哪里让它显示。好了，上代码：
vuex：


const state = {view: null,alert: null
}const mutations = {close(state) {state.view.close()state.view = null},// 显示按钮show(state) {if (!state.view) {create(state)return}state.view.show();if (!state.alert) {create(state)return} state.alert.show();},// 隐藏按钮hide(state) {state.view && state.view.hide()state.alert && state.alert.hide() }
}function create(state){uni.getSystemInfo({success:(info)=>{//初始化存一些设备相关的参数console.log(info.screenHeight)try {uni.setStorageSync('screenHeight', info.screenHeight);uni.setStorageSync('screenWidth', info.screenWidth);} catch (e) {// error}}})// #ifdef APP-PLUSstate.view = new plus.nativeObj.View('bottom-btn', {left: (uni.getStorageSync('screenWidth') - 50)+'px',bottom: '20px',height: '45px',width: '100px',backgroundColor: 'rgba(239,239,239,0)'},[{tag: 'rect',id: 'rect',rectStyles: {color:'rgba(239,239,239,0.5)', radius: '27px'},position:{top: '0px', left: '0px', width: '100%', height: '100%'}}]);state.alert = new plus.nativeObj.View('bottom-btn', {left: (uni.getStorageSync('screenWidth') - 50)+'px',bottom: '20px',height: '45px',width: '100px',backgroundColor: 'rgba(0,0,0,0)'},[{tag: 'img',id: 'img',src: './static/home/messageIcon.png',position:{top: '7px', left: '10px', width: '30px', height: '30px'}},{tag: 'rect',id: 'rect',rectStyles: {color:'rgba(221,82,77,1)', radius: '7px'},position:{top: '4px', left: '28px', width: '20px', height: '14px'}}]);   let richtext = '<font color="#fff" style="font-size:10px;">55</font>';// 绘制文本state.alert.drawRichText(richtext, {top:'4px',left:'31px',width:'13px',height:'20px'},{align:'center'});state.alert.setTouchEventRect({top:'7px',left:'10px',width:'30px',height:'30px'});  // 监听点击事件state.alert.addEventListener("click", (e) => {console.log(e)uni.navigateTo({url: '/pages/message/message'})}, false);// #endif
}
const actions = {}
const getters = {}
export default {namespaced: true,state,mutations,actions,getters
}

然后混入到vue中，如果不知道咋整的童鞋可以去看上一篇文章，再就是使用了，上代码：
App.vue

onShow: function () {this.show();
}

这就全局显示了，如果想隐藏的哪个页面就用调用隐藏方法吧~

2022-01-19
已经将此组件封装上传至uniapp，可以直接下载使用，欢迎大家下载，发个组件链接：
https://ext.dcloud.net.cn/plugin?id=7280
全文完~

uniapp全局组件（消息提醒）相关推荐

【uniapp】悬浮球（floatball）全局组件——全局消息提醒功能
已将前期写的全局组件(消息提醒)封装完毕,上传至uniapp组件库.组件能够全局显示,不用每个组件都引用.此组件只适用于app端. 组件地址:添加链接描述 Floatball 悬浮球主要用于移动端a ...
uni-app注册全局组件
有一些组件可能会被很多个页面使用到,比如说,自定义的导航栏,如果在每一个页面都引用一次就很麻烦了,这个时候可以将该组件注册为全局组件了有两种方法可以注册为全局组件第一种是 easycom组件模式 ...
Flowable全局监听器-待办消息提醒
项目需要在每个待办Task到达时,发送一个消息提醒用户过来处理.不想在每个工作流单独加监听器,这时候可以使用Flowable的全局监听器. 定义一个监听器 package com.azhuzhu.fl ...
uni-app 全局消息通知弹窗（App端）
uni-app 全局消息通知弹窗(App端) 实现效果实现一个顶部的全局消息通知,并且可以常驻,除非手动关闭. 效果图如下收到告警通知弹窗从顶部向下弹出,可点击跳转到对应页面,可上滑关闭弹窗,弹 ...
vue实现全局消息提醒功能（vue-extend）
1.需求背景 (1)在一般的管理系统或者H5应用中,需要交互反馈提醒.这种交互反馈,往往需要在多个组件中使用到,那么是否可以将其抽离出来,封装一个组件呢?答案是肯定的,我们可以根据日常的业务,对消息提 ...
uni-app注册全局组件 - 符合easycom
通知本文已过时,HBuilderX已发布新的自定义组件方法:uni_modules 本文的/components/xx/xx.vue会在新版uni-app中与原生ui组件冲突. 新方法详见: [we ...
Windows Phone 实用开发技巧（18）：使用SystemTray显示全局消息提醒
在Windows Phone 7 (Nodo)之前的版本中,我们要在应用程序显示消息提醒,或者是进度提示,通常的做法在页面的顶部放置一个专门的容器(如一个Grid),里面放置一些文本和Performa ...
使用uniapp注册全局组件
首先我们要在全局注册全局组件创建一个组件后在main.js文件下当然注册组件首先要新建一个组件目录然后引入. //注册全局组件 //首先在文件下创建一个组件 import global fr ...
uni-app:获取当前经纬度解决方案+如何布置全局组件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一.布置全局组件在我们开发的过程中,会碰到一个现象,就是在页面里面引入组件,总算要写import,components才能引用,这里给大 ...

uniapp全局组件（消息提醒）

uniapp全局组件（消息提醒）相关推荐

最新文章

热门文章