最近做一个需求，从 H5 跳转小程序。微信虐我千百遍，我待微信如初恋。
踩完坑把实现做个记录
微信官方文档：developers.weixin.qq.com/doc/offiacc…
主要是通过微信开放标签 wx-open-launch-weapp 实现
开放对象：
- 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
- 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
具体实现，以 react 为例
- 绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
- 引入JS文件 在需要调用JS接口的页面引入如下JS文件：res.wx.qq.com/open/js/jwe… （支持https）；如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）
本例在 <%document.ejs 文件中
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 通过config接口注入权限验证配置并申请所需开放标签，通过ready接口处理成功验证，通过error接口处理失败验证
在 ComponentDidMount 中 code 如下
$.ajax({
type: 'POST',
data: {url: window.location.href},
url: 'https://**.**.cn/api/backend-seller/wechat/open/sign', //规定连同请求发送到服务器的数据；
dataType: "json",
success: function (data) {
const config = {
appId: "wx********", // 必填，公众号的唯一标识
timestamp: data.data.timestamp, // 必填，生成签名的时间戳
onceStr: data.data.nonceStr, // 必填，生成签名的随机字符串
signature: data.data.signature, // 必填，签名
}
window.wx.config({
...config,
jsApiList: ['chooseImage'], // 安卓上必填一个，随机即可
openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})
window.wx.ready(function () {
var btn = document.getElementById('lottery-btn');
btn.addEventListener('success', function (e) {
console.log('success', e.detail);
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
})
},
})
- 在 JSX 中使用标签
<wx-open-launch-weapp
id="lottery-btn"
username="gh_******" // 必填，所需跳转的小程序原始ID，在（微信公众平台-设置-基本设置-账号信息）中查看
path="pages/home/index?user=123&action=abc" // 非必填，所需跳转的小程序内页面路径及参数
>
<script type="text/wxtag-template">
<img style={{width:'48px',height:'66px',marginRight:'25px'}} src='https://onebillion-cloud-prod.oss-cn-shanghai.aliyuncs.com/1625897988309.png' alt='' />
</script>
</wx-open-launch-weapp>
注意点
- config 中的 appId 是公众号而非跳转小程序的 appId
- 一个页面可以同时存在多个跳转按钮，但是 config 要和标签 id 相应绑定
wx-open-launch-weapp插槽中模版的样式是和页面隔离的，标签样式无法解析rem，要用px表示尺寸- 标签本身可以设置样式，因此对其设置
absolute，外部按正常方式写，只是样式多一个relative即可 - 内部高度无法使用百分比，需要传入真实高度，因此不适用不知道外部高度的场景
