先看一下效果图：
index.wxml代码
<view class="no-content" wx:if="{{areaList.length==0}}"><view class="imgbox"><image style="width:200rpx;" src="/images/none.png" mode="widthFix" /></view><view>暂无地址信息</view></view><view class="address-item" wx:for="{{areaList}}" wx:for-index="index" wx:for-item="item" wx:key="*this"><view><text class="address-item-name">{{item.name}}</text><text class="address-item-phone">{{item.phone}}</text></view><view class="address-item-address">{{item.province}}{{item.city}}{{item.county}}{{item.detailInfo}}</view><view class="address-item-menu"><view class="address-item-left"><block wx:if="{{item.isDefault}}"><text style="color:#1AAD16;">默认</text></block><block wx:else><button class="none-btn btn-default" data-id="{{item.id}}" bindtap="setAddressDefault">设为默认</button></block></view><view class="address-item-right"><button class="none-btn btn-edit" data-id="{{item.id}}" bindtap="gotoAddressinfo">编辑</button><button class="none-btn btn-del">删除</button></view></view></view><view class="button-group"><button style="background-color: red;" data-id="add" bindtap="gotoAddressinfo"><my-icon type="jiahao" size="35"/> 新建地址</button><button bindtap="wxAddress"><my-icon type="weixin" size="35"/> 微信添加</button></view>
index.js代码
//获取应用实例const app = getApp()Page({/*** 页面的初始数据*/data: {areaList:[],},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},//通过微信添加地址wxAddress: function () {var that=this;wx.chooseAddress({success: function (res) {var address = {"name": res.userName,"phone": res.telNumber,"province": res.provinceName,"city": res.cityName,"county": res.countyName,"detailInfo": res.detailInfo,};//获取到的地址存到data里的areaList中that.setData({areaList:that.data.areaList.push(address)});},fail: () => {this.openConfirm() // 如果获取地址权限失败，弹出确认弹窗，让用户选择是否要打开设置，手动去开权限}})}, })
index.wxss
page {background: #f5f5f5;}.no-content{margin: 50% auto;}.button-group {display: flex;width: 100%;height: 100rpx;line-height: 100rpx;position: fixed;left: 0;bottom: 0;}.button-group button {display: inline-block;width: 100%;height: 100rpx;line-height: 100rpx;background-color: #1aad16;color: #fff;white-space: nowrap;text-align: center;font-size: 30rpx;border: none;outline: none;border-style: none;border-radius: 0;cursor: pointer;}.button-group button::after {border: none;}.address-item {background: #fff;padding: 30rpx;color: #555;margin-bottom: 20rpx;}.address-item view {height: 50rpx;line-height: 50rpx;}.address-item-name {font-weight: bold;padding-right: 10rpx;}.address-item-address {color: #999;}.address-item-menu {display: flex;height: 60rpx;line-height: 60rpx;}.address-item-menu button {color: #333;font-size: 25rpx;padding: 0;margin: 0;}.address-item-left {flex: 1;}.address-item-left button {float: left;}.address-item-right {display: flex;}.address-item-right .btn-del {color: red;margin-left: 30rpx;}
