微信小程序通过微信添加地址（wx.chooseAddress用法）

先看一下效果图：

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;
}

微信小程序通过微信添加地址（wx.chooseAddress用法）相关推荐

微信小程序实现收货地址城市选择效果(添加收货地址)
先来张效果图这里主要是城市选择效果,请忽视其他,不要吐槽,谢谢接下来看一下代码吧 wxml  < ...
微信小程序获取客户端IP地址,HTTPS接口(ts\js)
微信小程序获取用户IP地址,HTTPS接口很简单实用的ip地址接口, 只返回当前ip 接口返回内容格式为: {"ip":"27.211.239.98"} // ...
微信小程序之获取用户地址
在微信小程序中获取定位信息今天一整天基本上都在处理在微信小程序中获取准确地址,给出定位并给出所在城市的问题.经过走了半天弯路,现在总结一下所需要的步骤. 一. 先到腾讯位置服务中心获取KEY 通过小 ...
微信小程序如何获取手机地址定位
微信小程序如何获取手机地址定位微信小程序中,经常需要获取地址定位. 微信小程序中如何获取地址定位. wx.getLocation({success: function (res) {console. ...
微信小程序-获取微信收货地址
微信小程序获取微信收货地址文章目录微信小程序获取微信收货地址一.在小程序管理后台( 小程序管理后台),「开发」-「开发管理」-「接口设置」中自助开通该接口权限. 二.开通之后直接调用接口. // ...
微信小程序iBeacon获取问题（wx.onBeaconUpdate不执行）【已解决】
微信小程序iBeacon获取问题(wx.onBeaconUpdate不执行)[已解决] 问题描述软件硬件使用代码问题现象解决办法问题描述长话短说,使用某公司的iBeacon标签设备,开发微 ...
微信小程序保存视频到相册wx.saveVideoToPhotosAlbum（）
一.微信小程序保存视频到相册wx.saveVideoToPhotosAlbum() 功能描述保存视频到系统相册.支持mp4视频格式. 参数 Object object 属性类型默认值必填说明 ...
微信小程序提示框使用，wx.showToast
微信小程序提示框使用 1.wx.showToast在官方文档的位置 2.使用代码模板 wx.showToast({title: '价格不能等于0',icon: 'success',duration: ...
openid java_微信小程序调用微信登陆获取openid及java做为服务端示例
一.微信小程序第一步:调用 wx.login获取code 文档地址第二步:判断用户是否授权读取用户信息文档地址第三步:调用wx.getUserInfo读取用户数据文档地址第四步:由于小程序 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...

微信小程序通过微信添加地址（wx.chooseAddress用法）

先看一下效果图：

index.wxml代码

index.js代码

微信小程序通过微信添加地址（wx.chooseAddress用法）相关推荐

最新文章

热门文章