前言

技术栈:uni-app + Vue3
编码工具:HBuilder X 和 微信开发者工具
文章内容:实现小程序如何获取微信用户的收货地址

效果图

在这里插入图片描述

1、uniapp官网搜索 chooseAddress

chooseAddress:获取用户收货地址。调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址。
https://uniapp.dcloud.net.cn/api/other/choose-address.html#chooseaddress

获取地址的方法

uni.chooseAddress({
  success(res) {},
  fail(err){}
})

2、但项目还缺少配置微信相关属性,所以需要先配置,否则会报 requiredPrivateInfos 找不到。

  • 报错信息
    在这里插入图片描述

  • 配置
    ①、在uniapp搜索 requiredPrivateInfos => 左侧manifest.json应用配置 => Ctrl + F从页面找到 requiredPrivateInfos => 点击详见
    在这里插入图片描述

在这里插入图片描述

②、打开HBuilder X的manifest.json => 源码视图 => 找到"小程序特有相关" => 将requiredPrivateInfos复制进去

/* 小程序特有相关 */
   "mp-weixin": {
    // 获取用户地址信息
   	"requiredPrivateInfos": ["chooseAddress"]
   },

在这里插入图片描述
③、由于修改了manifest.json项目配置文件,所以需要重启项目才能生效。

3、实战完整代码

<template>
   <view>
   		<view class="pub-box">
   			<view class="pub-box-bd">
   				 	<view class="weui-cell weui-cell_input" @click="onAddressChange">
   					<view class="weui-cell__hd">
   						<view class="weui-label">收件信息</view>
   					</view>
   					<view class="weui-cell__bd"></view>
   					<view class="weui-cell__ft weui-cell__ft_in-access">
   						<input class="weui-input" :disabled="true" style="text-align: right"
   							placeholder-class="vp-placeholder" placeholder="请选择收件信息" :value="userReceiveInfo" />
   					</view>
   			</view>
   		</view>
   </view>
</template>
<script setup>
   import { ref } from "vue"
   
   // 用户收货信息
   const userReceiveInfo = ref('')

   // 选择收货地址
   const onAddressChange = () => {
   	uni.chooseAddress({
   		success: (res) => {
   		    // 解构出来
   			const { cityName, countyName, detailInfo, userName } = res
            // 拼接为完整的收货信息字符串,用于页面的展示
   			userReceiveInfo.value = res ? userName + '(' + cityName + countyName + detailInfo + ')' : ''
   			console.log(res, 'res');
   		},
   		fail: (err) => {
   			console.log(err, 'err');
   		}
   	})
   }
</script>
<style>
.pub-box {
   margin: 20rpx;
   position: relative;
}
.pub-box-bd {
   border: 1rpx solid #eeeeee;
   border-radius: 10rpx;
   overflow: hidden;
   background: #ffffff;
   position: relative;
}

.pub-box-bd .weui-cell::before {
   left: 20rpx;
}
.weui-cell {
   padding: 20rpx;
}
.weui-label {
   width: auto;
}

.weui-cell__bd {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   flex: 1;
}
.weui-cell_input {
   padding-top: 0;
   padding-bottom: 0;
}

.weui-cell__ft {
   color: #353535;
}

.weui-cell__ft text {
   color: #353535;
}
.weui-cell__ft_in-access {
   padding-right: 13px;
   position: relative;
}

.weui-cell__ft_in-access:after {
   content: ' ';
   display: inline-block;
   height: 6px;
   width: 6px;
   border-width: 2px 2px 0 0;
   border-color: #c8c8cd;
   border-style: solid;
   -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
   transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
   position: relative;
   top: -2px;
   position: absolute;
   top: 50%;
   margin-top: -4px;
   right: 2px;
}
</style>

打印用户地址的参数
在这里插入图片描述

GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐