
uni-app Vue3 实现小程序如何获取微信用户的收货地址
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
前言
技术栈: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>
打印用户地址的参数

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 个月前
更多推荐

所有评论(0)