先來個實現(xiàn)成功的效果圖：

主要看圖片底部?success 的日志? status 為 accept 時表示用戶點擊了授權，為 reject 時表示用戶拒絕了授權。

?

?下面來看實現(xiàn)，本文采用的是uniapp框架，運行在微信瀏覽器H5端

避坑指南：

1.?wx-open-subscribe 標簽，在安卓顯示，IOS不顯示？

解決方案：在 manifest.json 文件路由模式改為 hash 。并且在訪問你的應用第一個頁面的時候，就進行 wx.config 配置。

2.?wx-open-subscribe 標簽樣式設置很麻煩？或者設置了不生效？

解決方案：在外層包裹一個div，復雜的樣式寫在外層，開放標簽盡量寫簡單的樣式，不生效的話可以借鑒我后面貼的代碼。

3. wx-open-subscribe組件，怎樣監(jiān)聽用戶點擊“取消”、“允許”？為什么官方的success事件返回沒有例如：{ errMsg: "subscribe:ok", subscribeDetails: "{"TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I":"{\"status\":\"accept\"}"}，而是返回

解決方案：success里面接收的參數(shù)要寫成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 返回后做事件處理。

實現(xiàn)代碼：

<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 = jweixinvar wxjssdk = (_wx) => {return new Promise(rr => {let url = location.href;if (url.indexOf('http://localhost') !== -1) url = config.http_urlconsole.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出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過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信息驗證后會執(zhí)行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數(shù)中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口，則可以直接調用，不需要放在ready函數(shù)中。});_wx.error(function(err) {console.log('wx-jssdk-error', err)rr(false)// config信息驗證后會執(zhí)行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數(shù)中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口，則可以直接調用，不需要放在ready函數(shù)中。});})})}export default wxjssdk;

總結

以上是生活随笔為你收集整理的微信公众号订阅消息 wx-open-subscribe 的实现及闭坑指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。