jssdk信息验证失败_微信公众号开发——微信JSSDK使用(踩坑)

这段时间有个工作,是要在移动端给地图上加上导航功能,找了一圈,最后决定使用微信JSSDK的‘打开地理位置接口’来开发,也是着实踩了下坑啊,分享一下

微信JSSDK介绍

因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛,所以,微信搞了一个微信测试号,开发人员使用微信扫一下就可以获取。测试号貌似是全接口调用的哦!不用担心没有权限调用。

f227c51d4e0889066f87b76d4f9f8b41.png

开发配置

所有配置参考下图配置即可

7cc4e6c69041a4578ac752f9e2962fc9.png

在配置时,需要注意几点

  • 接口配置信息中,要配合系统后台,我的系统是thinkPHP5,下面是我的代码
// 下面代码放在controller中,token是你的访问入口public function token(){ $echoStr = $_GET["echostr"]; if ($this->checkSignature()){ echo $echoStr; exit; }}/** * 用于验证是否是微信服务器发来的消息 * @return bool */private function checkSignature(){ $signature = $_GET["signature"]; $timestamp = $_GET["timestamp"]; $nonce = $_GET["nonce"]; $token = 'whongbin'; $tmpArr = array($token, $timestamp, $nonce); sort($tmpArr); $tmpStr = implode($tmpArr); $tmpStr = sha1($tmpStr); if ($tmpStr == $signature){ return true; }else { return false; }}
  • 配置JS接口安全域名时,注意是 域名 不需要填写http/https,如果填写的话,在代码执行wx.config()时,会报 config:fail,Error: invalid url domain 错误

微信JSSDK使用

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js jssdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了,这里也提供下jssdk的下载地址http://demo.open.weixin.qq.com/jssdk/sample.zip,SDK中有demo,有不懂的可以联系我或者下方留言,我会第一时间回复

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: ['openLocation'] // 必填,需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口});wx.ready(function () { wx.checkJsApi({ jsApiList: ['checkJsApi','openLocation'], success: function (res) {} });});wx.error(function(res){ console.log(res);});

这里需要注意的地方debug在上线后要改为false,jsApiList里要填你要使用的接口,不然没有作用

给导航按钮注册点击事件,调用wx.openLocation方法,注意:因为这块是需要用户触发的,所以不必放在wx.ready()方法中,若需要页面加载时就执行的话,如分享接口,就必须放在wx.ready()方法中执行

$('.btn2').click(function () { wx.openLocation({ latitude: 22.545538, // 纬度,浮点数,范围为90 ~ -90。如果是动态获取的数据,使用parseFloat()处理数据 longitude: 114.054565, // 经度,浮点数,范围为180 ~ -180。如果是动态获取的数据,使用parseFloat()处理数据; name: '这里填写位置名', // 位置名 address: '位置名的详情说明', // 地址详情说明 scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大 });})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值