一、官方文檔:
1、wx.getUserInfo
(uni.getUserInfo
):基礎庫版本低于2.27.1可用
① 文檔鏈接:
- https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html
- https://uniapp.dcloud.net.cn/api/plugins/login.html#getuserinfo
② 官方說明:
2021年4月28日24時后發布的小程序新版本,無法通過
wx.getUserInfo
與<button open-type="getUserInfo"/>
獲取用戶個人信息(頭像、昵稱、性別與地區),將直接獲取匿名數據(包括userInfo
與encryptedData
中的用戶個人信息),獲取加密后的openID
與unionID
數據的能力不做調整。此前發布的小程序版本不受影響,但如果要進行版本更新則需要進行適配
③ 替代方案 - 已經廢棄:
<button open-type="getUserInfo" @getuserinfo="handleGetUserInfo">獲取用戶信息</button>
2、wx.getUserProfile
(uni.getUserProfile
):基礎庫版本2.9.5~2.27.1可用
① 文檔鏈接:
- https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81
- https://uniapp.dcloud.net.cn/api/plugins/login.html#getuserprofile
② 官方說明:
自 2022 年 10 月 25 日 24 時起,小程序
wx.getUserProfile
接口將被收回:生效期后發布的小程序新版本,通過wx.getUserProfile
接口獲取用戶頭像將統一返回默認灰色頭像,昵稱將統一返回 “微信用戶”。
③ 替代方案 - 已經廢棄:
<button @click="getUserProfile">獲取用戶信息</button>
3、非靜默獲取用戶頭像和昵稱:
① 文檔鏈接:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
② 完整代碼:
<template><view class="myIndex" :style="{ paddingTop: navbarHeight + 'px' }"><view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }"><view class="navbar-title">{{title}}</view></view><view class="content"><!-- 頭像 --><button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-button"><image :src="avatar" mode="aspectFill" class="img" /></button><!-- 昵稱 --><input type="nickname" placeholder="請輸入昵稱" v-model="nickName" @input="onKeyInput"/></view></view>
</template><script>export default {data() {return {title: '個人中心',navbarHeight: 0, // 導航欄高度statusBarHeight: 0,avatar: 'https://img0.baidu.com/it/u=3824830576,2699714066&fm=253&app=138&f=JPEG?w=800&h=804', // 默認的頭像nickName: '默認的昵稱', // 默認的昵稱}},onLoad() {// 獲取系統信息計算導航欄高度const systemInfo = uni.getSystemInfoSync();this.statusBarHeight = systemInfo.statusBarHeight;this.navbarHeight = this.statusBarHeight + 44; // 44是導航欄標準高度},methods: {// 點擊進行頭像選擇onChooseAvatar(e) {const that = thisconst {avatarUrl} = e.detailuni.showLoading({ title: '上傳中...' });// 構造請求的參數let params = {}uni.uploadFile({url: _uploadUrl, // 后端接口地址filePath: avatarUrl, // 臨時文件路徑name: 'imageFile', // 后端接收文件的參數名(必須與后端一致)formData: params,header: {// 請求頭信息},success: (res) => {uni.hideLoading();// 根據后端返回的準確地址進行存儲與渲染if (res.code === 200) {console.log('線上的新頭像地址為', res.url)uni.showToast({ title: '頭像更新成功', icon: 'success' });} else {uni.showToast({ title: result.msg || '上傳失敗', icon: 'none' });}},fail: (err) => {uni.hideLoading();console.error('上傳失敗:', err);uni.showToast({ title: '網絡錯誤,請重試', icon: 'none' });}});},// 輸入框輸入內容onKeyInput() {// 在這里調用后端的接口,存儲昵稱console.log('這個是輸入的數據', this.nickName)}}}
</script><style scoped>.myIndex {width: 100vw;height: 100vh;background-color: #F9F9FB;}.myIndex .custom-navbar {position: fixed;top: 0;left: 0;right: 0;z-index: 999;display: flex;align-items: center;}.myIndex .navbar-title {flex: 1;height: 88rpx;line-height: 88rpx;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 600;font-size: 32rpx;color: #000000;}.myIndex .content {position: absolute;top: 0;left: 0;width: 100vw;height: 420rpx;background: linear-gradient(180deg, #C6EBFD 0%, #F9F9FB 100%);padding-top: calc(var(--status-bar-height) + 88rpx + 36rpx);text-align: center;}.myIndex .avatar-button {z-index: 1;position: relative;width: 120rpx;height: 120rpx;border-radius: 100rpx;padding: 0;margin: 0 16rpx 0 0;}.myIndex .content-top .img {z-index: 10;position: relative;box-sizing: border-box;width: 120rpx;height: 120rpx;border-radius: 100rpx;border: 6rpx solid #fff;object-fit: cover;}
</style>
③ 效果顯示:
4、用戶信息社區公告:
https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01