关于React H5 页面调用微信wx-open-launch-weapp标签跳转微信小程序

2023-07-22 10:57:52

关于React H5 页面调用微信wx-open-launch-weapp标签跳转微信小程序

第一步（肯定是阅读微信的文档啊）

第一步（肯定是阅读微信的文档啊）

微信官方开放标签使用文档

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

这个安全域名是你这个h5页面或者项目的域名去微信后台绑定其实就是告诉微信你要用这个域名去调用jssdk

2.引入JS文件

export function importJs() {
    const script = document.createElement("script"); //创建一个script标签
    script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";//微信的js文件 
    script.async = true;
    document.body.appendChild(script); //将这个script标签拼接进HTML的body里
}

因为我喜欢用类组件所以我把引入文件写成了一个function 在componentDidMount的时候就引入js文件
如果需要https的话直接改成https就可以了微信这里是支持https的（

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

备注：支持使用 AMD/CMD 标准模块加载方法加载。）

3.配置wx.config

在需要调用js接口的页面引入js文件后配置wx.config 需要生成签名signature

     let url = location.href.split('#')[0];
     url = encodeURIComponent(url); //这里需要encode一下 因为微信生成签名的算法需要把url encode 如果不encode可能在后端调用微信生成签名后 你配置config会报63002 无效的签名
    const res = await fetch(`https://让后端同学给你出接口你把当前页面的url传给他?url=${url}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
    });
    const ret = await res.json();  //这里我没有封装 直接裸奔了 大家自己写的时候 最好封装一下 养成一个好习惯
    wx.config({
        debug: false,//改为true就是打开微信的debug 模式 微信开发者工具 会在上面弹窗 弹出errmsg 真机的话 会弹出类似ant-mobile的modal框一样的弹框 显示errmsg
        appId: ret.appid, //微信后台绑定js接口安全域名的公众号的appid 可以让后端写成常量 记得一定让后端返回给你
        timestamp: ret.timeStamp, //时间戳 随机 后端自己决定 但是一定要让后端同学把这个参数返回给你 这种格式的时间戳1620543538
        nonceStr: ret.nonceStr, //随机字符串 后端同学自己随机 记得让他给你返回这个字段
        signature: ret.sign,//生成的签名 我们最重要的字段 
        jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "uploadVoice", "downloadVoice", "chooseImage", "previewImage", "uploadImage", "downloadImage", "translateVoice", "getNetworkType", "openLocation", "getLocation"], //jsapi 微信的一些功能 我这里吧全部都加上了，这个不能为空 至少要有一个
        openTagList: ["wx-open-launch-weapp"], // 微信返回给我们的开放标签 h5跳转微信小程序我们用 wx-open-launch-weapp这标签就可以了
    });

在调试阶段可以把debug模式打开 63002 是签名无效
看一下自己给后端的url 是否encode过
微信 JS 接口签名校验工具

jsapi ticket 需要用微信的接口去拿的让后端同学找一下文档搞定一下（有空再出一下这个）

提示errmsg wx.config ok 你就成功了95%

然后是你的页面

<wx-open-launch-weapp
    id="launch-btn"
    username={`${targetOriginalId}`} //username 是要跳往的小程序的原始id gh开头的
    path={`${targetUrl}.html`} 跳转到小程序的路径 一定要在后面加.html 这是一个坑
    style={{ marginLeft: 'auto', width: '80px', height: '30px', backgroundColor: '#ff3333', lineHeight: '30px', textAlign: 'center', color: '#eee', borderRadius: '15px' }}
>
    <script type="text/wxtag-template" > //微信官方文档上是template标签这个 默认是display none的 如果你之前用这个标签没显示button 很正常 react 不支持这个template标签 我们得用script 这是一个坑 
        <div style={{ width: '80px', height: '30px', backgroundColor: '#ff3333', lineHeight: '30px', textAlign: 'center', color: '#eee', borderRadius: '15px' }}>立即领取</div>
    </script>
</wx-open-launch-weapp>

这里我把button的触摸范围改的和wx-open-launch-weapp 这个标签一样大，应该是触碰到这这个开放标签采取跳转小程序的，而不是触碰到button （我也不确定待验证…）

var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });

可以加一个给标签加一个监听事件
这就是配置成功后的console.log 建议调试的时候打开debug模式，调试成功在关掉

这是一个h5跳转小程序的示例，点击打开

--------------------------这是分割线-------------------------------------

以上就是h5网页跳转微信小程序的步骤
第一次写文档激动地都不知道说啥了
基本这一套步骤走下来就成功了

码农公寓