在微信开发者工具中用本地IP地址调试JSSDK（微信公众号网页）

2024-06-23 10:00:26

网上有很多本地调试jssdk的文档，发现都不全，或不好用。有的说用内网穿透，有的说改好发到线上测试服调。这些都很麻烦，还不一定能签名成功。经过我多天努力，摸出了一套本地开发工具+微信测试号的方法。

效果图：

1、登录微信测试号（关注即可享用）

微信公众平台

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

2、添加js接口安全域名和扫码关注公众号

3、获取access_token

根据微信文档-概述 | 微信开放文档附录1-jssdk权限签名算法和参考微信开放文档，在浏览器调用接口：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx771b0c3d35183572&secret=e737581a9c3ce7c67905b01d87318c8c

这里的appid为测试号的appid，secret为测试号的appsecret

注意：获取到的acces_token要缓存起来，不要频繁获取，不然可能不成功

4、拿上一步的access_token获取jsapi_ticket

在浏览器地址栏访问接口：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=你的access_token&type=jsapi

5、拿上一步得到jsapi_ticket去生成签名

访问微信JS接口签名校验工具 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

微信 JS 接口签名校验工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

填入 jsapi_ticket

填入noncestr（随机字符串，可写死：Wm3WZYTPz0wzacny）

填入timestamp （当前时间戳，单位秒）

填入url （本地项目服务的ip地址，访问地址#号之前的内容）

点击生成签名

6，把得到的签名放到wx.config配置对象中，大功告成

import wx from "weixin-js-sdk"; // 这个是jssdk npm包

在微信开发者工具中用本地IP地址调试JSSDK（微信公众号网页）相关推荐

微信开发者工具source看不了代码_微信开发者工具和开发
微信开发者工具的用途开发微信小程序和公众号网页开发小程序添加小程序项目在小程序的管理页面可以增删项目添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用) 小程序编辑器 ...
VUE 实现公众号网页微信授权登录
这里不做过多的解释,具体了解见官网文档. 网页授权官方文档需要准备工作: 1.微信开发者工具 2.公众号添加开发者权限以及本地IP白名单 3.公众号唯一标识:appID 4.公众号配置网页授权域名 ...
微信开发者工具地址自动跳转https问题处理
在微信开发者工具是调式公众号页,打开http网址自动跳转到https的问题, 因为网址原来是https的,后来转成了http,但是开发工具记住了https,在访问地址时,会自动转为https的. Ma ...
微信开发者工具的下载及小程序项目创建
1.注册并微信扫码登录微信公众平台(微信公众平台) 完成如下所示相关信息(保证所填写信息真实有效,以免后续使用出现不必要的问题) 2.点击"普通小程序开发者工具",跳转至下图所示页 ...
微信开发者工具测试小程序
使用微信开发者工具测试小程序 1.安装微信开发者工具.VS code工具 2.拉代码到本地,通过git clone 代码仓库路径下载代码 3.用VS code生成dist文件 VS code打开拉取到 ...
微信开发者工具中使用vant库
构建npm 很多小伙伴在学习微信小程序开发的时候是不是都遇到了构建npm时出现的错误问题,下面我就自己的错误写下我的解决方案. 可能在全局使用npm的时候,能够成功运行"npm i @van ...
uni-app从创建到运行到微信开发者工具
uni-app是一个基于Vue.js开发跨平台应用的前端框架解决了原生小程序编写的繁琐,只要你会vue就可以通过uni-app编写小程序首先开发工具我推荐HBuilder,虽然我比较喜欢VScod ...
【uni-app】微信开发者工具注意点（微信小程序）
目录一.微信小程序的appid 二.真机调试不让调,报体积过大三.echarts用真机调试会出错但上线时就完好四.真机调试image不显示,但是电脑上显示正常五.uni-app使用appid和 ...
记录一下cocoscreator打包后，在微信开发者工具和真机调试中的坑
背景最近在用cocoscreator做一个对战的小游戏,通信用的socket.io模块,客户端语言用的ts,后端用的node.js 简单的功能做的差不多了,然后打包到微信开发者工具和真机进行调试时发 ...

最新文章

热门文章