本地开发微信网页时如何调试微信sdk

在微信开发文档中说到，引入/调用微信sdk相关api的网页，都需要在公众号平台配置js接口安全域名。否则无法调试/调用。那么我们如果是在开发阶段调试不可能开发到一半然后部署到指定的js接口安全域名下，所以我们在本地应该如何去调试呢.
这就又要用到微信公众平台提供的公众平台测试账号了，我们首先在公众平台的开发者工具中找到公众平台测试账号然后点进去，就可以看到下面这个界面

//好的到这一步我们先暂停一下，建议大家先去看看官网。官网中写到引入微信sdk的网页都需要引入微信sdk的脚本地址，然后在网页中调用下面这个方法，这个方法就是用来判断这个网页有没有使用微信sdk的权限.
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: ‘’, // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: ‘’, // 必填，生成签名的随机串
signature: ‘’,// 必填，签名
jsApiList: [] // 必填，需要使用的 JS 接口列表
});
//我们可以看到这里需要使用到appid作为参数，因为我们是在本地测试用就用测试号的这个appid

//像timestamp和nonceStr，signature一般由后端生成然后前端调接口获取，但是我们也需要知道后端是如何生成这三个东西的。
后端首先可以生成一个任意时间戳作为timestamp的值，生成一个任意的字符串作为nonceStr的值。但是注意的来了，这个signature参数的值就不能乱写了，这个就比较麻烦。首先需要调用微信对应接口获取access_token，然后再调取微信对应接口获取jsapi_ticket，再通过微信官网规定的签名算法最终才能获取signature
首先我们如何获取access_token呢，微信提供了一个get请求的接口
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
我们可以看到该接口需要穿三个参数，一个grant_type，一个appid，一个secret。这个grant_type的值是固定为client_credential，appid就是我们上图中测试号的appid和测试号的appsecret(如果是上线之后就要改成我们公众号真实的appid和appsecret)。

获取到access_token后再使用get请求调用微信提供的下面这个接口来获取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
我们可以看到这个接口也需要传入两个参数，一个access_token，一个type。首先accsess_token参数的值肯定就是我们上一个接口获取的access_token，而这个type的值就是固定的jsapi

获取到jsapi_ticket后，然后通过微信官网的签名算法来生成signature。大概就是将刚刚后端生成的timestamp，nonceStr，和填写的jssdk接口安全域名地址(这个地址就是我们调用微信sdk的网页地址，但是由于我们是本地网页开发测试的话我们使用的是测试号，所以我们在测试号的js接口安全域名地址中可以填写本地ip，如果是上线之后就需要改成公众号中填写的真实的js安全接口域名)，以及刚刚获取的jsapi_ticket，这四个拼接成一个字符串然后通过sha1加密得出一个加密后的字符串，这个加密后的字符串就是signature这个的值了。
参考官方文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
官方文档截图:

总结一句话，如果需要在本地测试微信sdk或者微信授权之类的接口，就必须使用微信公众平台提供的公众测试账号，因为公众测试账号提供的测试公众号可以填写本地ip作为js接口安全域名，进而能够在本地开发微信网页时进行微信sdk或微信授权等一些调试。等本地微信网页开发完毕，上线后。我们再进入公众平台，配置一下我们自己公众号的js接口安全域名为微信网页上线后的真实域名

微信sdk使用典例

本地开发微信网页时如何调试微信sdk相关推荐

微信网页第三方登录原理微信开放平台和公众平台的区别 1.公众平台面向的时普通的用户，比如自媒体和媒体，企业官方微信公众账号运营人员使用，当然你所在的团队或者公司有实力去开发一些内容，也可以调用公众
微信网页第三方登录原理微信开放平台和公众平台的区别 1.公众平台面向的时普通的用户,比如自媒体和媒体,企业官方微信公众账号运营人员使用,当然你所在的团队或者公司有实力去开发一些内容,也可以调用公众平 ...
pc端debugger微信、电脑debugger微信、电脑调试微信支付、pc调试微信支付、电脑调试真机微信、通过电脑调试手机真机打开的微信H5页面、通过电脑chrome调试手机真机打开的微信H5
pc端debugger微信.电脑debugger微信.电脑调试微信支付.pc调试微信支付.电脑调试真机微信.通过电脑调试手机真机打开的微信H5页面.通过电脑chrome调试手机真机打开的微信H5 ...
使用微信web开发者工具调试微信企业号页面
使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的) 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试 ...
安卓手机调试微信网页, 真机调试模式开启
1. 使用腾讯TBS Studio 1.1 下载地址 https://x5.tencent.com/tbs/guide/debug/download.html 1.2 操作调试指南 https://x ...
微信网页授权，获取微信code，获取access_tocken,获取用户信息
微信开发中,经常有这样的需求:获得用户头像.绑定微信号给用户发信息.. 那么实现这些的前提就是授权! 1.配置安全回调域名: 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的" ...
java微信网页支付_java实现微信H5支付
原标题:java实现微信H5支付前面做了app微信支付的回调处理,现在需要做微信公众号的支付,花了一天多时间,终于折腾出来了!鉴于坑爹的微信官方没有提供Java版的demo,所以全靠自己按照同样坑爹 ...
java ajax 微信网页授权_ajax 实现微信网页授权登录的方法
AJAX 的 ajax 实现微信网页授权登录的方法项目背景因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析因为本人是一个ph ...
java配置微信网页授权_玩玩微信公众号Java版之六：微信网页授权
配置好了,就可以进行开发了,首先来看一下具体的流程: 其实很多功能点,前面已经实现过,只用改一下调用地址和参数即可. 首先,调用的定义链接:https://open.weixin.qq.com/con ...
html跳转微信app,微信开放标签：微信网页H5跳转微信小程序、APP
开放标签使用: id="launch-btn" username="gh_xxxxxxxx" path="/a/b/c.html?d=1&e= ...
Appium_调试腾讯订制开发的X5版本webview_调试微信_调试手机QQ空间等
= 调试才是开发效率的核心. 感觉现在的工具真心还是难用,虽然是可以用了,也只是"可以用"而以. 腾讯这一版本感觉还是进步了很多,虽然还是不够好啊. = 一.过时的文档,大家别走弯 ...

本地开发微信网页时如何调试微信sdk

微信sdk使用典例

本地开发微信网页时如何调试微信sdk相关推荐

最新文章

热门文章