微信公众号开发——微信JSSDK使用（踩坑）

2018-09-25 本文已影响16053人是彬不是杉

原文链接：https://www.whongbin.cn/index/article/detail/id/33.html
这段时间有个工作，是要在移动端给地图上加上导航功能，找了一圈，最后决定使用微信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://ws1.sinaimg.cn/large/0064eL5bly1fvel6gy61xj311n0ew3zz.jpg

开发配置

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

https://ws1.sinaimg.cn/large/0064eL5bly1fvelf90llkj311y0hs3zz.jpg

在配置时，需要注意几点

接口配置信息中，要配合系统后台，我的系统是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.cn

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

微信公众号开发——微信JSSDK使用（踩坑）

微信JSSDK介绍

开发配置

微信JSSDK使用

猜你喜欢

热点阅读