小程序订阅(前端)

最近用uniapp做了个微信小程序订阅功能，也遇到了一些坑，做个记录。同时也希望能帮助一些人，也算是c/v完以后反哺一下。哈哈！写的不对的地方还望大佬批评。。。

我是封装了一个方法

import subscription from '@/mixin/subscription.js'

export default {
    onShow() {
			let _this = this;
			this.$nextTick(function() {
				subscription(_this);//订阅消息
			})
		},

}

export default async function subscription(_this, data) {
	let that = _this
	let templateId = []
	await _this.$http.user.getSubscriptionTemplate().then(res => {
		console.log(res, '获取订阅模板信息');
		templateId = res.data.map(item => {
			return item.priTmplId
		})
		console.log(templateId, '获取订阅模板信息筛选');
	})
	// var tmplIds = 'r25mFlVaIJ18pPcQ42ueQklZUugsCO5JxaDEDJpU_cE' // 用户同意的消息模板id
	// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
		await wx.getSetting({
			withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
			success: function(res) {
				console.log(res, '调起授权界面弹窗');
				// 调起授权界面弹窗
				if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
					// 每次执到这都会拉起授权弹窗
					wx.showModal({
						title: '提示',
						content: '请授权开通服务通知',
						showCancel: true,
						success: function(ress) {
							if (ress.confirm) {
								wx.requestSubscribeMessage({ // 调起消息订阅界面
									tmplIds: [...templateId],//需要订阅的消息模板的 id 的集合
									success(res) {
										console.log(res, '订阅消息 成功 ');
									},
									fail(err) {
										console.log(err, "订阅消息 失败 ");
									},
									complete(config) {
                                        //无论成功失败都会触发
										console.log(config, "订阅消息 最终结果 ");
										let Ids = []
										for (let i in config) {
											if (config[i] == 'accept') {
												Ids.push(i)
											}
										}
										let params = {
											customerId: uni.getStorageSync(
												'USERDATA').id,
											templateIds: Ids,
											status: "accept"
										}
                                        //我的需求是要存储所获取用户的订阅的模板，以便之后发送向用户发送订阅消息
										that.$http.user.getAddUserStatus(params)
											.then(res => {
												console.log(res,
													'向后端传递订阅消息 最终结果');
											})
									}
								})

							} else if (ress.cancel) {
								// console.log('用户点击取消')
							}
						}
					})
				} else {
					console.log('订阅消息未开启')
				}
			},
			fail: function(error) {
				console.log(error);
			}
		})
}

我做的功能是每次进入小程序就给用户要一下权限，因为公司没有长期订阅的权限，这里就有一个坑。wx.requestSubscribeMessage这个接口只能在产生tap的时候调用(绑定一个点击事件就可直接调用)。而我需要在app.vue文件的onshow中就调用，所以就只能再外层套一个wx.showModal方法才能唤起订阅弹窗，

正常可以这样写

<u-button text="点击订阅" @click="subscription"></u-button>

export default async function subscription(_this, data) {
	let that = _this
	let templateId = []
	await _this.$http.user.getSubscriptionTemplate().then(res => {
		console.log(res, '获取订阅模板信息');
		templateId = res.data.map(item => {
			return item.priTmplId
		})
		console.log(templateId, '获取订阅模板信息筛选');
	})
	// var tmplIds = 'r25mFlVaIJ18pPcQ42ueQklZUugsCO5JxaDEDJpU_cE' // 用户同意的消息模板id
	// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
		await wx.getSetting({
			withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
			success: function(res) {
				console.log(res, '调起授权界面弹窗');
				// 调起授权界面弹窗
				if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
					// 每次执到这都会拉起授权弹窗
					wx.requestSubscribeMessage({ // 调起消息订阅界面
						tmplIds: [...templateId],
						success(res) {
							console.log(res, '订阅消息 成功 ');
						},
						fail(err) {
							console.log(err, "订阅消息 失败 ");
						},
						complete(config) {
							console.log(config, "订阅消息 最终结果 ");
							let Ids = []
							for (let i in config) {
								if (config[i] == 'accept') {
									Ids.push(i)
								}
							}
							let params = {
								customerId: uni.getStorageSync(
									'USERDATA').id,
								templateIds: Ids,
								status: "accept"
							}
							that.$http.user.getAddUserStatus(params)
								.then(res => {
									console.log(res,
										'向后端传递订阅消息 最终结果');
								})
						}
					})
				} else {
					console.log('订阅消息未开启')
				}
			},
			fail: function(error) {
				console.log(error);
			}
		})
}