小程序使用微信地址 拒绝后再次唤醒
收到了新的开发需求,小程序需要在新增收货地址的页面支持导入微信收货地址。那我们首先先去官方文档看一下是否有提供相应的api吧。
官方API
官方文档上面写的很清楚,那我们就到复制下面的代码到开发者工具试一下。
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)
}
});
我们把这段代码复制到小程序页面的onload事件里面,看一下会发生什么效果。
进入小程序的时候就弹出了这个窗口,当我点击确定的时候进入了一个界面。
这个就是微信的收货地址列表页,点击左上角的确定就会回到我们自己的小程序的页面
可以很清晰的看到将收货地址都输出在了控制台,之后你每次进小程序调用这个方法都是可以顺利的获取你微信的收货地址的。
上面说的是点击确定后的情况,下面我们来说一下点击取消后的情况。
我们先点击清缓存,把用户缓存给清空,然后再重新进入小程序。
接下来我们点击取消按钮
这个API进入到了接口调用失败的回调函数里面,那我们再重新刷新一下小程序页面,看是否还能够调用这个API。
小程序并没有再次弹出提示问我们是否需要授权,而是已经记住了我们上一次的操作,现在如果我们想要再次授权地址的话呢,只能再次清除缓存,这样对用户的体验是非常不好的。
在官方的文档里面再找了找
这个接口呢是获取用户的当前设置信息,我们直接定义一个按钮触发一下看一下是什么效果
<button open-type="openSetting" type="primary" >查看用户设置</button>
我们在wxml中定义了一个按钮,点击后是跳转到这个界面,可以看到我们的通讯地址按钮是关闭的,因为我们上一次操作是选择了取消,系统就认为你拒绝了授权,那我们现在把这个按钮打开,再重新刷新一下页面。
现在我们又可以获取到微信的收货地址了,但是现在操作起来也很复杂,并不是每个用户都会直接点确定按钮的,所以我们要设计一下,在用户点击取消授权的时候,或者当前用户的通讯地址未授权的时候进行提示,让他能够跳转到该界面进行配置,话不多说上代码。
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>
按钮里面的图片可以网上找素材替换,也可以不用
2.wxss部分
/* 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;
}
3.JS部分
// 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
});
},
})
最终给大家呈上效果图
1.点击按钮导入微信地址
2.点击取消
3.没有授权位置信息,下方会弹出我们自定义的弹出层
4.点击去授权后返回
5.再次点击按钮导入微信地址,数据就呈现到页面上了。
如果有什么问题的话可以在文章下面交流。
