H5吊起小程序

背景

前端时间公司一个项目需要这样一个功能：微信公众号的页面需要跳转至小程序。于是我准备开始研究下。

探索

我通过查阅微信官方文档，终于让我找到了。

微信跳转小程序开放标签 wx-open-launch-weapp

开放前提：

1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

话不多说，直接上代码：

    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index?user=123&action=abc"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </script>
    </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>
复制代码

不详的地方，请关注微信官方文档：developers.weixin.qq.com/doc/offiacc…

最后

如遇任何问题，欢迎留言讨论，共同成长