Don't forget that you have had a dream

    

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

前言

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

微信JSSDK介绍

官方文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛,所以,微信搞了一个微信测试号,开发人员使用微信扫一下就可以获取。测试号貌似是全接口调用的哦!不用担心没有权限调用。
申请入口:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

https://file.whongbin.com/blog/20190521160219.png

开发配置

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

https://file.whongbin.com/blog/20190521160247.png

在配置时,需要注意几点

接口配置信息中,要配合系统后台,我的系统是thinkPHP5,下面是我的代码

// 下面代码放在controller中,token是你的访问入口
// 例:https://www.whongbin.cn/wechat/index/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 错误,正确示例:www.whongbin.com

微信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。默认为最大
    });
})

您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 知识共享许可协议 进行许可。

  更新日志

博客banner下方滚动文字替换为使用 一言API 随机获取 --- updated on 2019-05-22 09:04:31 星期三

  关于博主

三里林,一个致力于分享,分享心得,分享技术,分享知识点的个人博客

  近期评论

  分类目录

人类的智慧就如同孔雀的羽毛。极尽炫耀,只是为了吸引异性。

时间是世上最快的一把杀人刀,无论你是万世将种,还是绝世美人,到头来都逃不过这把刀的索命。枯骨荒冢,有谁还记得你生前的模样是丑是美。

今日,吾爱,我们融为一体。

你还有好多未完成的梦,你有什么理由停下脚步

你永远也看不到我最寂寞时候的样子,因为只有你不在我身边的时候,我才最寂寞。

没有什么过不去,只是再也回不去。

许多年以后,面对行刑队的时候,奥雷良诺·布恩迪亚上校一定会想起父亲带他去看冰块的那个遥远的下午。

只有懦弱和失败者才会四处寻找借口