封裝一個小程序獲取用戶信息的組件

父組件wxml：

 <!--點擊獲取用戶信息-->
<view class="publish-container" bindtap="onPublish">
</view>
 <!--底部彈出層-->
  <x-login modalShow="{{modalShow}}" 
  bind:loginsuccess="onLoginSuccess"
  bind:loginfail="onLoginFail"
  >
  </x-login>

父組件的js代碼：

 /**
   * 頁面的初始數據
   */
  data: {
    modalShow: false //控制底部彈出層是否顯示
  },
  //發佈功能
  onPublish() {
    //判斷用戶是否授權
    wx.getSetting({
      success: (res) => {
        console.log(res)
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: (res) => {
              console.log(res)
              //傳入一個對象，然後纔可以event.detail
              this.onLoginSuccess({
                detail: res.userInfo
              })
            }
          })
        } else {
          this.setData({
            modalShow: true
          })
        }
      }
    })
  },
  //授權成功的話
  onLoginSuccess(event) {
    console.log(event)
    const detail = event.detail
    wx.navigateTo({
      url: `../blog-edit/blog-edit?nickName=${detail.nickName}&avatarUrl=${detail.avatarUrl}`,
    })
  },
  //用戶拒絕授權的話
  onLoginFail() {
    wx.showModal({
      title: '授權用戶才能發佈',
      content: '',
    })
  },

子父組件wxml的代碼

<x-bottom-modal modalShow="{{modalShow}}">
  <view slot="modal-content">
    <button class="login"
    open-type="getUserInfo" 
    bindgetuserinfo="onGotUserInfo"
    >獲取微信授權信息</button>
  </view>
</x-bottom-modal>

css代碼：

.login{
  font-size: 32rpx;
  background: #d43c33;
  color: #fff;
  margin: 110rpx;
}

js代碼：

properties: {
    modalShow: Boolean
  },
    /**
   * 組件的方法列表
   */
  methods: {
    onGotUserInfo(event) {
      console.log(event)
      const userInfo = event.detail.userInfo
      //當前用戶允許授權
      if (userInfo) {
        this.setData({
          modalShow: false
        })
        //往組件外部傳值
        this.triggerEvent('loginsuccess',userInfo)
      } else {
        this.triggerEvent('loginfail')
      }
    }
  }

子組件的wxml代碼

<view class="modal" hidden="{{!modalShow}}">
  <view class="panel">
    <i class="iconfont icon-shanchu" bind:tap="onClose" />
    <!-- slot插槽  具名插槽-->
    <slot name="modal-content"></slot>
  </view>
</view>

js代碼

  /**
   * 組件的屬性列表
   */
  properties: {
    modalShow: Boolean
  },
  methods: {
    onClose() {
      this.setData({
        modalShow: false
      })
    }
  }

css代碼

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
}

.panel{
  position: absolute;
  bottom: 0rpx;
  left: 0;
  width: 100%;
  height: 300rpx;
  background-color: #f8f8f8;
}

.modal .icon-shanchu{
  position: absolute;
  right: 10rpx;
  top: 10rpx;
  padding: 20rpx;
}

效果如下: