uni-app无法调用定位函数，用微信jssdk定位解决方法

一、在 uni-app 项目中使用微信 JS-SDK 获取用户定位

        步骤一：安装并配置微信 JS-SDK

1. 引入 JS-SDK: 在 uni-app 的页面中，你可以在 index.html 文件中引入微信的 JS-SDK。

   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   

2. 获取配置: 你需要在服务器上生成微信 JS-SDK 的配置参数（appId、timestamp、nonceStr 和 signature）

        步骤二：在 uni-app 中使用 JS-SDK

在你的 uni-app 页面中，可以通过 onLoad 或 mounted 生命周期方法初始化微信 JS-SDK，并获取位置信息。

<template>
  <view>
    <button @click="getLocation">获取位置</button>
  </view>
</template>

<script>
export default {
  methods: {
    getWxConfig() {
      return new Promise((resolve, reject) => {
        const url = window.location.href; // 获取当前页面的 URL
        uni.request({
          url: 'YOUR_SERVER_URL/getWxConfig', // 替换为你的服务器地址
          data: { url: encodeURIComponent(url) },
          success: (res) => {
            if (res.statusCode === 200) {
              resolve(res.data);
            } else {
              reject('获取配置失败');
            }
          },
          fail: () => {
            reject('请求失败');
          },
        });
      });
    },

    async getLocation() {
      try {
        const config = await this.getWxConfig();
        
        wx.config({
          debug: true,
          appId: config.appId,
          timestamp: config.timestamp,
          nonceStr: config.nonceStr,
          signature: config.signature,
          jsApiList: ['getLocation']
        });

        wx.ready(() => {
          wx.getLocation({
            type: 'wgs84',
            success: (res) => {
              const latitude = res.latitude; // 纬度
              const longitude = res.longitude; // 经度
              console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
              // 处理位置信息
            },
            fail: (err) => {
              console.error('获取定位失败', err);
            }
          });
        });

        wx.error((err) => {
          console.error('微信JS-SDK配置失败', err);
        });

      } catch (error) {
        console.error('获取配置失败', error);
      }
    }
  }
}
</script>

<style>
/* 样式 */
</style>

 

        步骤三：注意事项

1. HTTPS: 确保你的 uni-app 应用通过 HTTPS 提供服务，因为微信 JS-SDK 只能在安全的上下文中运行。

2. 用户授权: 用户需要在微信中授权应用获取其位置信息。确保在调用 wx.getLocation 之前，用户已同意相关权限。

3. 测试环境: 在微信开发者工具中测试时，请确保你的 URL 和相关设置已正确配置。

 二、npm格式修改方式

        步骤一：安装 jweixin-module

首先，确保你已经在项目中安装了 jweixin-module。你可以通过 npm 安装：

npm install jweixin-module --save

        步骤二：配置微信 JS-SDK

在你的 uni-app 项目中，需要在合适的位置（比如在一个页面的 mounted 生命周期中）进行微信 JS-SDK 的配置。

        步骤三：获取定位

以下是一个完整的示例，说明如何使用 jweixin-module 获取微信定位：

<template>
  <view>
    <button @click="getLocation">获取位置</button>
  </view>
</template>

<script>
import jweixin from 'jweixin-module';

export default {
  methods: {
    getWxConfig() {
      return new Promise((resolve, reject) => {
        const url = window.location.href; // 获取当前页面的 URL
        uni.request({
          url: 'YOUR_SERVER_URL/getWxConfig', // 替换为你的服务器地址
          data: { url: encodeURIComponent(url) },
          success: (res) => {
            if (res.statusCode === 200) {
              resolve(res.data);
            } else {
              reject('获取配置失败');
            }
          },
          fail: () => {
            reject('请求失败');
          },
        });
      });
    },

    async getLocation() {
      try {
        const config = await this.getWxConfig();
        
        // 配置 jweixin
        jweixin.config({
          debug: false, // 开启调试
          appId: config.appId,
          timestamp: config.timestamp,
          nonceStr: config.nonceStr,
          signature: config.signature,
          jsApiList: ['getLocation'] // 需要使用的 JS API
        });

        // jweixin 事件监听
        jweixin.ready(() => {
          jweixin.getLocation({
            type: 'wgs84', // 返回可以用于逆地址解析的经纬度
            success: (res) => {
              const latitude = res.latitude; // 纬度
              const longitude = res.longitude; // 经度
              console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
              // 处理位置信息
            },
            fail: (err) => {
              console.error('获取定位失败', err);
            }
          });
        });

        jweixin.error((err) => {
          console.error('微信JS-SDK配置失败', err);
        });

      } catch (error) {
        console.error('获取配置失败', error);
      }
    }
  }
}
</script>

<style>
/* 样式 */
</style>

看着代码很长，但也就四步：

1. 引入 jweixin-module: 使用 import jweixin from 'jweixin-module'; 引入模块。

2. 获取配置: getWxConfig 方法通过请求你的服务器获取微信 JS-SDK 需要的配置参数。

3. 配置 jweixin: 在 getLocation 方法中，调用 jweixin.config 配置 JS-SDK。

4. 获取定位: 在 jweixin.ready 方法中调用 jweixin.getLocation 获取用户位置。

5. 处理定位结果: 在 success 回调中处理返回的经纬度数据。