弹出层bottom-modal组件

修改弹出层bottom-modal组件中slot具名插槽
在这里插入图片描述

授权login组件

新建login组件

添加login组件，在login组件中会使用弹出层bottom-modal组件。
在这里插入图片描述

引入弹出层bottom-modal组件

首先在login.json中引入弹出层bottom-modal组件
在这里插入图片描述

{
  "component": true,
  "usingComponents": {
    "x-bottom-modal": "/components/bottom-modal/bottom-modal"
  }
}

在login.wxml中使用弹出层bottom-modal组件，并使用modal-content插槽slot
在这里插入图片描述

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

button的bindgetuserinfo属性

open-type 和 bindgetuserinfo 请参考：button

具体说明如下：
在这里插入图片描述

用户授权

// components/login/login.js
Component({
  properties: {
    modalShow: Boolean
  },
  data: {

  },
  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')
      }
    }
  }
})

点击获取微信授权信息按钮，弹出微信授权弹窗
在这里插入图片描述
点击拒绝输出如下日志：

点击允许输出如下日志，可以看到授权后输出了用户相关的信息。

使用授权login组件

引入login组件

在这里插入图片描述

{
  "usingComponents": {
    "x-search": "/components/search/search",
    "x-login": "/components/login/login"
  }
}

使用login组件

在这里插入图片描述

  <x-login modalShow="{{modalShow}}" bind:loginsuccess="onLoginSuccess" bind:loginfail="onLoginFail">
  </x-login>

点击发布按钮操作

整个过程最开始就是点击发布按钮，点击发布按钮需要先判断用户是否已经授权过，如果已经授权我们自己获取用户信息；如果没有授权过，我们才需要去授权页面进行操作。代码如下：

// pages/blog2/blog2.js
Page({
  data: {
    // 控制底部弹出层是否显示
    modalShow: false,
  },

  // 发布功能
  onPublish() {
    // 判断用户是否授权
    wx.getSetting({
      success: (res) => {
        console.log(res)
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: (res) => {
              // console.log(res)
              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: '',
    })
  },

  onLoad: function(options) {

  },

})