微信订阅消息（vue2）

最新推荐文章于 2024-04-08 11:47:47 发布

leons20

最新推荐文章于 2024-04-08 11:47:47 发布

阅读量553

点赞数

分类专栏： VUE 文章标签：微信 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_39078894/article/details/129238079

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章提供了一种解决wx-open-subscribe组件在iOS设备上不兼容的方法，通过原生JavaScript创建元素并添加事件监听来实现订阅按钮的功能。在success和error事件中处理订阅状态，并根据用户响应更新数据。

摘要由CSDN通过智能技术生成

不兼容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();请求后端
    },