vue プロジェクトは、エンタープライズ WeChat js-sdk を使用して緯度と経度を取得します。

序文:

私がやっていることは WeChat Enterprise の組み込みアプリケーションであり、このプロジェクトでは緯度と経度を取得するために WeChat 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.config は効果がないため、wx.agentconfig が使用されます。

さらに、wx.agentconfig がエラーを報告する場合、解決策は次のとおりです。

2 つの JS は公開されている 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. 地理的位置を取得する

「@/utils/wxUtils」から {getLocation} をインポートします

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

おすすめ

転載: blog.csdn.net/weixin_55953988/article/details/124734391