小程序自定义弹窗 获取授权失败重新获取授权
BG7ZAG
|
|
2,383
|
0
|
程序开发

510 字
|
3 分钟

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

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

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

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

  1. /* 提示框 */
  2. .box{
  3.     position: fixed;
  4.     top: 30%;
  5.     width: calc(100vw - 40rpx);
  6.     background: #fff;
  7.     z-index: 100;
  8.     margin: 0 20rpx;
  9.     border-radius: 10rpx;
  10.     overflow: hidden;
  11. }
  12. .box-tit{
  13.     height: 100rpx;
  14.     line-height: 100rpx;
  15.     padding: 0 20rpx;
  16.     text-align: center;
  17.     border-bottom: 1px 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-right: 1px solid #eee;
  36. }
  37. .box-btn button::after{
  38.     border: none;
  39. }
  40. .box-bg{
  41.     position: fixed;
  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({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.       boxShow: false,
  8.   },
  10.   /**
  11.    * 获取地址 点击获取地址按钮的事件
  12.    */
  13.   getAddress:function(e){
  14.       let that = this
  15.      // 首先获取授权状态
  16.     wx.getSetting({
  17.         success: function(res) {
  18.             console.log(res)
  19.             if (res.authSetting['scope.address']) {
  20.                  // 如果授权 继续获取
  21.                 that.chooseAddress()
  22.             }else{
  23.                 // 如果没有授权 第一次弹出授权
  24.                 wx.authorize({
  25.                     scope: 'scope.address',
  26.                     success(res) {
  27.                         that.chooseAddress()
  28.                     },
  29.                     fail(err) {
  30.                         // 取消授权后 弹出模态框重新授权
  31.                         that.setData({
  32.                             boxShow: true
  33.                         })
  34.                     }
  35.                 })
  37.             }
  38.         },
  39.         fail: function(res) {},
  40.         complete: function(res) {},
  41.     })
  43.   },
  45.   /**
  46.    * chooseAddress  得到微信地址
  47.    */
  48.   chooseAddress:function(){
  49.       wx.chooseAddress({
  50.           success: res => {
  51.               console.log(res.userName)
  52.               console.log(res.postalCode)
  53.               console.log(res.provinceName)
  54.               console.log(res.cityName)
  55.               console.log(res.countyName)
  56.               console.log(res.detailInfo)
  57.               console.log(res.nationalCode)
  58.               console.log(res.telNumber)
  59.           },
  61.       })
  62.   },
  64.   /**
  65.    * 关闭弹窗盒子
  66.    */
  67.   closeBox:function(){
  68.     this.setData({
  69.         boxShow: false
  70.     })
  71.   },
  73.   /**
  74.    * 弹窗盒子确定
  75.    */
  76.   boxConfirm:function(e){
  77.       this.setData({
  78.           boxShow: false
  79.       })
  80.   }
  81. })

 

小程序授权模态框
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
Vue使用websocket即时通信

							
							

							
字号与尺寸、像素对照表

							
							

							
小程序选择、预览、删除、上传图片

							
							

							
vue修改打包文件的路径

							
							

							
微信小程序所有组件初始化样式box-sizing

							
							

							
微信小程序picker组件中多列选择器的使用