微信公众号对接JS-SDK接口调用微信内置地图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

微信js-sdk开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

1.页面配置

引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.2.0.js ，然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>位置信息</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
</head><body>

</body>
<script> // 获取微信sdkConfig
function getWxJSSDK() {
// 拿到当前页面url
var thisPageUrl = location.href;
$.ajax({
url: "/api/h5/getWxJsSdkConfig",
type: "post",
dataType: "JSON",
data: {
"url": thisPageUrl,
},
success: function (result) {
console.log(result);
configWeiXin(result.obj);
},
error: function (err) {
}
});
} function configWeiXin(data) {
wx.config({
debug: false, // true开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['openLocation', 'getLocation']
});
} getWxJSSDK(); wx.ready(function () {
wx.openLocation({
latitude: "<%-lag%>", // 纬度，浮点数，范围为90 ~ -90
longitude: "<%-lng%>", // 经度，浮点数，范围为180 ~ -180。
name: "<%-shopName%>", // 位置名
address: "<%-shopAddress%>", // 地址详情说明
scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
});</script></html>

2.服务器配置（NodeJs版）

// 引用依赖
const sha1 = require('sha1');// 接口方法
async getWxJsSdkConfig(ctx) {
try {
const createRule = {
url: { type: 'string', required: true },
};
try {
ctx.validate(createRule, ctx.request.body);
} catch (e) {
return ctx.body = packageRes.packageRes(3, "参数错误", "");
} let url1 = ctx.request.body.url
let jsapi_ticket = '微信 JSAPI_TICKET'
let appid = '微信APPID'
let nonce_str = '123456' // 密钥，字符串任意，可以随机生成
let timestamp = moment().unix() // 时间戳 // 将请求以上字符串，先按字典排序，再以'&'拼接，如下：其中j > n > t > u，此处直接手动排序
let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url1 // 用sha1加密
let signature = sha1(str) let data = {
debug: false,
appId: appid,
timestamp: timestamp,
nonceStr: nonce_str,
signature: signature,
} return ctx.body = packageRes(0, "", data)
} catch (error) { }}