七乐彩兑奖游戏规则

微信公众号开发——微信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

开发配置

所?#20449;?#32622;参考下图配置即可

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

在配置时,需要注意几点

接口配置信息中,要配合?#20302;?#21518;台,我的?#20302;?#26159;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接口?#36393;?#22495;名时,注意是 域名 不需要填写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, // 纬度,浮点数,?#27573;?#20026;90 ~ -90。如果是动态获取的数据,使用parseFloat()处理数据
        longitude: 114.054565, // 经度,浮点数,?#27573;?#20026;180 ~ -180。如果是动态获取的数据,使用parseFloat()处理数据;
        name: '这里填写位置名', // 位置名
        address: '位置名的详情说明', // 地址详情说明
        scale: 10, // 地图缩放级别,整形值,?#27573;?#20174;1~28。默认为最大
    });
})


转自:https://www.whongbin.com/archives/313.html

by 雪洁 2019-06-24 10:12:20 325 views
我来?#23548;?#21477;

相关文章
?
七乐彩兑奖游戏规则 时时彩计划精准免费网页版 福建时时倍投技巧 天津快乐十分中奖规则奖金 足球比分网即时比分 安徽时时彩计划软件手机版式 加拿大28下载app 一肖中待免费公开资料 极速赛计划一天36轮 天津快乐十分模拟投注 大乐透中4十0奖金多少 时时彩计划精准免费网页版 福建时时倍投技巧 天津快乐十分中奖规则奖金 足球比分网即时比分 安徽时时彩计划软件手机版式 加拿大28下载app 一肖中待免费公开资料 极速赛计划一天36轮 天津快乐十分模拟投注 大乐透中4十0奖金多少