H5 调用微信小程序开放标签

h5 页面在微信中要使用微信提供的方法及微信的组件时；

引入 jweixin 注： weixin cdk 要用1.6.0以上的

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在 main.js 中注册

Vue.config.ignoredElements = ['wx-open-subscribe'];

我们这边是写在 mixins 中； App.vue 中混入

import { config } from "./mixins/wxConfig.js";

mixins: [config],

wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: d.appId, // 必填，公众号的唯一标识
              timestamp: d.timestamp, // 必填，生成签名的时间戳
              nonceStr: d.nonceStr, // 必填，生成签名的随机串
              signature: d.signature,// 必填，签名
              jsApiList: ['getNetworkType','updateAppMessageShareData','updateTimelineShareData'], // 必填，需要使用的JS接口列表
              openTagList:['wx-open-subscribe']
            });

方法放在 jsApiList 数组中，调用组件放在openTagList 数组中；

wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
  config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
  则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
  则可以直接调用，不需要放在ready函数中
});

wx-open-subscribe 的用法

    <wx-open-subscribe :template="templateKey" id="subscribe-btn-one" @success="subscribeSuccess">
        <script type="text/wxtag-template" slot="style">
          <style>
            .subscribe-btn-one {
              height: 24px;
              line-height: 24px;
              text-align: center;
              padding: 0 6px;
              font-size: 12px;
              border: 2px solid #ff6e23;
              border-radius: 12px;
              color: #ff6e21;
              background: #fff;
            }
          </style>
        </script>
        <script type="text/wxtag-template">
          <div class="subscribe-btn-one">订阅通知</div>
        </script>
      </wx-open-subscribe>
      
      <script>
        subscribeSuccess (e) {
          // 如果直接打印e，在控制台看到的是一个事件，看不到具体的信息
          // 直接打印e.detail就可以看到返回的信息了
          let subs = e.detail.subscribeDetails;
          let subsStr = JSON.stringify(subs);
          if (subsStr.indexOf('accept') !== -1) {
            this.onPrivateTemplate("/bind_private_template")
            this.subscribeNotify()
          }
        }
       </script>