H5跳转微信小程序--踩过的那些坑

前言

需求场景：通过微信官方提供的开放标签，开发者可以使用此标签进行h5网页跳转到微信小程序页面。

步骤

1、绑定域名

2、引入JS文件（1.6.0版本）

3、通过config接口注入权限验证配置并申请所需开放标签

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

4、开放标签

官方demo

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>

注意

• path路径必须带.html(官方没有说明)
• 官方解释，对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"><script>进行代替，来包裹插槽模版和样式。

改写demo

<wx-open-launch-weapp id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc">
  <script type="text/wxtag-template">
    <div class="btn">
        打开小程序
    </div>
  </script>
</wx-open-launch-weapp>
})

自定义样式问题

#launch-btn{
  width: 8.9333rem;
  height: 4.56rem;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity: 0;
}

<wx-open-launch-weapp id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc">
  <script type="text/wxtag-template">
    <div class="btn">
        打开小程序 打开小程序 打开小程序 打开小程序 打开小程序
    </div>
  </script>
</wx-open-launch-weapp>
})

总结

1. 需要配置JS接口安全域名
2. jssdk的版本1.6.0
3. path需要加.html
4. 自定义样式问题，这里使用定位的方式，并用文字撑开了高度

参考文档

微信中h5网页跳转小程序

H5跳转小程序点击按钮各种样式注入无法撑开问题

微信小程序官方文档