不兼容IOS
HTML部分
<wx-open-subscribe
:template="templateIdArr"
id="subscribe-btn"
@success="successSubscribe"
@error="subErrorSubscribe"
style="
width: 100%;
text-align: center;
height: 100%;
display: block;
"
>
<script type="text/wxtag-template" slot="style">
<style>
.subscribe-btn {
display:inline-block;
width: 100%;text-align: center;margin-left: 15px auto;color: #fff;background-color: #409eff;border-radius: 3px;height: 40px;line-height: 40px;font-size: 14px;
}
</style>
</script>
<script type="text/wxtag-template">
<p class="subscribe-btn">
提交
</p>
</script>
</wx-open-subscribe>
Script部分
successSubscribe(e) {
let subdetail = JSON.parse(e.detail.subscribeDetails);
this.templateIdArr.map((item, index) => {
if (subdetail[item].indexOf("accept") > -1) {
this.pcform.tps.push(item);
}
});
// this.submitForm();请求后端
},
subErrorSubscribe(e) {
// this.submitForm();请求后端
console.log("用户拒绝了订阅消息", e);
},
原生嵌入写法兼容ios:
(备注:请求token要在mounted中执行,否则获取不到DOM)
<div id="sub" style="width: 100%"></div>
//methods方法内
createSubscribeBut() {
let script = document.createElement("script");
script.type = "text/wxtag-template";
script.text = `<p class="mask-sub-btn" id="btn2" style="width: 100%;text-align: center;margin: 15px auto;color: #fff;background-color: #409eff;border-radius: 4px;height: 40px;line-height: 40px;font-size: 14px;">提交</p>`;
let html = `<wx-open-subscribe template="${this.templateIdArr}" id="share-success-subscribe-btn" style="width:100%;text-align:center;height: 100%;display: block;">${script.outerHTML}</wx-open-launch-weapp>`;
document.getElementById("sub").innerHTML = html;
let subBtn = document.getElementById("share-success-subscribe-btn");
this.watchSub(subBtn);
},
//监听订阅事件
watchSub(subBtn) {
let self = this;
subBtn.addEventListener("success", function (e) {
let subdetail = JSON.parse(e.detail.subscribeDetails);
self.templateIdArr.map((item, index) => {
if (subdetail[item].indexOf("accept") > -1) {
self.pcform.tps.push(item);
}
});
});
subBtn.addEventListener("error", function (e) {
console.log(e);
});
// this.submitForm();请求后端
},