H5应用打开微信小程序【wx-open-launch-weapp】提前说明：该文章只提及前端使用的基本流程，其中涉及si

提前说明：该文章只提及前端使用的基本流程，其中涉及signature等具体加密方式并没提及！！！（后端工作）

基本步骤

npm install weixin-js-sdk@1.6.0；

import wx from "weixin-js-sdk";

 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

基本使用流程就在这里，接下来还有几点需要额外注意；

1.wx.config的调用之前需要配置Js安全域名（前端项目部署域名），并且只能添加域名形式的地址，不支持IP，意味着该功能不支持本地调试。否则会提示：invaild:domain。

2.标签不支持静默调用点击事件（无效），必须手动触发点击才会弹窗提示是否跳转小程序！

3.该标签的样式书写只支持在标签内部的标签中书写，如果想保持基本布局，可在外层定义一个盒子，标签使用**绝对定位 + 100% **的布局方式完成基本布局（可参考截图）

4.点击标签跳转小程序之前，标签需要的相关跳转参数必须已经配置完成，不能在点击时去动态生成小程序跳转需要的参数，会读取不到参数。（可在进入页面之前或其他操作之后静默生成相关参数），动态参数可使用另外一种方式跳转小程序（Short Link）

5.点击标签会弹窗提示是否跳转小程序，点击取消或者允许触发的都是lauch事件，并且返回的相关参数也是一样的，无法区分用户点击的是取消还是允许！！！（这一点很坑，现在也没找到什么比较好的处理方案）

6.如果H5想在小程序关闭之后，做一些后续操作，没有相关api可以在H5监听到小程序的关闭，可以结合以下事件去判断H5页面的再次展示： （潜在问题 :屏幕息屏再打开也会触发这个事件）

document.removeEventListener('visibilitychange'）
document.visibilityState === 'visible'

以上就是笔者在实际开发中踩过的一些坑。