10.配置页面 - 收货地址区域
(1). 创建收货地址组件
- 在
components目录上鼠标右键，选择新建组件，并填写组件相关的信息：
2. 渲染组件
<template> <view> <!-- 选择收获地址 --> <view class="address-chose-box"> <button type="primary" size="mini" class="btnChoseAddress">请选择收获地址+</button> </view> <!-- 底部的边框线 --> <image src="@/static/cart_border@2x.png" class="address-border"></image> </view> </template> <script> export default { name: "my-address", data() { return { }; } } </script> <style lang="scss"> .address-border { // 去除图片与其他元素的间隙 display: block; height: 5px; width: 100%; } .address-chose-box { height: 90px; display: flex; justify-content: center; align-items: center; } </style>
<!-- 渲染收货信息的盒子 --> <view class="address-info-box"> <view class="row1"> <view class="row1-left"> <view class="username">收货人：<text>escook</text></view> </view> <view class="row1-right"> <view class="phone">电话：<text>138XXXX5555</text></view> <uni-icons type="arrowright" size="16"></uni-icons> </view> </view> <view class="row2"> <view class="row2-left">收货地址：</view> <view class="row2-right">河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx </view> </view> </view>
.address-info-box { font-size: 12px; height: 90px; display: flex; // 纵向分布 flex-direction: column; justify-content: center; padding: 0 5px; .row1 { display: flex; justify-content: space-between; .row1-left { .username {} } .row1-right { display: flex; justify-content: space-around; .phone {} } } .row2 { display: flex; justify-content: space-around; align-items: center; margin-top: 10px; .row2-left { white-space: nowrap; } .row2-right { margin-left: 5px; } } }
(2).实现收货地址区域的按需展示
- 在data中定义收获地址的信息对象
在uniapp中，空对象的布尔值默认为true，空字符串的布尔值默认为false。
<!-- 选择收获地址 --> <view class="address-chose-box" v-if="JSON.stringify(address) === '{}'"> <button type="primary" size="mini" class="btnChoseAddress" >请选择收获地址+</button> </view> <!-- 渲染收获信息的盒子 --> <view class="address-info-box" v-else> 省略... </view> <script> export default { name: "my-address", data() { return { // 收货地址 address: { }, }; } } </script>
(3).现选择收货地址的功能
- 为 请选择收货地址+ 的 button 按钮绑定点击事件处理函数：
<!-- 选择收获地址 --> <view class="address-chose-box"> <button type="primary" size="mini" class="btnChoseAddress" v-show="address" @click="chooseAddress()">请选择收获地址+</button> </view> methods: { async chooseAddress() { // 这个是调用地理位置的封装方法 const resp = await uni.chooseAddress().catch(err => err); console.log(resp) } }
微信小程序官方文档提示：自 2022 年 7 月 14 日后发布的小程序，若使用该接口，需要在 manifest.json
中进行声明，否则将无法正常使用该接口，2022年7月14日前发布的小程序不受影响。
如果要使用地理位置的API那么我们需要在manifest.json中声明
uni-app项目 在项目根目录中找到 manifest.json 文件，在左侧导航栏选择源码视图，找到mp-weixin 节点，在节点后面加上：
"requiredPrivateInfos": [ "getLocation", "onLocationChange", "startLocationUpdateBackground", "chooseAddress" ]
配置信息如下:
当我们点击的时候: 我们发现自动跳转到这个页面
当我们点击确定之后->会输出控制台的信息
