<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'> <view class='modal-content'>  <scroll-view scroll-y class='main-content'>   <slot></slot>  </scroll-view> </view></view>

n: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999;}/*遮罩內容*/.modal-content{ display: flex; flex-direction: column; width: 65%; background-color: #fff; border-radius: 10rpx; padding: 20rpx; text-align: center;}/*中間內容*/.main-content{ flex: 1; height: 100%; overflow-y: hidden;  max-height: 80vh; /* 內容高度最高80vh 以免內容太多溢出*/}.bottom {  border-radius: 80rpx;  margin: 70rpx 50rpx;  font-size: 35rpx;}

Component({ /**  * 組件的屬性列表  */ properties: {  //是否顯示modal彈窗  show: {   type: Boolean,   value: false  },  //控制底部是一個按鈕還是兩個按鈕，默認兩個  single: {   type: Boolean,   value: false  } }, /**  * 組件的初始數據  */ data: { }, /**  * 組件的方法列表  */ methods: {  // 點擊modal的回調函數  clickMask() {   // 點擊modal背景關閉遮罩層，如果不需要注釋掉即可   this.setData({ show: false })  },  // 點擊取消按鈕的回調函數  cancel() {   this.setData({ show: false })   this.triggerEvent('cancel') //triggerEvent觸發事件  },  // 點擊確定按鈕的回調函數  confirm() {   this.setData({ show: false })   this.triggerEvent('confirm')  } }})

{ "component": true, "usingComponents": {}}

<!-- modal彈窗--> <modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'>  <view class='modal-content'>   <scroll-view scroll-y class='main-content'>  <view wx:if="{{canIUse}}" >  <view class='header'>      <text>提示</text>    </view>    <view class='content'>     <image src="/images/goods_img2.png"></image>     <text>是否登錄并繼續使用該程序</text>    </view>    <view class="header_title">     <text class="dian">•</text>     <text>登錄程序需進行微信授權</text>    </view>    <view class="modal_footer">    <view class="bottom">     <button class='bottom_a'>      拒絕     </button>     <button class='bottom_b' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">       去登錄     </button>    </view>    </view></view>   </scroll-view>  </view> </modalView>

.header {  text-align: start;  height: 100rpx;  line-height: 100rpx;} .header image {  width: 200rpx;  height: 200rpx;} .content { display: flex; margin-left: 50rpx; height: 100rpx; line-height: 100rpx;}.content image{ width: 100rpx; height: 100rpx;} .content text { font-size: 24rpx; margin-left: 20rpx;} .header_title{ margin-left: 50rpx; text-align: start; font-size: 24rpx; color: #ccc; line-height: 100rpx; display: flex;}.dian{ margin-right: 6rpx; font-size: 36rpx;}.modal_footer{  display: flex;  justify-content: flex-end;}.bottom { display: flex;  color: #ccc; font-size: 24rpx; width: 280rpx;}button::after { border: none;}.bottom button{ background-color: #fff; height: 50rpx; line-height: 50rpx;}.bottom_a{ font-size: 24rpx;}.bottom_b{ font-size: 28rpx; color: #0db95a;}

//home.js//獲取應用實例const app = getApp()Page({ data: {  canIUse: wx.canIUse('button.open-type.getUserInfo'),  showModal: true,   single: false }, onLoad:function(){  var that = this;  // 查看是否授權  wx.getSetting({   success: function (res) {    if (res.authSetting['scope.userInfo']) {     wx.getUserInfo({      success: function (res) {       wx.login({        success: res => {         console.log("用戶的code:" + res.code);        }       });      }     });    } else {     that.setData({      showModal: true     });    }   }  }); }, bindGetUserInfo: function (e) {  if (e.detail.userInfo) {   //用戶按了允許授權按鈕   var that = this;   // 獲取到用戶的信息了，打印到控制臺上看下   console.log("用戶的信息如下：");   console.log(e.detail.userInfo);   //授權成功后,通過改變 showModal的值，讓實現頁面顯示出來，把授權頁面隱藏起來   that.setData({    showModal: false   });  } else {   var that = this;   //用戶按了拒絕按鈕   wx.showModal({    title: '警告',    content: '您點擊了拒絕授權，將無法獲取你的信息!!!',    showCancel: false,    confirmText: '返回授權',    success: function (res) {     // 用戶沒有授權成功，不需要改變 isHide 的值     if (res.confirm) {      that.setData({       showModal: true      });     }    }   });  } }})

{ "usingComponents": {  "modalView": "../../components/modal/modal" }}