vue项目使用企业微信js-sdk获取经纬度

前言：

我做的是企业微信内置应用，该项目有个需求需要使用企业微信JS-SDK获取经纬度，磕磕绊绊总算弄出来。使用wx.config配置会报错40093，就是用wx.agentconfig然后配置就可以了。

注意：本地调试不会有任何效果，光提示授权而且本地报错8001，只能线上调试。

1.在vue中安装 weixin-jsapi

npm install weixin-jsapi --save-dev  或者  cnpm install weixin-jsapi

2 until文件夹下创建WXUntil.js

下面代码的api.getjssdk是给后端传当前#前的地址获取配置参数的接口

import jWeixin from 'weixin-jsapi';
import api from '@/api/index';// 获取appid信息的接口,以后台人员接口为准
// 获取地理位置
const getLocation = () => {
  return new Promise((resolve, reject) => {
    var thisherf = window.location.href.split('#')[0]
    const taskData = {
      url: thisherf
    }
    api.getJSSDK(taskData).then(async data => {
      console.log(data.appId, data.timestamp, data.nonceStr, data.signature, 'suju', data);
      await jWeixin.agentConfig({
        agentid: '1000036', // 必填，企业微信的应用id （e.g. 1000247）
        corpid: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: [
          'getLocation'
        ],
        success: function(res) {
          // 回调
          console.log(res, '回调res');
        },
        fail: function(res) {
          if (res.errMsg.indexOf('function not exist') > -1) {
            alert('版本过低请升级')
          } else {
            alert('请授权')
          }
        }
      });
      jWeixin.ready(function() {
        console.log('配置成功');
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });
      jWeixin.error(function(res) {
        console.log(res, '失败');
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
      jWeixin.checkJsApi({
        jsApiList: ['getLocation'], // 需要检测的JS接口列表
        success: function(res) {
          console.log(res, '是否可以');
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
      });
      jWeixin.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          resolve(res)
          console.log(latitude, longitude, '经纬度', res, 'res');
        }
      });
    }).catch(error => {
      reject(error);
    })
  });
};
export { getLocation };
export default getLocation;

这里使用的是wx.agentconfig   因为wx.config无效果。

另外wx.agentconfig 报错，解决办法就是：

两个js在public 的index.html 中引入

​​​​​​​<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" type="text/javascript"></script>

注意的是不能使用 wx.config和 wx.agentconfig  调用

将 wx 改为  jWeixin

即是  jWeixin.config() 和 jWeixin.agentconfig()  就可以了

3.获取地理位置

import {getLocation} from "@/utils/wxUtils"

async getLocationFn(){
    let data=await getLocation()
    console.log(data) //获取地址信息
}

扫描二维码关注公众号，回复： 15985612 查看本文章