前端Hx开发微信小程序实现地址获取功能

技术uniapp、uviewui、vue2、javascript第一步配置manifest.json文件主要配置你的appid还有必须配置permission描述用途强制要求不然会报错/* 小程序特有相关 */ mp-weixin: { appid: , setting: { urlCheck: false }, requiredPrivateInfos: [ chooseAddress, // 获取收货地址 getLocation, // 获取当前定位 chooseLocation // 地图选点 ], permission: { scope.userLocation: { desc: 用于获取您的位置提供跑腿配送服务 // 必须写清楚用途审核才会过 }, scope.address: { desc: 用于获取您的收货地址方便下单配送 } }, usingComponents: true },第二步登录微信公众平台可以在账号信息那边获取appid在开发管理中找到接口设置找到以下接口点击「开通」chooseAddress获取收货地址getLocation获取地理位置chooseLocation打开地图选择位置注意申请接口可能显示没有权限是因为类目不符合你要去主页那边设置类目一般用于距离的类目就行了比如物流、运输。第三步封装组件template view ms-back-nav :titletitle :showBacktrue/ms-back-nav view classaddress-container view classcontent !-- 显示选中的地址 -- view classtip {{ currentTitle || 请选择位置}} /view !-- 使用原生input组件 -- view classitem text姓名/text input typetext v-modelformData.name placeholder请输入姓名 classnative-input / /view view classitem text手机号/text input typetel v-modelformData.phone placeholder请输入手机号 classnative-input / /view view classitem text地址/text input v-ifformData.address disabled v-modelformData.address placeholder请输入地址 classnative-input / /view view classitem text详细地址/text textarea v-ifformData.detailAddress disabled v-modelformData.detailAddress placeholder请输入详细地址 classnative-textarea / /view view classbtn-box u-button typesuccess clickchooseLocation选择地址/u-button u-button typeprimary clicksubmitForm提交/u-button /view /view /view /view /template script import msBackNav from /components/ms-backNav/index.vue export default { components: { msBackNav }, data() { return { title: 地址详情, currentTitle : 请选择位置, addressId: null, formData: { address: , detailAddress: , latitude: , longitude: , name: , phone: , }, } }, onLoad(options) { // 获取路由参数 if (options.id) { this.addressId options.id; this.currentTitle 编辑地址; // 这里可以根据id加载地址数据 this.loadAddressData(options.id); } else { this.currentTitle 添加地址; } }, methods: { // 根据ID加载地址数据 loadAddressData(id) { // 模拟从后端获取数据 uni.showLoading({ title: 加载中... }); // 模拟异步请求 setTimeout(() { // 模拟地址数据 const addressData { address: 北京市海淀区中关村大街1号, detailAddress: 科技大厦1001室, latitude: 39.9847, longitude: 116.3055, name: 张三, phone: 13800138000 }; // 填充表单数据 this.formData addressData; uni.hideLoading(); uni.showToast({ title: 加载成功, icon: success }); }, 1000); }, chooseLocation() { uni.chooseLocation({ success: (res) { console.log(res) this.formData.detailAddress res.address this.formData.address res.name this.formData.latitude res.latitude this.formData.longitude res.longitude uni.showToast({ title: 选择成功, icon: success }) } }) }, submitForm() { if (!this.formData.name) { uni.showToast({ title: 请输入姓名, icon: none }) return } if (!this.formData.phone) { uni.showToast({ title: 请输入手机号, icon: none }) return } if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) { uni.showToast({ title: 手机号格式不正确, icon: none }) return } if (!this.formData.detailAddress) { uni.showToast({ title: 请输入详细地址, icon: none }) return } if (!this.formData.address) { uni.showToast({ title: 请选择地址, icon: none }) return } uni.showToast({ title: 提交成功, icon: success }) setTimeout(() { uni.navigateBack() }, 1500) } } } /script style langscss scoped .address-container { padding: 20rpx 30rpx 30rpx; min-height: 100vh; box-sizing: border-box; } /* 确保输入框可以正常获取焦点 */ u-input, u-textarea { position: relative; z-index: 1; } /* 确保内容区域可以正常滚动 */ .content { z-index: 1; position: relative; } .tip { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; } .item { margin-bottom: 30rpx; text { display: block; margin-bottom: 10rpx; font-size: 28rpx; color: #333; } } /* 原生输入框样式 */ .native-input { width: 100%; height: 80rpx; padding: 0 20rpx; border: 2rpx solid #ddd; border-radius: 8rpx; font-size: 28rpx; background-color: #fff; box-sizing: border-box; } /* 原生文本域样式 */ .native-textarea { width: 100%; min-height: 120rpx; padding: 20rpx; border: 2rpx solid #ddd; border-radius: 8rpx; font-size: 28rpx; background-color: #fff; box-sizing: border-box; resize: none; } .btn-box { display: flex; gap: 20rpx; margin-top: 30rpx; } /style