H5跳转微信小程序流程

最近有个活要做H5跳转微信小程序的功能，网上查了资料，研究了下，下面做个总结，希望能帮到你。

官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/...
两个很有帮助的博客:
https://blog.csdn.net/weixin_43541368/article/details/121919811
https://blog.csdn.net/x550392236/article/details/108082246

一、按步骤先进行准备工作（官方文档最权威）
1、已认证的服务号
2、绑定JS接口安全域名
3、引入jweixin-1.6.0.js

这些是准备工作，可以用微信开发者工具去调试，能看到jweixin-1.6.0.js是否调用成功，<wx-open-launch-weapp>是否初始化成功。

二、写代码（直接用官方提供的用例，样式等功能调完再说）

<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  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>

我经过测试，发现在微信开发者工具没办法拉起微信小程序，但是会报错“launch:fail”。
这时候直接发到线上去微信环境去点击跳转，就能跳转了。
按钮监听事件建议本地调试的时候加上，不然点了按钮没反应，不好排查问题。

三、其他注意事项
1、版本
微信版本要求为：7.0.12及以上
系统版本要求为：iOS 10.3及以上、Android 5.0及以上
JS接口文件：1.6.0以上 （例如：http://res.wx.qq.com/open/js/jweixin-1.6.0.js）

2、跳转有appid和path就足够了，username也就是小程序原始ID可以不必传。

3、path有的人说需要加后缀.html，我验证过最新版本可以不加，可能微信处理过这个bug。

4、<wx-open-launch-weapp>中必须用<script type="text/wxtag-template"></script>标签包裹。

5、页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；

6、遇到按钮不显示，宽高为0的情况，按照博客里的操作处理，给wx-open-launch-weapp设置display:block; width:100%; height:100%;

这里需要注意，在微信环境下才能看到按钮，所以要去微信开发者工具中调试，其他的情况我没遇到，这里不就介绍了。

7、这个建议不错，我采用了，方便管理样式，大家可以参考。

正文结束，以上就是我开发遇到的一些问题，希望能帮到大家。
当然，有任何疑问评论区留言，我也会看到，一一给大家回复。