uniapp开启消息通知/提示(使用uniPush)

这篇具有很好参考价值的文章主要介绍了uniapp开启消息通知/提示(使用uniPush)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

亲爱的小伙伴们,最近对uniPush有稍许研究,当前研究出一些心得,现在分项给大家,希望对大家的uniapp之路有所帮助。本次的教程是教会你如何使用uniPush自定义消息通知,同时还附带添加消息提示音添加,多的不说少的不唠,下边就让我来给你们分享一下我的经验吧。

1.首先需要我们先到Dcloud开发者中心中为你的项目配置uniPush

开发者中心传送门

接下来就是操作步骤

1.选择uniPush

2.选择消息推送

3.选择你需要使用的项目

最后填入相关信息即可 

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app这时候肯定会有小伙伴会问,你应用签名是咋弄来的呢,不要方,我这就教你如何获取。

1.找到侧边栏最顶部的应用管理,选择我的应用

2.点击你的应用

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

 然后点击修改按钮

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

 废话不多说,点它

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

点它

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app 然后往下翻你就会找到你想要的东西了,将它们依次填入到应用信息中相应的位置即可

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

 之后你回到刚刚的消息推送,你就会发现缺失的信息都有了,然后开启uniPush即可。

2.接下来需要我们开启uniPush的权限

进入我们的项目目录之后,找到manifest.json这个文件,按如下步骤即可开启uniPush权限。这边可以选择老版本1.0或则新版本2.0,我是用的1.0那个2.0没使用过,建议按照我的教程跟我一样用1.0的否则无法保证你能成功。

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

2.自定义消息提示图标

如果你不想用uniapp自带的那个绿油油的消息提示图标,那么建议你按照我的步骤依次先找到文件夹unpackage->res然后再res下跟我一样创建如下文件夹,然后看到步骤4中从上到下的路径依次是图片大小为18x18,24x24,36x36,48x48,72x72的带 Alpha 透明通道的 PNG 图片,背景必须是透明的(如果非透明就会显示为白色方块)。

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

3.创建本地消息提示添加提示音

咱们看到如下图片我有文字说明

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

代码如下,我比较懒,就直接复制我的了,你们自行修改好哈

						var options = {
							cover: false,
							sound: 'system',
							title: this.newNotices[i].noticeTitle,
							// 
						};
						let str = ""
						str = this.newNotices[i].noticeContent
						let body = {
							data: this.newNotices[i]
						}
						let payload = JSON.stringify(body);
						const innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.autoplay = true;
						innerAudioContext.src =
							'https://you.induschain.cn/audio/y913.mp3';
						plus.push.createMessage(str, payload, options);
					}

4.监听消息提示的点击,获取载荷payload中的数据

我想有些小伙伴可能需要像我一样从载荷中获取到数据,然后根据数据跳转到相应的详情页或其他什么页面,那么接下来就要跟我一起做。

1.找到App.vue文件

2.使用onLaunch生命周期钩子

3.注意要进行条件编译

4.对提示信息进行点击监听

5.从msg中获取到payload中的的数据

6.根据你的数据进行相关操作

uniapp开启消息通知/提示(使用uniPush),移动端,uni-app

代码如下,请需要的小伙伴自行按照需求修改

			// #ifdef APP-PLUS
			plus.push.addEventListener('click', function(msg) {
				//  
				// 分析msg.payload处理业务逻辑 
				// let message = JSON.parse(msg)
				let data = msg.payload.data
				uni.navigateTo({
					url: `/pages/notice-detail/notice-detail?noticeInfo=${encodeURIComponent(JSON.stringify(data))}`
				})
				// console.log("消息弹框被点击", msg.payload.data);


			});
			//#endif

教程就到这里,有问题的小伙伴可以在评论区提问哦!文章来源地址https://www.toymoban.com/news/detail-601957.html

到了这里,关于uniapp开启消息通知/提示(使用uniPush)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp中uview组件库Toast 消息提示 的使用方法

    目录 #基本使用 #配置toast主题 #toast结束跳转URL #API #Props #Params #Methods 此组件表现形式类似uni的 uni.showToast API,但也有不同的地方,具体表现在: uView的 toast 有5种主题可选 可以配置toast结束后,跳转相应URL 目前没有加载中的状态,请用uni的 uni.showLoading ,这个需求uni已经做得

    2024年01月20日
    浏览(61)
  • uniapp微信小程序订阅消息发送服务通知--超详细

    由于公司需求,刚学完的小程序的我,要求开发一个直播通知的微信小程序,学了vue的我,选择还是使用uniapp开发,wx原生语法学完已经快忘了。在利用uniapp写代码的过程中,遇到很多问题,通过这篇博客分享一下总体实现思路以及一些小坑。整篇博客以逐步的思路让你完整

    2024年02月06日
    浏览(51)
  • 【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点

    功能描述:无论点击底部的哪个菜单栏,都可以看到第二个菜单栏下显示的红点通知。 如果只在人脉当前页面设置的话,当你在第二个菜单栏的页面中调用 uni.setTabBarBadge 方法设置红点后,切换到第一个菜单栏的页面时,是无法看到第二个菜单栏的红点的。 解决方法:如果希

    2024年02月12日
    浏览(46)
  • uniapp通过websocket实现手机APP通知栏消息显示功能(前端部分)

     开门见山地说,在移动应用端,从后端及时获取消息,展示到手机消息通知栏上面来与用户进行交互是一个很高频的应用场景,这篇文章就来介绍一下,在uniapp开发中如何实现这种需求。  要实现这个需求,对于前端来说主要技术需要拆分成两部分:一是从后端及时获取消

    2024年03月18日
    浏览(96)
  • uniapp全局挂载uViewUI的u-toast消息通知组件(微信小程序)

    在使用uView消息通知组件的时候,必须在每个页面中手动添加一个标签,打上ref然后才能调用,非常的麻烦,能不能像ElementUI那样把组件挂载到Vue原型上从而能全局调用呢,个人也是尝试了很多方法,但是由于小程序的app.vue不能写页面,所以无法达到ElementUI那种方便的效果,

    2024年02月15日
    浏览(48)
  • JAVA 使用WebSocket发送通知消息

    注: 1、jdk必须要1.8及以上 2、项目若有接口拦截过滤,WebSocket接口必须要配置拦截,使其可以验证通过 WebSocket 业务类 发送消息的方法 前端代码

    2024年02月11日
    浏览(52)
  • 使用rabbitmq进行支付之后的消息通知

    订单服务完成支付后将支付结果发给每一个与订单服务对接的微服务,订单服务将消息发给交换机,由交换机广播消息,每个订阅消息的微服务都可以接收到支付结果. 微服务收到支付结果根据订单的类型去更新自己的业务数据。 使用消息队列进行异步通知需要保证消息的可

    2024年02月10日
    浏览(46)
  • Java使用websocket实现消息实时通知

    博客仅做学习记录使用。 做项目中遇到这样一个实时通知需求,因为第一次接触这个,期间查了很多资料,看了很多博客,最后实现功能,查询的博客太多,就不一一放出来了,感谢各位大佬。 websocket方式主要代码来源于这个大佬的博客: https://blog.csdn.net/moshowgame/article/d

    2024年02月08日
    浏览(65)
  • 使用Django实现信号与消息通知系统

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在Web应用程序中,实现消息通知系统是至关重要的,它可以帮助用户及时了解到与其相关的事件或动态。Django提供了信号机制,可以用于实现

    2024年04月27日
    浏览(36)
  • Python:使用钉钉dingtalk发送通知消息

    通过钉钉的开放API接口,可以很容易的将消息发送到钉钉dingtalk,比起邮件发送更稳定,及时 文档 官网:https://www.dingtalk.com/ API Explorer调试 https://open-dev.dingtalk.com/apiExplorer 文档:https://open.dingtalk.com/document/robots/custom-robot-access 使用场景:发送消息到聊天群 前期准备:需要新建

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包