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

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

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

使用说明

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

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

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

另外,需要注意以下几点:

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

开放对象

  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>

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

原创文章,作者:ECHO陈文,如若转载,请注明出处:https://www.luweipai.cn/html/1660527271/