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

async function getSignature() {
  const thisPageUrl = window.location.href.split('#')[0];
  const response = await requestWxSignature(thisPageUrl); // 向后端请求拿到签名
  if (response) {
    return response.data;
  }
}

<!-- 打开app -->
 <wx-open-launch-app
  id="launch-btn"
  appid="公众号appid"
  @launch="handleLaunchFn"
  @error="handleErrorFn"
>
  <!-- 在vue的template中 -->
  <script type="text/wxtag-template">
    <style>.btn { padding: 40px; border: 1px solid blue; }</style>
    <button class="btn">打开App</button>
  </script>
  <!-- 在其他环境 -->
  <template>
    <style>.btn { padding: 40px; border: 1px solid blue; }</style>
    <button class="btn">打开App2</button>
  </template>
</wx-open-launch-app>

<!-- 打开小程序 注意，两者标签不一样，接受的属性也不一样 -->
<wx-open-launch-weapp
  id="launch-btn"
  username="原始小程序id"
  path="小程序路径/page/index/index.html"
  @launch="handleLaunchFn"
  @error="handleErrorFn"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 40px; border: 1px solid blue; }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>

<script>
const start = async () => {
  const launchBtn=document.getElementById('launch-btn')
  launchBtn.addEventListener('error', function (e) {
    console.log('用户拒绝跳转或跳转异常', e.detail)
  })

  const data = await getSignature()
  const { appId, timestamp, nonceStr, signature} = data;
  wx.config({
    appId,
    timestamp,
    nonceStr,
    signature,
    jsApiList: ['chooseImage'], // 安卓上必填一个，随机即可
    openTagList: ['wx-open-launch-weapp'],  // wx-open-launch-weapp 打开小程序， wx-open-launch-app 打开app
  });

  wx.ready(() => {
    console.log('ready');
  });

  wx.error(err => {
    console.log('err', err);
  });
}
</script>

<!-- 支持一次性和长期订阅 根据模块id而定 -->
<wx-open-subscribe template="your templateId" id="subscribe-btn">
  <template slot="style">
    <style>
      .subscribe-btn {
        color: #fff;
        background-color: #07c160;
        display: inline-block;
        padding: 50px;
      }
    </style>
  </template>
  <template>
    <button class="subscribe-btn">
      模版消息订阅
    </button>
  </template>
</wx-open-subscribe>

<script>
const start = async () => {
  var btn = document.getElementById('subscribe-btn');
  btn.addEventListener('success', function (e) {
    console.log('success', e.detail);
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });

  const config = await getSignature()
  wx.config({
    ...config,
    jsApiList: ['chooseImage'], // 安卓上必填一个，随机即可
    openTagList: ['wx-open-subscribe'], // 填入打开小程序的开放标签名
  })
}
start()
</script>