Wechat official account subscription message Wx open subscribe implementation and pit closure guide

Let's start with a successful rendering ：

Mainly look at the bottom of the picture  success Log   status by accept It means that the user clicked authorization , by reject Indicates that the user has rejected the authorization .

 

  Let's see the implementation , This article uses uniapp frame , Run in wechat browser H5 End

A pit guide ：

1. wx-open-subscribe label , Display on Android ,IOS No display ？

Solution ： stay manifest.json The file routing mode is changed to hash . And when you visit the first page of your application , it wx.config To configure .

2. wx-open-subscribe Label style setting is troublesome ？ Or set not to take effect ？

Solution ： Wrap a... In the outer layer div, Complex styles are written on the outer layer , Try to write simple styles for open labels , If it doesn't work, you can learn from the code posted later .

3. wx-open-subscribe Components , How to monitor user clicks “ Cancel ”、“ allow ”？ Why the official success The event returns no such as ：{ errMsg: "subscribe:ok", subscribeDetails: "{"TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I":"{\"status\":\"accept\"}"}, It's going back to

Solution ：success The parameters received inside should be written as success({detail}) Format is OK , It's written in success(e) There will be no 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   test  -->
				<!-- NtmNRrJl5FMKND8FuyZhZxL_jbRLNg0-h-iNCr0z0ak   formal  -->
				<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  Native binding click event 
			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 The outer layer of the component div, Click event doesn't work ？

Solution ：wx-open-subscribe Component events do not bubble , Can be in  success Do event processing after returning .

Implementation code ：

		<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   test  -->
				<!-- NtmNRrJl5FMKND8FuyZhZxL_jbRLNg0-h-iNCr0z0ak   formal  -->
				<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  Native binding click event 
			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(' Click subscribe ');
				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 Package file :  need node install  jweixin-module , Baidu can check the specific installation

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, //  Turn on debugging mode , Call all api The return value of will be on the client side alert come out , To see the parameters passed in , Can be in pc End open , The parameter information will go through log play , Only in pc Only when the end is printed .
 				debug: false, //  Turn on debugging mode , Call all api The return value of will be on the client side alert come out , To see the parameters passed in , Can be in pc End open , The parameter information will go through log play , Only in pc Only when the end is printed .
 				appId: configData.appId, //  Required , The only sign of official account number 
 				timestamp: configData.timestamp, //  Required , Generate signature timestamp 
 				nonceStr: configData.nonceStr, //  Required , Generate a random string of signatures 
 				signature: configData.signature, //  Required , 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 It will be executed after information verification ready Method , All interface calls must be in the config After the interface gets the result ,config Is an asynchronous operation of a client , So if you need to call the relevant interface when the page is loaded , The relevant interface shall be ready The function is used to ensure proper execution. . Interface called only when triggered by the user , You can call , No need to put ready Function .
 			});
 			_wx.error(function(err) {
 				console.log('wx-jssdk-error', err)
 				rr(false)
 				// config It will be executed after information verification ready Method , All interface calls must be in the config After the interface gets the result ,config Is an asynchronous operation of a client , So if you need to call the relevant interface when the page is loaded , The relevant interface shall be ready The function is used to ensure proper execution. . Interface called only when triggered by the user , You can call , No need to put ready Function .
 			});
 		})
 	})
 }
 export default wxjssdk;