小程序使用微信收货地址

小程序使用微信地址, 拒绝后再次唤醒授权

微信小程序使用微信收货地址，今天在不同的场景下对这个功能进行实现

一、业务场景

小程序在添加收货地址的时候，可以直接选择微信历史添加的收货地址，避免重复添加。
存在用户误触的情况，用户首次选择收货地址时，如果点击了取消，后续如何再次唤醒。

二、效果图

三、官方API

1. 通过官方给到的文档，可以很清晰的看到这个接口的使用方式及回调函数。

wx.chooseAddress({success (res) {console.log(res.userName)console.log(res.postalCode)console.log(res.provinceName)console.log(res.cityName)console.log(res.countyName)console.log(res.detailInfo)console.log(res.nationalCode)console.log(res.telNumber)}
});

四、业务场景代码实现

 复制代码到微信开发者工具看一下具体效果。
将下面这段代码直接放到后缀为JS的文件当中的onload函数中，保存执行。
可以看到页面加载完成后就触发了这个事件，弹出了这个授权访问通讯地址的窗口。
点击确定后即跳转到微信收货地址列表页，选择对应的收货地址就会回到小程序，可以在控制台清晰的看到我们所选择的地址数据。

上面这种场景针对的是用户操作时一路绿灯的情况下，下面这个场景则是用户初次授权即拒绝的情况。
清除小程序缓存 --> 重新加载小程序 --> 弹窗点击取消按钮。
可以看到这个接口返回的是fail auth deny。

刷新页面或点击编译按钮，让小程序重新加载。
但是这一次小程序并没有再次弹出窗口询问我们是否需要授权，而是已经记住了我们上一次选择的操作，如果想再次唤醒收货地址这个弹窗的话，只能选择清除缓存，这样对于用户的使用体验很不友好。
在官方文档里面找到另外一个接口，可以获取用户的当前设置，在wsml文件上我们定义一个按钮，对该接口进行调用,可以看到在通讯地址这一栏是关闭的。
打开该按钮，返回小程序，再次唤醒授权，又可以获取到用户的微信地址信息了。
接下来需要对按钮样式进行一个封装，对用户取消收货地址的授权事件进行一个捕捉。

<button open-type="openSetting"  type="primary" >查看用户设置</button>

1.wxml部分

<view style="" class="leftBoxBtn"><view style="" class="wxAddBtn"><image src="/Images/wxLogoAddress.png" style="" class="wxImg" lazy-load="true"mode="widthFix"></image><text style="" class="drAdd" bindtap="importWxAdd">导入微信地址</text></view>
</view><view  class="inputBox"><input type="text" placeholder="姓名"  value="{{name}}" />
</view>
<view  class="inputBox"><input type="text" placeholder="电话"  value="{{phone}}" />
</view>
<view  class="inputBox"><input type="text" placeholder="省份"  value="{{province}}" />
</view>
<view  class="inputBox"><input type="text" placeholder="市"  value="{{city}}" />
</view>
<view  class="inputBox"><input type="text" placeholder="区"  value="{{area}}" />
</view>
<view  class="inputBox"><input type="text" placeholder="详细地址"  value="{{detailAddress}}" />
</view><!-- 这一部分是弹出层的效果,直接复制到你的wxml页面底部即可 -->
<view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}"><!-- 如果想点击弹窗外不隐藏，取消bindtap点击事件即可 --><view class="zan-dialog__mask" bindtap="hideBox" /><view class="zan-dialog__container"><view style=''><view style="font-size:28rpx;color:black;padding-left:20rpx;padding-top:20rpx;padding-bottom:20rpx;">温馨提示</view><view style="padding-left:20rpx;font-size:28rpx;">是否授权位置信息</view><view style="display:flex;width:100%;padding-top:20rpx;"><view style="width:50%;"><button style="width:200rpx;" bindtap="hideBox">取消</button></view><view style="width:50%;"><button open-type="openSetting" style="width:200rpx;" type="primary" bindtap="hideBox">授权</button></view></view></view></view>
</view>

/* pages/test/index.wxss */
.leftBoxBtn {width: 50%;display: inline;display: flex;align-items: center;justify-content: center;
}
.wxAddBtn {width: 313rpx;height: 69rpx;background: #F59A23;color: white;font-size: 30rpx;display: flex;align-items: center;justify-content: center;border-radius: 49rpx;
}
.wxImg {width: 31rpx;height: 26rpx;line-height: 69rpx;
}
.drAdd {margin-left: 5rpx;line-height: 69rpx;
}
.inputBox{margin-top:20rpx;margin-left:20rpx;
}/* 下面的是自定义模态框的样式 */
.zan-dialog__mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;background: rgba(0,0,0, 0.8);display: none;
}.zan-dialog__container {position: fixed;bottom: 0;width: 750rpx; height: 250rpx; background: white;transform: translateY(300%); transition: all 0.4s ease;z-index: 12;box-shadow: 0px 3px 3px 2px gainsboro;
}.zan-dialog--show .zan-dialog__container {transform: translateY(0);
}.zan-dialog--show .zan-dialog__mask {display: block;
}

// pages/test/index.js
Page({/*** 页面的初始数据*/data: {showDialog: false, //弹窗显示隐藏控制效果name:'',//姓名phone:'',//电话province:'',//省份city:'',//城市area:'',//区镇detailAddress:'',//详细地址},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: '新增收货地址'})},//导入微信地址importWxAdd: function () {let that = this;wx.getSetting({success(res) {if (res.authSetting['scope.address']) {//console.log("已授权=====")// 已经授权，可以直接调用 chooseAddress 获取用户地址wx.chooseAddress({success(res) {//console.log("获取用户信息成功", res);that.setData({name: res.userName,phone: res.telNumber,province:res.provinceName,city:res.cityName,area:res.countyName,detailAddress:res.detailInfo});},fail(res) {//console.log("获取用户信息失败", res);//弹出提示框 提示用户授权that.setData({showDialog: !that.data.showDialog});}})} else {//console.log("未授权=====")//弹出提示框 提示用户授权that.setData({showDialog: !that.data.showDialog});}}})},//隐藏弹出层hideBox: function () {this.setData({showDialog: !this.data.showDialog});},})

小程序使用微信收货地址相关推荐

uniapp 小程序获取微信收货地址
引言小程序商城中,不可避免会出现获取并添加微信的收货地址,根据现在小程序的规则实现获取微信收货地址封装获取微信收货地址API // asyncWx.js/*** 获取用户收货地址 uni.choo ...
微信小程序-获取微信收货地址
微信小程序获取微信收货地址文章目录微信小程序获取微信收货地址一.在小程序管理后台( 小程序管理后台),「开发」-「开发管理」-「接口设置」中自助开通该接口权限. 二.开通之后直接调用接口. // ...
微信小程序获取用户收货地址与指纹验证接口(安卓和iphone)
@toc 1.获取用户收货地址接口wx.chooseAddress() wx.chooseAddress(Object object)获取用户收货地址,此接口调用的是微信的收货地址.微信收货地址不 ...
微信小程序获取用户收货地址完整代码
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 获取用户收货地址需要用户点击授权,所以有两种情况,确认授权.取消授权. 情况一,用户第一次访问用户地址授权,并 ...
5分钟快速了解微信小程序如何获取收货地址,耶稣也拦不住,我说的！！！
写在前面最近在学习一个微信小程序的项目,其中涉及了获取收货地址的部分,我将其总结了下,希望能给大家带来些许帮助~ 步骤分析绑定点击事件调用wx.chooseAddress获取用户的收货地址利用 ...
微信小程序的选择收货地址、新增地址、地址管理等模块的总结(1)
这几天主要在做公司微信小程序项目2.0版本的一些新增功能,其中就包括把原来的地址等个人固定信息独立成一个模块进行管理(选择收货地址),包括新增地址.地址修改.删除等可以直接选取个人地址而不需要每次都填 ...
微信小程序获取用户收货地址列表wx.chooseAddress
微信官方的说明,直接调用即可,但是由于该微信弹框如果拒绝,之后再不会弹出提示,而恰好wx.openSetting(),可以调起授权设置界面,显示用户已经调用过的微信授权,所以我们需要饶一下小弯路,但是 ...
微信小程序手动添加收货地址省市区联动
先看效果图 html部分用小程序的piceker-view 嵌入页面的滚动选择器 <picker-view indicator-style="height: 50px;" ...
小程序开发选择收货地址的交互实现
1.用户到了确认订单页面,首页通过接口将用户已经有填写的默认地址先过滤出来并展示出来,如果没有地址则显示去新增地址按钮. 此方法是用户选了某个地址回传过来的对象 setUserAddress(obj) ...
uniApp使用uni.chooseAddress()获取微信收货地址
获取微信收货地址使用uniapp或者原生微信小程序获取微信的收货地址 1.需要在开发平台申请权限在[开发]-[开发管理]-[接口设置]-[获取用户收货地址]–申请该权限,审核通过后方可使用. 2. ...

小程序使用微信收货地址

目录

一、业务场景

二、效果图

三、官方API

四、业务场景代码实现

小程序使用微信收货地址相关推荐

最新文章

热门文章