微信开放标签:微信网页H5跳转微信小程序、APP

本文由清尘发表于2020-07-14 10:40属于移动前端分类

微信官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

开放标签使用:

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="/a/b/c.html?d=1&e=2#fg"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>

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


需要注意的地方:

1. 首先必须接入JS-SDK 可以参考 : 微信网页开发:JS-SDK使用
2. 如果是用微信开发测试帐号,目前不支持开放标签。 会无法显示 (目前只对已认证的服务号开放)
3. 目前如果是直接复制官方文档上面的代码, button标签没有闭合,会不显示出按钮。(后面会不会修复文档就不知道了)
4. 转跳的路径上需要加上.html 否则路径不能正常跳转。 如不填,会直接跳转首页。