微信公众号开发——微信JSSDK使用(踩坑)

这段时间有一个工作中,是要在手机端给地图上再加上导航功能,找了一圈,最终决策使用微信JSSDK的‘开启所在位置接口’来开发设计,也是确实踩了下坑啊,共享一下

手机微信JSSDK详细介绍

由于微信公众平台的开启针对绝大多数开发人员而言也是一个稍高的门坎,因此,手机微信搞了一个微信测试号,开发人员使用微信扫一下就可以获得。检测号好像是全接口启用的哦!不必担心沒有管理权限启用。

开发设计配置

全部配置参照下面的图配置就可以

在配置时,必须留意几个方面

接口配置信息中,要相互配合系统软件后台管理,我的系统是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 do ** in 不正确手机微信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。默认设置为较大 });})

扫码免费用

源码支持二开

申请免费使用

在线咨询