微信公众号对接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>
    <!-- <h1>微信地图</h1> -->
</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) {

  }

}

 

 

 

posted @ 2019-11-07 15:58  橘子味儿的猫  阅读(2217)  评论(0)  编辑  收藏  举报