微信公众号订阅消息 wx-open-subscribe 的实现及闭坑指南

先来个实现成功的效果图：

主要看图片底部 success 的日志  status 为 accept 时表示用户点击了授权，为 reject 时表示用户拒绝了授权。

 

 下面来看实现，本文采用的是uniapp框架，运行在微信浏览器H5端

避坑指南：

1. wx-open-subscribe 标签，在安卓显示，IOS不显示？

解决方案：在 manifest.json 文件路由模式改为 hash 。并且在访问你的应用第一个页面的时候，就进行 wx.config 配置。

2. wx-open-subscribe 标签样式设置很麻烦？或者设置了不生效？

解决方案：在外层包裹一个div，复杂的样式写在外层，开放标签尽量写简单的样式，不生效的话可以借鉴我后面贴的代码。

3. wx-open-subscribe组件，怎样监听用户点击“取消”、“允许”？为什么官方的success事件返回没有例如：{ errMsg: "subscribe:ok", subscribeDetails: "{"TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I":"{\"status\":\"accept\"}"}，而是返回

解决方案：success里面接收的参数要写成success({detail})格式才行，写成success(e)就不会有e.detail。

			<wx-open-subscribe id="subscribe-btn" ref="subscribeBtn"
				style="position: fixed;z-idnex:9999; top: 0px, left: 0px;bottom:0px;right:0px;width: 100%;height: 100%;"
				template="Qw2bWImUYSgS5y9UoAGa-fd3RUC2aXZ5m25MApxIpA4" id="subscribe-btn">
				<!-- Qw2bWImUYSgS5y9UoAGa-fd3RUC2aXZ5m25MApxIpA4  测试 -->
				<!-- NtmNRrJl5FMKND8FuyZhZxL_jbRLNg0-h-iNCr0z0ak  正式 -->
				<script type="text/wxtag-template">
					<div style="position: fixed;z-idnex:9999; top: 0px, left: 0px;bottom:0px;right:0px;width: 100%;height: 100%;" />
			  </script>
			</wx-open-subscribe>	
 
// wx-open-subscribe 原生绑定点击事件
			this.$nextTick(() => {
				var btn = this.$refs.subscribeBtn;
				btn.addEventListener('success', ({detail}) => {
					console.log('success1', detail);
					
				});
				btn.addEventListener('error', ({detail}) => {
					console.log('fail1', detail);
				
				});
			})

4. wx-open-subscribe组件外层的div，点击事件不生效？

解决方案：wx-open-subscribe 组件的事件不会冒泡，可以在 success 返回后做事件处理。

实现代码：

		<view class="subscribeBlock" v-if="showSubscribe">
			<wx-open-subscribe id="subscribe-btn" ref="subscribeBtn"
				style="position: fixed;z-idnex:9999; top: 0px, left: 0px;bottom:0px;right:0px;width: 100%;height: 100%;"
				template="Qw2bWImUYSgS5y9UoAGa-fd3RUC2aXZ5m25MApxIpA4" id="subscribe-btn">
				<!-- Qw2bWImUYSgS5y9UoAGa-fd3RUC2aXZ5m25MApxIpA4  测试 -->
				<!-- NtmNRrJl5FMKND8FuyZhZxL_jbRLNg0-h-iNCr0z0ak  正式 -->
				<script type="text/wxtag-template">
					<div style="position: fixed;z-idnex:9999; top: 0px, left: 0px;bottom:0px;right:0px;width: 100%;height: 100%;" />
			  </script>
			</wx-open-subscribe>
		</view>

 js

 
<script>
	var that;
 
	export default {
		components: {
			search
		},
		data() {
			return {
				showSubscribe: false,
			};
		},
		onReady() {
			// wx-open-subscribe 原生绑定点击事件
			this.$nextTick(() => {
				var btn = this.$refs.subscribeBtn;
				btn.addEventListener('success', ({detail}) => {
					console.log('success1', detail);
					this.clickSubscribe()
				});
				btn.addEventListener('error', ({detail}) => {
					console.log('fail1', detail);
					this.clickSubscribe()
				});
			})
		},
		onLoad(option) {
 
		},
		methods: {
			clickSubscribe() {
				console.log('点击了订阅');
				this.showSubscribe = false;
 
			},
			goTest() {
				// let url = '/pages/test/test'
				// this.goOtherPages(url)
			},
 
		}
	};
</script>

 css

 
	.subscribeBlock {
		z-index: 99999;
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
	}

 jssdk封装文件:  需要node安装 jweixin-module ，具体安装可以百度查一下

import config from "./config.js";
 import api from "./api.js";
 import myRequest from "./request.js";
 
let jweixin = require('jweixin-module')  
Vue.prototype.$wx = jweixin
 
 var wxjssdk = (_wx) => {
 	return new Promise(rr => {
 		let url = location.href;
 		if (url.indexOf('http://localhost') !== -1) url = config.http_url
 		console.log('url', url)
 		let data = {
 			url: encodeURIComponent(url)
 		}
 		myRequest.request(api.sdk.wechatJsSdkTicket, data).then(res => {
			console.log('wechatJsSdkTicket',res);
 			let configData = res.data;
			console.log('configData',configData);
 			_wx.config({
 				// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 				appId: configData.appId, // 必填，公众号的唯一标识
 				timestamp: configData.timestamp, // 必填，生成签名的时间戳
 				nonceStr: configData.nonceStr, // 必填，生成签名的随机串
 				signature: configData.signature, // 必填，签名
 				jsApiList: ['updateAppMessageShareData', 'getNetworkType',
 					'updateTimelineShareData', 'getLocation'
 				],
 				openTagList: ['wx-open-launch-weapp','wx-open-subscribe']
 			});
 			_wx.ready(function(res) {
 				console.log('wx-jssdk-ready', res)
 				rr(true)
 				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
 			});
 			_wx.error(function(err) {
 				console.log('wx-jssdk-error', err)
 				rr(false)
 				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
 			});
 		})
 	})
 }
 export default wxjssdk;