先来个实现成功的效果图:
主要看图片底部 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;