uniapp如何获取微信小程序的我的地址

admin 2026年02月07日 15:47 101 0

在uniapp中获取微信小程序地址，需先在manifest.json配置微信小程序appid，通过uni.chooseAddress()调用微信原生地址选择接口，该方法仅支持微信小程序环境，调用后会触发用户授权，用户确认后返回地址信息（姓名、电话、详细地址等），失败时需处理错误，注意需在真机或微信开发者工具中测试，H5和App端不适用，核心代码为uni.chooseAddress({ success: (res) => { console.log(res) } })，通过回调获取用户选择的地址数据。

UniApp实现微信小程序获取用户地址详解

在电商、外卖、O2O等场景中，获取用户收货地址是核心功能之一，UniApp作为跨端开发框架，支持一套代码编译到微信小程序、App、H5等多个平台，极大提升了开发效率，本文将详细介绍如何通过UniApp在微信小程序中实现用户地址的获取，包括授权流程、接口调用、数据处理及常见问题解决方案。

前提条件：微信小程序授权机制

微信小程序出于用户隐私保护，获取用户地址（包括姓名、手机号、详细地址等敏感信息）必须经过用户授权,获取地址的核心流程分为两步：

获取用户授权：向用户申请地址信息的使用权限。
调用地址选择接口：用户授权后,通过微信官方接口获取地址数据。

UniApp对微信小程序的原生接口进行了封装，提供了更简洁的API（如uni.chooseAddress），开发者可直接调用,无需关心底层实现细节。

实现步骤：从授权到获取地址

检查用户是否已授权（可选但推荐）

直接调用uni.chooseAddress时，如果用户未授权，微信会自动弹出授权弹窗，但为了更好的用户体验，建议先检查授权状态,避免强制弹窗导致用户反感。

微信小程序提供了wx.getSetting接口获取用户授权状态，UniApp封装为uni.getSetting，通过scope.address字段判断地址权限是否已授权。

代码示例：

// 检查地址授权状态
uni.getSetting({
  success: (res) => {
    if (res.authSetting['scope.address']) {
      // 已授权，直接调用地址选择
      chooseAddress();
    } else {
      // 未授权，引导用户授权
      authorizeAddress();
    }
  },
  fail: (err) => {
    console.error('获取授权状态失败', err);
    uni.showToast({ title: '获取授权状态失败', icon: 'none' });
  }
});

调用地址选择接口

无论是直接调用还是引导授权后调用，最终都需要通过uni.chooseAddress接口触发微信的地址选择器，该接口会返回用户选择的地址信息（姓名、手机号、省市区、详细地址等）。

接口说明：

接口：uni.chooseAddress()
功能：调起微信小程序的地址选择界面,用户可从已有地址中选择或新增地址。
返回参数：
- 成功：返回res对象，包含userName（姓名）、telNumber（手机号）、provinceName（省份）、cityName（城市）、countyName（区县）、detailInfo（详细地址）等字段。
- 失败：返回err对象，包含errCode（错误码）和errMsg（错误信息）。

代码示例：

// 调用地址选择接口
function chooseAddress() {
  uni.chooseAddress({
    success: (res) => {
      console.log('获取地址成功', res);
      // 处理地址数据，例如存储到本地或提交到后端
      const addressInfo = {
        name: res.userName,
        phone: res.telNumber,
        province: res.provinceName,
        city: res.cityName,
        county: res.countyName,
        detail: res.detailInfo
      };
      // 存储到本地
      uni.setStorageSync('userAddress', addressInfo);
      // 提示用户
      uni.showToast({ title: '地址获取成功', icon: 'success' });
    },
    fail: (err) => {
      console.error('获取地址失败', err);
      // 根据错误码处理
      if (err.errCode === -2) {
        // 用户取消选择
        uni.showToast({ title: '取消选择地址', icon: 'none' });
      } else if (err.errCode === -1) {
        // 系统错误或接口未授权
        uni.showToast({ title: '获取地址失败，请重试', icon: 'none' });
      }
    }
  });
}

处理用户拒绝授权的情况

如果用户点击"拒绝授权"，后续调用uni.chooseAddress将不会弹出授权弹窗（需通过uni.openSetting引导用户手动开启权限）。

处理逻辑：

当uni.chooseAddress失败且错误码为-1（表示未授权）时，提示用户"需要授权才能获取地址"，并提供"去设置"按钮。
调用uni.openSetting打开小程序设置页面,用户可手动开启地址权限。

代码示例：

// 引导用户授权
function authorizeAddress() {
  uni.authorize({
    scope: 'scope.address',
    success: () => {
      // 授权成功，调用地址选择
      chooseAddress();
    },
    fail: (err) => {
      console.error('授权失败', err);
      // 用户拒绝授权，引导去设置
      uni.showModal({
        title: '提示',
        content: '需要获取您的地址信息才能完成操作，请前往设置开启权限',
        confirmText: '去设置',
        success: (res) => {
          if (res.confirm) {
            // 打开设置页面
            uni.openSetting({
              success: (settingRes) => {
                if (settingRes.authSetting['scope.address']) {
                  // 用户开启了权限，重新调用地址选择
                  chooseAddress();
                }
              }
            });
          }
        }
      });
    }
  });
}

完整流程整合

将上述步骤整合为一个完整的方法，可在页面加载或点击"选择地址"按钮时调用。

完整代码示例（页面中）：

export default {
  data() {
    return {
      addressInfo: null // 存储地址信息
    };
  },
  methods: {
    // 获取用户地址
    getUserAddress() {
      // 检查授权状态
      uni.getSetting({
        success: (res) => {
          if (res.authSetting['scope.address']) {
            this.chooseAddress();
          } else {
            this.authorizeAddress();
          }
        },
        fail: (err) => {
          console.error('获取授权状态失败', err);
          uni.showToast({ title: '获取授权状态失败', icon: 'none' });
        }
      });
    },
// 调用地址选择接口
chooseAddress() {
  uni.chooseAddress({
    success: (res) => {
      this.addressInfo = {
        name: res.userName,
        phone: res.telNumber,
        province: res.provinceName,
        city: res.cityName,
        county: res.countyName,
        detail: res.detailInfo
      };
      // 存储到本地
      uni.setStorageSync('userAddress', this.addressInfo);
      uni.showToast({ title: '地址获取成功', icon: 'success' });
    },
    fail: (err) => {
      console.error('获取地址失败', err);
      if (err.errCode === -2) {
        uni.showToast({ title: '取消选择地址', icon: 'none' });
      } else if (err.errCode === -1) {
        this.authorizeAddress();
      }
    }
  });
},
// 引导用户授权
authorizeAddress() {
  uni.authorize({
    scope: 'scope.address',
    success: () => {
      this.chooseAddress();
    },
    fail: () => {
      uni.showModal({
        title: '提示',
        content: '需要获取您的地址信息才能完成操作，请前往设置开启
		    	
        	        		标签：        		    #uniapp 地址
        		        		    #微信小程序 获取