admin管理员组

文章数量:1559075

摘要:

今天做企业微信打卡小应用的时候,使用到调用企业微信内置sdk来获取当前经纬度,想到企业微信还是使用腾讯地图逆向解析详细地址比较准确一点,使用使用腾讯地图来解析详细地址!

在获取微信定位的时候,要先通过config接口注入权限验证配置,获取配置信息里面的内容是后端接口给出的,所用的接口域名一定要备案。一般是请求后端接口获取签名的!与后端沟通好就okk!!!

企业微信开发文档

let code = this.getqueryvariable("code");
      this.codes = code;
      if (/wxwork/i.test(navigator.useragent)) {
        if (!!code) {
          if (/android|webos|iphone|ipod|blackberry/i.test(navigator.useragent)) {
            this.wxwork();
            this.wxdefaultbrowser();
            return;
          }
        } else {
          // 正式
          window.location.replace(
            'https://open.weixin.qq/connect/oauth2/authorize?appid=xxxxxxx&redirect_uri=https://xxx.xxxx/clockingapp/pindex.html&response_type=code&scope=snsapi_base&state=state#wechat_redirect'
          )
          // 测试
          // window.location.replace(
          //   "https://open.weixin.qq/connect/oauth2/authorize?appid=xxxxxxxx&redirect_uri=http://testxxx.xxxx:20080/pindex.html&response_type=code&scope=snsapi_base&state=state#wechat_redirect"
          // );
        }
        return;
      }

进入页面获取登录信息,拉取code进行登录校验,然后根据回来的token去请求数据,定位获取经纬度后期解析详细地址!

wxdefaultbrowser() {
        let url = window.location.href.split("#")[0];
        let that = this;
        that.$axios
          .get("/commonnosession.do", {
            params: {
              method: that.$method.xxxx_xxxx_wechat_token_get,
              data: {
                url: url,
                appkey: "corpid",
              },
            },
          })
          .then((res) => {
            toast.loading({
              message: '加载中...',
              forbidclick: true,
            });
            if (res.data.code == 0) {
                wx.config({
                  beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
                  debug: false,
                  appid: res.data.data.appid,
                  timestamp: res.data.data.timestamp,
                  noncestr: res.data.data.noncestr,
                  signature: res.data.data.signature,
                  jsapilist: ["getlocation"], // 必填,需要使用的js接口列表,凡是要调用的接口都需要传进来
                });
                wx.ready(function() {
                  wx.getlocation({
                      type: 'gcj02',
                      success: function (res) {
                        var latlng = new qq.maps.latlng(res.latitude, res.longitude)
                        getaddr.getaddress(latlng)
                      },
                      fail: function (response) {
                        alert("请先打开手机定位刷新页面再打卡~");
                      },
                  });
                  wx.error(function (res) {
                      console.log('微信js-sdk 配置失败000'  res.errmsg)
                      // alert('微信js-sdk 配置失败000'  res.errmsg)
                  })
                });
                var getaddr = new qq.maps.geocoder({
                    complete: function (res) {
                      alert(json.stringify(res))
                      var alladdress = res.detail;//成功回调详细地址
                    }
                })
            }
          })
          .catch((error) => {});
      },

获取签名wx.config企业微信注入权限,wx.getlocation获取准确的经纬度,然后调取腾讯地图qq.maps.geocoder逆向解析详细地址!
记得index.html引入相关sdk:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>打卡</title>
  </head>
  <body>
    <div id="app-box"></div>
    <script src="https://res.wx.qq/open/js/jweixin-1.2.0.js"></script>
    <script src="https://open.work.weixin.qq/wwopen/js/jwxwork-1.0.0.js"></script>
    <script charset="utf-8" src="https://map.qq/api/js?v=2.exp&key=ob4bz-d4w3u-b7vvo-4pjww-6tkdj-wpb77"></script>
  </body>
</html>

遇到的坑:

调用wx.getlocation使用wgs84时获取回来的经纬度腾讯地图解析出来的详细地址好像相差一公里,特别不正确的!所以使用了火星坐标gcj02,高级,就是回来的address带有中国!难道可以定位外国去???

本文标签: 腾讯企业