实现效果：
点击导航自动跳转到：
html页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳转导航</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
.oneMsg{display: flex;align-items: flex-start;}
</style>
</head>
<body>
<div class="oneMsg">
<span>地址：天坛公园
<img src="./img/baiduMap.png" class="baiduMap" style="width: 40px;height: 40px;vertical-align: middle;margin-left: 40px;"/>
</span>
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js?ver=5"></script>
<script src="./js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
fetch("你的后端接口地址?url=" + location.href).then(function (res) {
return res.json()
})
.then(function (res) {
wx.config({
debug: false,
appId: res.appId,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi',
'openLocation',
'getLocation',
],
})
})
$('.baiduMap').on("click",function () {
wx.openLocation({
longitude:Number("116.410891"),// 经度，浮点数，范围为180 ~-180。
latitude:Number("39.881951"),//纬度，浮点数，范围为90~-90
address:'一年一度鉴赏大会',// 地址详情说明
name:"天坛公园",// 地址名称
scale:15,//地图缩放级别,整形值,范围从1~28。默认为最大infourl:'·//! 在查看位置界面底部显示的超链接,可点击跳转
});
wx.error(function(res){
console.log(res.errMsg)// 这里可以打印错误信息
});
})
</script>
</body>
</html>上面有个接口地址，我用的后端是php接口，返回内容如：
接口文件内容如下：
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
use think\validate\ValidateRule;
use think\facade\Log;
class Share extends Controller
{
// 接口入口
public function share_form(){
$appid='你的公众号appid';
$appsecret='公众号秘钥';
$this->cache = new \Memcached();
$this->cache->addServer('127.0.0.1', 11211);
$data = $this->cache->get('access_token');
$data = json_decode($data);
if(!$data)
{
$data=(object)[];
$data->expire_time = time() - 10;
}
if ($data->expire_time < time()) {
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret";
$ret_json = $this->curl_get_contents($url);
$ret = json_decode($ret_json,true);
$access_token=$ret['access_token'];
$url_ticket = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $access_token .'&type=jsapi';
$ret_json_ticket = $this->curl_get_contents($url_ticket);
$ret_ticket = json_decode($ret_json_ticket,true);
$ticket = $ret_ticket['ticket'];
$data->expire_time = time() + 7000;
$data->jsapi_ticket = $ticket;
$token = json_encode($data);
$this->cache->set('access_token', $token, 7000);
}else {
$ticket = $data->jsapi_ticket;
}
$noncestr = $this->getRandStr(15);
$timestamp = time();
$strvalue = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'×tamp='.$timestamp.'&url='.input('url');
$signature = sha1($strvalue);
return json([
'timestamp'=>$timestamp,
'nonceStr'=>$noncestr,
'signature'=>$signature,
'appId'=>$appid,
]);
}
public function getRandStr($length){
$str = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
$randString = '';
$len = strlen($str)-1;
for($i = 0;$i < $length;$i ++){
$num = mt_rand(0, $len);
$randString .= $str[$num];
}
return $randString;
}
function curl_get_contents($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_TIMEOUT, 1);
curl_setopt($ch, CURLOPT_MAXREDIRS, 200);
// curl_setopt($ch, CURLOPT_USERAGENT, _USERAGENT_);
// curl_setopt($ch, CURLOPT_REFERER, _REFERER_);
@curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
$r = curl_exec($ch);
curl_close($ch);
return $r;
}
public function get_token($appid,$appsecret){
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret";
$ret_json = $this->curl_get_contents($url);
$ret = json_decode($ret_json,true);
if(!empty($ret['access_token'])){
$redis->set('toupiao_share_access_token',$ret['access_token'],7000);
}
return $ret['access_token'];
}注意：经纬度不要写反了，我之前遇到的问题就是经纬度写反了，苹果手机点击没反应，安卓手机可以点击，但是导航错误。
