微信用<wx-open-launch-app>拉起第三方APP报 ferrMsg: config: invalidsignature

 先看后台配置:一定要看好请求参数是否正确

 

 到这里就可以确认后台没有问题,我们在用验签工具验签

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

H5就这点代码,不要怀疑自己

安装weixin-js-sdk
npm install --save weixin-js-sdk
需要的页面引入

import wx from 'weixin-js-sdk';
wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
            appId: appid, // 必填,公众号的唯一标识
            timestamp: timestamp, // 必填,生成签名的时间戳
            nonceStr: nonceStr, // 必填,生成签名的随机串
            signature: signature, // 必填,签名
            jsApiList: ['chooseImage'], // 必填,需要使用的JS接口列表
            //openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
        })
        wx.ready(function(){
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
            alert("OK");
            wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
            }
        });
        });
        wx.error(function(res){
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
            alert(res)
        });

这样就万无一失了:config:ok

### 如何在HTML5页面中使用微信开放标签 `wx-open-launch-weapp` 启动小程序 #### 准备工作 为了使 HTML 页面能够通过 `<wx-open-launch-weapp>` 标签启动指定的小程序,开发者需先完成微信公众平台上的配置并获取到必要的参数。这包括但不限于 AppID 和其他安全验证所需的字段。 #### 配置说明 确保服务器端已正确设置 JS-SDK 的权限校验签名接口返回的数据包含有合法的 `timestamp`, `nonceStr`, `signature` 参数,并且 `jsApiList` 中含有 `"launchMiniProgram"` API 权限[^1]。 #### 使用方法 下面是一个简单的例子来展示如何利用该组件实现从 H5 跳转至特定版本的小程序: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Launch Mini Program</title> <!-- 微信JS-SDK引入 --> <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> </head> <body> <!-- 开放标签定义 --> <WX-OPEN-LAUNCH-WXAPP id="launchMiniProgram" appid="wxd930ea5d5a258f4f" path="/pages/index?query=1"> 打开小程序 </WX-OPEN-LAUNCH-WXAPP> <script type="text/javascript"> // 假设这里已经完成了 wx.config() 初始化操作... document.getElementById('launchMiniProgram').onclick = function () { // 当点击按钮时触发跳转行为 }; </script> </body> </html> ``` 请注意,在实际应用环境中应当替换上述代码中的 `appid` 及路径参数为真实有效的值;同时也要保证当前网页域名已被加入到对应公众号的安全白名单内以便顺利调用微信提供的能力。 #### 注意事项 - 组件名称结尾处应为 `-weapp` 而不是 `-app`。 - 如果希望传递额外数据给目标小程序,则可以通过 URL 查询字符串的形式附加于 `path` 属性之后。 - 对于某些特殊场景下的处理逻辑(比如用户未安装最新版客户端),建议参阅官方文档了解更多细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值