IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> uniapp消息订阅uni.requestSubscribeMessage -> 正文阅读

[JavaScript知识库]uniapp消息订阅uni.requestSubscribeMessage

封装一个订阅消息逻辑组件

现在消息订阅只允许用户点击才能订阅

如果用户没有打开订阅消息的总开关的话,

用户点击也是不会弹出弹框订阅的

弹框使用的uview组件,可以换成其他的

<template>
	<!--  消息订阅组件 -->
	<view class="message_subscription">

		<button @click="judgementMessageSwitch()" style="margin: 20px;background-color: #FFFFFF;">消息订阅测试</button>

		<u-popup v-model="showOpenSettingDialog" mode="center" width="520rpx" :mask-close-able="false" height="300rpx"
			border-radius="18">
			<div class="mock-dialog">
				<div class="mock-dialog-content">
					<div class="mock-dialog-title">提示</div>
					<div class="mock-dialog-text">
						{{tipsContent}}
					</div>
				</div>
				<div class="mock-dialog-button">
					<div class="color-gray" @click="dontOpenSetting">{{buttonCancelText}}</div>
					<div class="color-blue" @click="openSetting">{{buttonConfirmText}}</div>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'messageSubscription',
		components: {},
		data() {
			return {
				showOpenSettingDialog: false, // 授权询问弹框,uview
				tipsContent: '为了及时获取订单状态,您是否想接收订单状态的消息提醒?', // 弹框提示内容,
				buttonConfirmText: '去开启消息提醒',
				buttonCancelText: '不需要提醒',
			}
		},
		methods: {
			// 判断消息订阅总开关是否打开
			judgementMessageSwitch(flag) {
				let that = this
				uni.getSetting({
					withSubscriptions: true,
					success(res) {
						console.log(res)
						if (!res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是关着的,引导用户去打开
							that.showOpenSettingDialog = true
						} else { // 如果开着,则继续向下打开弹窗,获取用户授权
							that.messageSubscription()
						}

					},
					fail() {
						that.messageSubscription() // 如果失败,则继续向下打开弹窗,获取用户授权
					}
				})
			},

			// 弹窗点订阅,开启消息订阅提醒
			openSetting() {
				if(this.buttonConfirmText == '确定'){
					this.messageSubscription()
					return
				}
				
				var that = this
				uni.openSetting({
					withSubscriptions: true,
					complete(res) {
						uni.getSetting({
							withSubscriptions: true,
							success(res) {
								if (res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是开着的
									that.tipsContent = '再次点击确定,弹出可订阅列表进行订阅'
									that.buttonCancelText = '取消'
									that.buttonConfirmText = '确定'
								} else {
									that.showOpenSettingDialog = false;
								}
							}
						})
					}
				})
			},

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

			// 订阅申请弹出,只允许点击弹出
			messageSubscription() {
				this.tipsContent= '为了及时掌握订单状态,您是否想接收订单状态的消息提醒?' // 弹框提示内容,
				this.buttonConfirmText= '去开启消息提醒'
				this.buttonCancelText= '不需要提醒'
				let that = this
				that.showOpenSettingDialog = false;
				let tmplId = ['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] // 模板ID,去小程序后台管理开一个,写进数组里,官方文档也有介绍
				uni.requestSubscribeMessage({
					tmplIds: tmplId,
					success(res) {
						console.log("success", res)
						if (res['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] == 'accept') {
							console.log('订阅成功');
						}
					},
				})
			},
		},
	}
</script>

<style lang="scss" scoped></style>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-28 11:44:26  更:2022-04-28 11:48:24 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:49:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码