uni-app Vue3 实现小程序如何获取微信用户的收货地址_uniapp 收货地址解析 vue 3.0

前言

技术栈：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){}
})
1
2
3
4

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

• 报错信息
  

• 配置
  ①、在uniapp搜索 requiredPrivateInfos => 左侧manifest.json应用配置 => Ctrl + F从页面找到 requiredPrivateInfos => 点击详见
  

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

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

③、由于修改了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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

打印用户地址的参数