封装一个小程序获取用户信息的组件

父组件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;
}

效果如下: