ボトムモーダルポップアップ層アセンブリ

ポップアップ底モーダルコンポーネントスロットという名前のスロットを変更します。
ここに画像を挿入説明

認証ログインコンポーネント

新しいログインコンポーネント

ログインコンポーネントを追加し、ポップアップボトムモーダルログインコンポーネントアセンブリを使用しています。
ここに画像を挿入説明

ボトムモーダルポップアップ層成分を導入

まず、組立login.jsonでボトムモーダルポップ層の導入
ここに画像を挿入説明

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

アセンブリ底モーダルlogin.wxmlにポップアップを使用してスロットにモーダル・コンテンツを使用
ここに画像を挿入説明

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

bindgetuserinfoプロパティのボタン

オープン型とを参照してくださいbindgetuserinfo：ボタン

次のように指定：
ここに画像を挿入説明

ユーザー認証

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

イジェクトマイクロチャネルの許可ポップにマイクロチャネル認可情報ボタンのクリック
ここに画像を挿入説明
：クリックログが出力は次の拒否

ログ出力を以下の許可]をクリックし、出力を見ることができる、そのユーザーに関連付けられた認証情報。

認証ログインコンポーネント

はじめにログインコンポーネント

ここに画像を挿入説明

{
  "usingComponents": {
    "x-search": "/components/search/search",
    "x-login": "/components/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) {

  },

})