程序开发

小程序自定义弹窗 获取授权失败重新获取授权

小程序自定义弹窗 获取授权失败重新获取授权

小程序很多获取的权限都从 button 组件中获取,这就经常需要弹窗提示操作了。而小程序自带的模态框又没法设置button获取信息,只能自定义一个模态框了

下面以获取微信地址为例:

在app.wxss中添加样式(很多地方需要用模态框,直接写在全局样式表中更方便)

  1. /* 提示框 */
  2. .box{
  3.     positionfixed;
  4.     top: 30%;
  5.     width: calc(100vw - 40rpx);
  6.     background#fff;
  7.     z-index: 100;
  8.     margin: 0 20rpx;
  9.     border-radius: 10rpx;
  10.     overflowhidden;
  11. }
  12. .box-tit{
  13.     height: 100rpx;
  14.     line-height: 100rpx;
  15.     padding: 0 20rpx;
  16.     text-aligncenter;
  17.     border-bottom1px solid #eee;
  18. }
  19. .box-content{
  20.     padding: 40rpx 20rpx;
  21.     font-size: 30rpx;
  22.     color#666;
  23. }
  24. .box-btn{
  25.     display: flex;
  26.     align-items: center;
  27. }
  28. .box-btn button{
  29.     flex-grow: 1;
  30.     margin: 0;
  31.     color#333;
  32.     border-radius: 0;
  33. }
  34. .box-btn button:first-child{
  35.     border-right1px solid #eee;
  36. }
  37. .box-btn button::after{
  38.     bordernone;
  39. }
  40. .box-bg{
  41.     positionfixed;
  42.     top: 0;
  43.     left: 0;
  44.     width: 100vw;
  45.     height: 100vh;
  46.     background: rgba(0, 0, 0, 0.3);
  47.     z-index: 1;
  48. }

然后在wxml中添加:

  1. <view wx:if="{{boxShow}}" class='box-bg' bindtap='closeBox'></view>
  2. <view wx:if="{{boxShow}}" class='box'>
  3.     <view class='box-tit'>提示</view>
  4.     <view class='box-content'>上门地址需要授权才能获取,是否去获取授权?</view>
  5.     <view class='box-btn'>
  6.         <button bindtap='closeBox'>取消</button>
  7.         <button open-type='openSetting' bindopensetting="boxConfirm">去授权</button>
  8.     </view>
  9. </view>

最后看js:

  1. Page({
  2.   /**
  3.    * 页面的初始数据
  4.    */
  5.   data: {
  6.       boxShow: false,
  7.   },
  8.   /**
  9.    * 获取地址 点击获取地址按钮的事件
  10.    */
  11.   getAddress:function(e){
  12.       let that = this
  13.      // 首先获取授权状态
  14.     wx.getSetting({
  15.         success: function(res) {
  16.             console.log(res)
  17.             if (res.authSetting['scope.address']) {
  18.                  // 如果授权 继续获取
  19.                 that.chooseAddress()
  20.             }else{
  21.                 // 如果没有授权 第一次弹出授权
  22.                 wx.authorize({
  23.                     scope: 'scope.address',
  24.                     success(res) {
  25.                         that.chooseAddress()
  26.                     },
  27.                     fail(err) {
  28.                         // 取消授权后 弹出模态框重新授权
  29.                         that.setData({
  30.                             boxShow: true
  31.                         })
  32.                     }
  33.                 })
  34.             }
  35.         },
  36.         fail: function(res) {},
  37.         complete: function(res) {},
  38.     })
  39.   },
  40.   /**
  41.    * chooseAddress  得到微信地址
  42.    */
  43.   chooseAddress:function(){
  44.       wx.chooseAddress({
  45.           success: res => {
  46.               console.log(res.userName)
  47.               console.log(res.postalCode)
  48.               console.log(res.provinceName)
  49.               console.log(res.cityName)
  50.               console.log(res.countyName)
  51.               console.log(res.detailInfo)
  52.               console.log(res.nationalCode)
  53.               console.log(res.telNumber)
  54.           },
  55.       })
  56.   },
  57.   /**
  58.    * 关闭弹窗盒子
  59.    */
  60.   closeBox:function(){
  61.     this.setData({
  62.         boxShow: false
  63.     })
  64.   },
  65.   /**
  66.    * 弹窗盒子确定
  67.    */
  68.   boxConfirm:function(e){
  69.       this.setData({
  70.           boxShow: false
  71.       })
  72.   }
  73. })

 

黄良钵
博客站长,前端开发工程师
查看“黄良钵”的所有文章 →

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关推荐