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

• 第一步（肯定是阅读微信的文档啊）
• • 1. 绑定域名
  • 2.引入JS文件
  • 3.配置wx.config

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

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

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网页跳转微信小程序的步骤
第一次写文档激动地都不知道说啥了
基本这一套步骤走下来 就成功了