公众号js-sdk调试相信第一次接入微信js-sdk的朋友一定想对腾讯说点脏话,因为调试太麻烦了,我也看了n篇帖子后终于

万事开头难,相信第一次接入微信js-sdk的朋友一定想对腾讯说点脏话,因为调试太麻烦了,我也看了n篇帖子后终于搞定了,奈何都写的极其繁琐,就想着简化记录一下

`先上代码`

import 'jweixin-module'
export default function() {
    const config = {
         debug: true,   //开启调试模式
         appId: 'wx6ec70ff67a6ef02b',  //appid
         signature: '6813aa787360c982c515405c782639a09413cdfb', //签名,后面详细说
         timestamp: '1685330057',//格式为时间戳(秒),保持和生成signature的地方保持一致即可
         nonceStr: 'str', //随意填,此处和生成signature的地方保持一致即可
         jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']//需要调用的api,这里以分享好友与分享朋友圈为例
    }
    jWeixin.config(config)
    jWeixin.ready(function() { //需在用户可能点击分享按钮前就先调用
        jWeixin.updateAppMessageShareData({
            title: '分享标题',
            desc: '分享描述',
            link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'xxx.com/xxx.png', // 分享图标,需要带域名的绝对地址
        })
        jWeixin.updateTimelineShareData({
            title: '分享标题', 
            link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'xxx.com/xxx.png', // 分享图标,需要带域名的绝对地址
            })
        });
    })
}

`接下来详解关键参数`

获取测试号appid：

mp.weixin.qq.com/debug/cgi-b…点击后微信扫码即可,成功后顺手关注一下公众号,在顺手配置下安全域名juejin.cn,下面会用到

获取signature：

复制上一步获取的appid和appsecret,浏览器访问api.weixin.qq.com/cgi-bin/tok…
不出意外会看到一段json:

{"access_token":"69_NTT-AUabthOejGx2i8FSxQl_eohDhia9jOQCiJyX2vjWWLFJ95oZJIluEOzsG45F0iRGswFyn6to8Yb5pevqM7KI0o5oy_jGBrSqqFfoerjs9ZEqI6MYpNZcTFIUXWfAJAILK","expires_in":7200}

复制access_token继续访问api.weixin.qq.com/cgi-bin/tic…
不出意外会又看到一段json:

{"errcode":0,"errmsg":"ok","ticket":"LIKLckvwlJT9cWIhEQTwfBGjMqyfeLBerA74l0xB4d-1jKV-4gbZzCstbS9K_HaqpLD6HGXxQEH1ZKDMiYGpRg","expires_in":7200}

拿到ticket访问微信JS接口签名校验工具mp.weixin.qq.com/debug/cgi-b…,会看到如下图片
咱们继续
jsapi_ticket: 填入ticket
noncestr: 任意字符串
timestamp: 1685330057 时间戳,注意格式就行
url: juejin.cn:5173/ 5173替换成你自己的端口号这里一定要注意格式,不能多一个或少一个字符,为啥是juejin.cn下面会解释
点击生成签名按钮,即可在最底下看到签名signature,复制到你的代码里即可, 至此,所有参数都已获取完毕

重点解释一下为啥是juejin.cn
微信安全域名需要是一个能正常访问的域名,而咱本地是开发是127.0.0.1,需要一点小手段
C:\Windows\System32\drivers\etc找到hosts文件,
vscode编辑写入 127.0.0.1 juejin.cn ,这样就将juejin.cn映射到127.0.0.1,最后别忘了在cmd命令行工具输入ipconfig /flushdns使更改后的hosts文件生效

终于结束了,赶紧测试一下吧
微信开发工具打开<juejin.cn:5173
在需要分享的页面调用咱写好工具函数,不出意外会弹出提示

接下来点击右上角的...分享好友

ok,结束撒花