微信公衆號對接JS-SDK接口調用微信內置地圖

時間 2019-12-20

原文原文鏈接

微信js-sdk開發文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.htmlcss

1.頁面配置

引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.2.0.js ，而後經過config接口注入權限驗證配置。先在本身的服務器上寫個獲取數據的接口html

<!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) {

  }

}