uniapp小程序消息订阅功能

这篇具有很好参考价值的文章主要介绍了uniapp小程序消息订阅功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景描述

微信充电小程序希望在用户充电时间结束,或者用户的充电完成时。通过微信公众号的推送信息的方式,告知用户充电进程。

需求实现

基础API:

实现上面的需求用到API有:uni.getSetting()uni.openSetting()、核心uni.requestSubscribeMessage() uniapp官方文档

  • uni.getSetting():获取用户的当前权限的设置。
  • uni.openSetting():调起客户端小程序设置界面,返回用户设置的操作结果。
  • uni.requestSubscribeMessage():调起客户端小程序订阅消息界面,返回用户订阅消息的操作结果。
效果展示
uniapp订阅消息,uniapp,小程序,小程序,前端图1 消息订阅按钮
uniapp订阅消息,uniapp,小程序,小程序,前端图2 弹出订阅申请
代码展示
<template>
	<!--  消息订阅组件 -->
	<view style="margin-top: 500rpx;padding: 30rpx;">
		<u-button type="primary" @click="subscribeMessage()">消息订阅</u-button>
		<u-popup v-model="showPopup" mode="center" width="650rpx" :mask-close-able="false" border-radius="18">
			<div class="padding-sm">
				<div class="text-center">
					<div class="text-xl">订阅提示</div>
					<div class="padding-xl text-letter">
						{{content}}
					</div>
				</div>
				<div class="flex justify-around">
					<div class="" @click="cancelHandle">{{cancelText}}</div>
					<div class="" @click="confirmHandle">{{confirmText}}</div>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "w-subscribeMessage",
		data() {
			return {
				showPopup: false, // 授权询问弹框
				content: '为了及时获取订单状态,您是否想接收订单状态的消息提醒?', // 弹框提示内容,
				confirmText: '去开启消息提醒',
				cancelText: '不需要提醒',
				tmplId: ['**************************', '**************************']
			}
		},
		methods: {
			// 判断消息订阅总开关是否打开
			subscribeMessage(flag) {
				uni.getSetting({
					withSubscriptions: true,
					success:(res)=> {
						console.log(res)
						if (!res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是关着的,引导用户去打开
							this.showPopup = true
						} else { // 如果开着,则继续向下打开弹窗,获取用户授权
							this.messageSubscription()
						}
					},
					fail() {
						this.messageSubscription() // 如果失败,也打开弹窗,获取用户授权
					}
				})
			},

			// 弹窗点订阅,开启消息订阅提醒
			confirmHandle() {
				if (this.confirmText == '确定') {
					this.messageSubscription()
					return
				}

				uni.openSetting({
					withSubscriptions: true,
					complete:(res)=> {
						uni.getSetting({
							withSubscriptions: true,
							success:(res)=> {
								if (res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是开着的
									this.content = '再次点击确定,弹出即可完成订阅'
									this.cancelText = '取消'
									this.confirmText = '确定'
								} else {
									this.showPopup = false;
								}
							}
						})
					}
				})
			},

			// 弹窗点不订阅
			cancelHandle() {
				this.showPopup = false;
			},

			// 订阅申请弹出,只允许点击弹出
			messageSubscription() {
				this.showPopup = false;
				this.content = '为了及时掌握订单状态,您是否想接收订单状态的消息提醒?' // 弹框提示内容,
				this.confirmText = '去开启消息提醒'
				this.cancelText = '不需要提醒'
				uni.requestSubscribeMessage({
					tmplIds: this.tmplId,
					success:(res)=> {
						if (res['**************************'] == 'accept') {
							console.log('xxxx消息订阅成功');
						}
					},
				})
			},
		},
	}
</script>
<style scoped>
	.padding-sm {
		padding: 22upx;
	}

	.text-center {
		text-align: center;
	}

	.text-xl {
		font-size: 36upx;
	}

	.padding-xl {
		padding: 50upx;
	}

	.text-letter {
		letter-spacing: 1upx;
		line-height: 1.5;
	}

	.flex {
		display: flex;
	}

	.justify-around {
		justify-content: space-around;
	}
</style>

注意:这个API需要用户的点击行为才能触发文章来源地址https://www.toymoban.com/news/detail-532016.html


点赞 评论 收藏 ~~ 留言讨论,如有错误,也希望大家不吝指出。 ~~ 点赞 评论 收藏

到了这里,关于uniapp小程序消息订阅功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp小程序如何给用户推送订阅消息? 及订阅消息参数值内容限制规则

    uniapp小程序如何订阅消息,给用户推送消息? 小程序的模板推送分为“一次性订阅”和“长期订阅” 一次性订阅:用户订阅小程序后,程序只能对指定OpenId进行一次推送模板消息,无法多次推送 长期订阅:用户长期订阅,能够多次推送模板消息(长期订阅模板需要向微信官方

    2023年04月08日
    浏览(54)
  • uniapp微信小程序消息订阅详解

    注意:订阅信息 这个事件 是 当用户 点击的时候触发 或者 是 支付成功后触发, 用户勾选 “总是保持以上选择,不再询问” 之后或长期订阅,下次订阅调用 wx.requestSubscribeMessage 不会弹窗,保持之前的选择,修改选择需要打开小程序设置进行修改。

    2024年04月09日
    浏览(60)
  • uniapp微信小程序消息订阅快速上手

    这边的模板id和详细内容后续前后端需要使用 需要是一个button触发 js: 其中thing2、phrase3是模板的字段名,根据自己模板去修改即可 HttpClient.java

    2024年02月12日
    浏览(64)
  • uniapp开发微信小程序订阅消息

    微信发送订阅消息接口文档 1.1、获取模板id及模板字段名称 注意点: 消息字段的类型是有校验的,充电度数是number类型,则传入的string中不能使用0.00度。则会报错。 2.1、编写消息模板配置文件 2.2、编写订阅消息请求对象 2.3、编写充电开始订阅消息模板对象 2.2.1、DataEntry

    2024年02月16日
    浏览(52)
  • 微信小程序消息订阅功能

    消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅(用户订阅了才能接收推送的消息) 订阅消息卡片跳转能力:点击查看详情可跳转至该小程序的页

    2024年02月05日
    浏览(41)
  • 微信小程序实现订阅消息功能

             * 源码已经上传到资源处,需要的话点击跳转下载 |  源码下载         小程序中的订阅内容在日常中大家都会使用到,一般在支付的时候,会收到支持成功的消息,里面有一些基础信息花费多少以及是使用在什么地方,订阅消息是小程序向用户发送消息的方式

    2024年02月08日
    浏览(56)
  • 微信小程序服务通知(订阅消息)定时推送消息功能

    首先先说项目需求:向预约参观的用户提前一天晚上8点推送消息。小程序端主要用到的 API 是我是小程序用到的API。以及服务端用到的 API :我是服务端用到的API。 1. 开通订阅消息功能 (1)、 首先需要在小程序管理后台开通订阅消息功能。没开通前如下图所示: (2)、开通之

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

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

    2024年02月06日
    浏览(48)
  • C# 简单模拟 程序内部 消息订阅发布功能

    我想做个简单的消息发布订阅功能,但是发现好像没有现成的工具类。要么就是Mqtt这种消息订阅发布。但是我只想程序内部进行消息订阅发布,进行程序的解耦。那没办法了,只能自己上了 在Utils 的MessageHelper 这里我用了元祖来进行临时变量的传值。元祖如何使用请看我的另

    2024年02月14日
    浏览(32)
  • 微信小程序订阅消息功能的前后端配置

    功能描述:用户进行弹窗订阅授权后,给用户下发消息通知提醒 使用场景:优惠券过期,会员过期,活动通知等等 前端 获取模版ID 在微信公众平台 一 功能 一 订阅消息 手动配置获取模板 ID:登录 https://mp.weixin.qq.com 获取模板,如果没有合适的模板,可以申请添加新模板,

    2024年04月11日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包