微信浏览器里面直接调起APP应用: 点击微信文档 微信最新SDKnpm包地址 ios系统config:invalidsignature ios获取到的url永远是你进入这个项目的第一个url,这样的话你请求签名就会变成动态url不一致导致签名失败。你可以到签名失败的那个页面手动刷新一次,然后你会发现此时签名就成功了,因为刷新后获取的第一个url就是你当前的页面url。设置js安全域名、获取timestamp,nonceStr,signature参考资料 对于我自己的理解是微信永远会在当前页面缓存上一个页面的地址,所以需要
let u = navigator.userAgent
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
if (!isAndroid && !getQueryString('iosr') ) {// 由于微信浏览器缓存里面的还是上一个页面的地址,所以需要重定向地址,还必须是replace,而且地址还必须是自己组装的
window.location.replace(`http://www.xxx.co/index?iosr=true`)
return
}
let wxdata = yield call(api.getgzhsign, {url: location.href}); // 请求接口
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: wxdata?.data?.app_id, // 必填,公众号的唯一标识
timestamp: wxdata?.data?.timestamp, // 必填,生成签名的时间戳
nonceStr: wxdata?.data?.nonceStr, // 必填,生成签名的随机串
signature: wxdata?.data?.signature,// 必填,签名
jsApiList: ['onMenuShareAppMessage'], // 必填,需要使用的JS接口列表,如果不用的话可以随便给一个
openTagList: ['wx-open-launch-app'] // 可选,需要使用的开 放标签列表,例如['wx-open-launch-app']
});
wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
// wx.checkJsApi({
// jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
// success: function (res) {
// console.log('可用')
// },
// fail: (err) => {
// console.log(err, '不可用')
// }
// });
})
setTimeout(() => {
let btn: any = document.getElementById('launch-btn')
btn.addEventListener('launch', e => {
// 在此处可设置粘贴板内数据,数据是传递给 app 的参数进,
alert('success');
});
btn.addEventListener('error', e => {
// 在此处可设置粘贴板内数据,数据是传递给 app 的参数进,
alert(JSON.stringify(e.detail));
alert('儿童与哦');
// 唤醒失败的情况下,可用于降级处理比如在此处跳转到应用宝
});
}, 1000);
}
tsx文件
<div className="wxBox">
{wxdata && <wx-open-launch-app
id="launch-btn"
appid='开放平台appid,非公众号appid'
extinfo="和ios和安卓定义好参数类型和值,这边传递"
style={{display: "block", width: '5.6rem', height: '1.2rem'}}
>
<script type="text/wxtag-template">
<button style={{display: 'block', width: '100%', height: '100vh', border: 'none', }} >打开APP</button>
</script>
</wx-open-launch-app>}
</div>
注意:react button上面加class是无效的,直接写行内样式,可以不要那几个字,把wxBox盖到定位,盖到自己写的拉起APP的样式上面最简单, 而且必须是绑定的域名上面去测试,不然会报错