實(shí)現(xiàn)效果如下：

首先使用uni.login獲取用戶登錄憑證code:

官方代碼：

uni.login({
  provider: 'weixin', //使用微信登錄
  success: function (loginRes) {
    console.log(loginRes.authResult);
  }
});

success返回參數(shù)如下：

頭像選擇：

需要將?button?組件?open-type?的值設(shè)置為?chooseAvatar，當(dāng)用戶選擇需要使用的頭像之后，可以通過?bindchooseavatar?事件回調(diào)獲取到頭像信息的臨時路徑。

從基礎(chǔ)庫2.24.4版本起，若用戶上傳的圖片未通過安全監(jiān)測，不觸發(fā)bindchooseavatar?事件。

昵稱填寫：

需要將?input?組件?type?的值設(shè)置為?nickname，當(dāng)用戶在此input進(jìn)行輸入時，鍵盤上方會展示微信昵稱。

從基礎(chǔ)庫2.24.4版本起，在onBlur?事件觸發(fā)時，微信將異步對用戶輸入的內(nèi)容進(jìn)行安全監(jiān)測，若未通過安全監(jiān)測，微信將清空用戶輸入的內(nèi)容，建議開發(fā)者通過?form?中form-type?為submit?的button?組件收集用戶輸入的內(nèi)容。

官方代碼如下：

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="請輸入昵稱"/>


const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

附上我的login頁面完整代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-759475.html

<template>
  <view class="container">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image class="avatar" :src="avatarUrl"></image>
    </button>
    <view class="petName">
      <view class="petName_name">昵稱</view>
      <input type="nickname" v-model="nickname" class="weui-input" placeholder="請輸入昵稱" @input="onInputNickname" />
    </view>
    <button class="loginBtn" form-type="submit" @tap="toIndex">登 錄</button>
  </view>
</template>

<script>
  import {
    apiBaseUrl
  } from '../../main.js';
  // 引入自定義的動態(tài)tabBar
  import {
    publicBar,
    selfBar
  } from '@/utils/tabBar.js'
  export default {
    data() {
      return {
        code: '',
        nickname: '',
        avatarUrl: '',
      };
    },
    onReady() {
      const defaultAvatarUrl =
        'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
      this.avatarUrl = defaultAvatarUrl
    },
    methods: {
      // 選擇頭像
      onChooseAvatar(e) {
        const {
          avatarUrl
        } = e.detail;
        this.avatarUrl = avatarUrl;
      },
      // 輸入框輸入或選擇微信昵稱
      onInputNickname(event) {
        this.nickname = event.target.value;
      },

      toIndex() {
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log('code為：', loginRes.code);
            this.code = loginRes.code;
            uni.setStorageSync('nickname', this.nickname);//存儲用戶名
            uni.setStorageSync('avatarUrl', this.avatarUrl);//存儲頭像地址
            uni.request({
              url: apiBaseUrl + '/vx/vxLogin',
              method: 'POST',
              data: {
                code: this.code,
                openName: this.nickname
              },
              success: (res) => {
                console.log(res);
                const accessToken = res.data.data.access_token;
                uni.setStorageSync('accessToken', accessToken);
                // 如果是普通用戶， 即未綁定openId， 就渲染publicBar， 只顯示在線報修和我的報修， 并跳轉(zhuǎn)到在線報修頁面
                if (accessToken === '普通用戶') {
                  this.$store.dispatch('changeTabbar', publicBar);
                  uni.switchTab({
                    url: '/pages/onlrepairs/onlrepairs'
                  })
                }
                // 如果綁定了openId， 就渲染selfBar， 顯示首頁、 巡檢、 工單， 并跳轉(zhuǎn)到首頁
                else {
                  this.$store.dispatch('changeTabbar', selfBar);
                  uni.switchTab({
                    url: '/pages/home/home'
                  })
                }
              }
            })
          }
        });
      }

    },
  };
</script>

<style lang="scss">
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 260rpx 0 300rpx 0;
    box-sizing: border-box;

    .avatar-wrapper {
      width: 60px;
      height: 60px;
      padding: 0;

      .avatar {
        width: 60px;
        height: 60px;
      }
    }

    .petName {
      display: flex;
      align-items: center;
      padding: 10px;
      margin-top: 20px;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      margin-bottom: 30px;

      .petName_name {
        margin-right: 30px;
      }
    }

    .loginBtn {
      width: 70%;
      color: #fff;
      border-radius: 35px;
      background: #226be4;
    }

  }
</style>

到了這里，關(guān)于Uniapp寫微信小程序時，如何獲取用戶頭像和昵稱使用微信用戶信息登錄？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！