小程序很多获取的权限都从 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({
2.
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. boxShow: false,
8. },
9.
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. })
36.
37. }
38. },
39. fail: function(res) {},
40. complete: function(res) {},
41. })
42.
43. },
44.
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. },
60.
61. })
62. },
63.
64. /**
65. * 关闭弹窗盒子
66. */
67. closeBox:function(){
68. this.setData({
69. boxShow: false
70. })
71. },
72.
73. /**
74. * 弹窗盒子确定
75. */
76. boxConfirm:function(e){
77. this.setData({
78. boxShow: false
79. })
80. }
81. })