微信H5如何打开跳转到小程序

今天发现微信公众平台有几个开发标签可以供大家使用，今天我们重点来说一下，微信H5跳转小程序标签wx-open-launch-weapp

使用说明

所有开放标签都能像普通的 HTML 标签一样在页面中直接使用，不需要再进行额外的处理。

如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<script type="text/wxtag-template"></script>进行包裹。另外，对于具名插槽还需要通过slot属性声明插槽名称，下文标签插槽中的 default 插槽为默认插槽，可不声明插槽名称。

对于标签事件，均可通过event.detail获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代event.detail中的内容。

另外，需要注意以下几点：

页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
对于有 CSP 要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。

开放对象

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

直接上代码

<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>

以上这篇微信H5如何打开跳转到小程序就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。