微信公众号订阅消息 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>


<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出来，若要查看传入的参数，可以在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;

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

知识付费对接微信公众号订阅消息
订阅通知是一个用户主动订阅.服务号按需下发的通知能力.使用过程请遵守<微信公众平台服务协议><微信公众平台运营规范>. 用户在前述场景主动订阅后,服务号可通过接口向用户发送订阅 ...
vue开发微信公众号订阅消息踩坑记录
今天做了一个微信公众号的网页开发, 使用的是vue做的开发,没错,就是微信公众号的开发,这都2021年了, 还有人有开发微信公众号的需求,我也是晕了, 微信公众号是我开发中感觉,最难调试的开发工作,没 ...
PHP 对接微信公众号订阅消息详细教程
订阅通知是一个用户主动订阅.服务号按需下发的通知能力.使用过程请遵守<微信公众平台服务协议><微信公众平台运营规范>. 用户在前述场景主动订阅后,服务号可通过接口向用户发送订阅 ...
微信公众号订阅号开发的学习（二）：获取用户发送的消息、简单的自动回复、自定义菜单
获取用户发送的消息基础微信服务器会发送两种类型的消息给开发者服务器. get请求验证服务器的有效性 post请求微信服务器会将用户发送的数据转发到开发者服务器上实现基于微信公众号订阅号开发 ...
微信小程序——订阅消息与微信公众号模板消息
订阅消息一次性订阅消息某个按钮(并且只能是用户自己就手动点击的)操作调起来这个允许授权弹窗,允许通知之后也只能发送一次消息.即便点上[总是保持一上选择,不再询问]也只是在下次点击同一个按钮时默认允 ...
微信公众号订阅通知（go+vue）
微信公众号订阅通知准备工作: 用户订阅: 下发订阅: 注: 最近刚好需要做一个订阅通知的方案,简单的整理下做的步骤. 准备工作: 公众号功能-添加功能插件找到并添加订阅通知在订阅通知中设 ...
微信公众号三方平台开发【代微信公众号接收消息事件并响应】
今天要讲的是代微信公众号接收消息并进行回复,这里要用到的就是咱们之前在微信公众号三方平台开发[帐号注册.平台创建]里写到的"公众号消息与事件接收URL",在接收的目标方法里,我们首 ...
Java微信公众号发送消息-保姆级教程附源码
目录 1. 概念说明: 2. 开发准备: 3. 测试demo(更改配置信息即可使用) 3.1. 服务器配置 3.1.1.配置填写说明 3.1.2.校验服务器有效性: 3.1.3.URL后端接口代码和校 ...
【微信开发第二章】SpringBoot实现微信公众号普通消息和模板消息回复
前言在进行微信公众号业务开发的时候,微信公众号的消息回复是非常重要的一环,而微信公众号消息回复分为:普通消息自动回复和模板消息回复.该篇文章会先使用微信测试工具过一遍流程,再使用代码进行实现,并且每 ...
asp群发微信公众号模板消息代码asp写的
asp群发微信公众号模板消息代码asp写的,主要用于对已经入库的会员群发模板消息 <% '=群发模板信息=转载请保留作者信息:18611436777======== If Request(&qu ...