Uniapp中進行微信小程序頭像和昵稱的更改

一、官方文檔:

1、wx.getUserInfouni.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"/>獲取用戶個人信息(頭像、昵稱、性別與地區),將直接獲取匿名數據(包括userInfoencryptedData中的用戶個人信息),獲取加密后的openIDunionID數據的能力不做調整。此前發布的小程序版本不受影響,但如果要進行版本更新則需要進行適配

③ 替代方案 - 已經廢棄:

<button open-type="getUserInfo" @getuserinfo="handleGetUserInfo">獲取用戶信息</button>

2、wx.getUserProfileuni.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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/95848.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/95848.shtml
英文地址,請注明出處:http://en.pswp.cn/web/95848.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

交換機詳細

交換機&#xff08;Sritch&#xff09;&#xff1a;一種用于電&#xff08;光&#xff09;信號轉發的網絡設備&#xff0c;可以為接入交換機的任意兩個網絡節點提供獨享的電信號通路。解決什么問題&#xff1f;多臺設備之間的數據交換的問題。因此根據它的功能&#xff0c;它通…

功能強大的多線程端口掃描工具,支持批量 IP 掃描、多種端口格式輸入、掃描結果美化導出,適用于網絡安全檢測與端口監控場景

工具介紹 PortScanner - 多線程端口掃描工具&#xff0c;一款功能強大的多線程端口掃描工具&#xff0c;支持批量 IP 掃描、多種端口格式輸入、掃描結果美化導出&#xff0c;適用于網絡安全檢測與端口監控場景。&#x1f31f; 功能特性 &#x1f50d; 靈活的掃描目標&#xff1…

【OpenHarmony文件管理子系統】文件訪問接口mod_fileio解析

OpenHarmony文件訪問接口mod_fileio解析 概述 mod_fileio模塊是OpenHarmony文件管理API中的核心模塊之一&#xff0c;提供了完整的文件I/O操作功能。該模塊基于Node.js N-API構建&#xff0c;為JavaScript應用提供了豐富的文件系統操作接口&#xff0c;包括文件讀寫、目錄操作、…

js逆向Webpack模塊加載機制解析:從數組到JSONP

1. 概述 Webpack作為現代前端開發中最流行的模塊打包工具&#xff0c;其模塊加載機制值得深入理解。本文將解析Webpack的幾種模塊加載方式&#xff0c;包括數組形式、鍵值對形式和JSONP動態加載。只有理解了它的相關加載機制&#xff0c;我們才可以進行逆向工作。 2. 數組形式的…

Joplin-解決 Node.js 中 “digital envelope routines::unsupported“ 錯誤

解決 Node.js 中 “digital envelope routines::unsupported” 錯誤 在使用 Webpack 構建 Joplin 插件時&#xff0c;你可能會遇到 error:0308010C:digital envelope routines::unsupported 錯誤。這個錯誤看起來很復雜&#xff0c;但實際上有明確的原因和解決方案。 錯誤原因…

UE5 UAT

通過UAT 打包的流程&#xff0c;先整理這么點入口// Engine\Source\Programs\AutomationTool\Program.cs /// <summary> /// Main entry point /// </summary> public partial class Program {public static async Task<int> Main(string[] Arguments){Logge…

Python帶狀態生成器完全指南:從基礎到高并發系統設計

引言&#xff1a;狀態化生成器的核心價值在復雜系統開發中&#xff0c;帶狀態的生成器是處理復雜邏輯的核心工具。根據2024年Python開發者調查報告&#xff1a;78%的狀態機實現使用帶狀態生成器85%的數據管道依賴狀態化生成器92%的并發系統需要狀態管理65%的算法優化通過狀態化…

Python元組:不可變但靈活的數據容器

Python元組&#xff1a;不可變但靈活的數據容器 元組(tuple)是Python中一種不可變(immutable)但功能靈活的有序集合數據類型&#xff0c;具有以下核心特性&#xff1a;一、基本特性 不可變性?&#xff1a;創建后不能修改元素&#xff08;增刪改操作均不允許&#xff09; 有序存…

FastGPT源碼解析 Agent 大模型對接接口和使用詳解

FastGPT 大模型對接核心代碼分析 核心架構概覽 FastGPT 采用統一模型抽象層設計&#xff0c;通過標準化接口對接多種大模型&#xff0c;支持 LLM、Embedding、ReRank、TTS、STT 等多種 AI 能力。 支持各種大模型能力的配置&#xff0c;包括本地ollama、各個AI云廠商的API接入配…

AI Compass前沿速覽:Kimi K2、InfinityHuman-AI數字人、3D-AI桌面伴侶、疊疊社–AI虛擬陪伴

AI Compass前沿速覽&#xff1a;Kimi K2、InfinityHuman-AI數字人、3D-AI桌面伴侶、疊疊社–AI虛擬陪伴 AI-Compass 致力于構建最全面、最實用、最前沿的AI技術學習和實踐生態&#xff0c;通過六大核心模塊的系統化組織&#xff0c;為不同層次的學習者和開發者提供從完整學習路…

如何下載B站視頻,去水印,翻譯字幕

首先先來看下如何下載B站視頻及音頻工具&#xff1a;手機下載視頻打開文件管理器&#xff0c;找到video.m4s和audio.m4s兩個文件更改文件后綴名第一步到此為止然后我們再來看一下如何去水印&#xff0c;去字幕工具&#xff1a;剪映導入視頻選擇蒙版 > 鏡面點擊反轉點擊基礎&…

用 Cursor AI 快速開發你的第一個編程小程序

Cursor AI 作為新一代 AI 編程助手&#xff0c;集成了代碼補全、智能調試、自動生成等強大功能&#xff0c;非常適合用來開發小型應用或小程序。本文我將手把手帶你用 Cursor AI 開發一個簡單的天氣查詢小程序&#xff0c;并在文中推薦一門實用的商業變現課程&#xff0c;助你走…

MacOS 使用 luarocks+wrk+luajit

MacOS 使用 luarockswrkluajit luarocks 默認使用的是 lua 5.4 版本&#xff0c;一些工具&#xff0c;例如 wrk 使用的 lua 5.1&#xff0c;那么 luarocks 在安裝依賴的時候就需要指定 lua 5.1。 luarocks config 配置 lua 5.1 請確保已經安裝了 lua5.1 或者 luajit&#xff0c…

PostgreSQL18-FDW連接的 SCRAM 直通身份驗證

PostgreSQL18-FDW連接的 SCRAM 直通身份驗證 PostgreSQL 18 為使用 postgres_fdw 或 dblink_fdw 的人帶來了很好的改進&#xff1a;SCRAM 直通身份驗證。設置外部服務器連接時&#xff0c;您不再需要在“用戶映射”選項中存儲純文本密碼。 這是實現它的提交&#xff1a; commit…

“臥槽,系統又崩了!”——別慌,這也許是你看過最通俗易懂的分布式入門

在分布式系統中&#xff0c;有效應對節點故障、網絡分區延遲和數據一致性等挑戰至關重要。本文將剖析保障分布式系統可靠性的核心機制&#xff1a;數據分片實現水平擴展&#xff0c;冗余副本保障數據高可用&#xff0c;租約&#xff08;Lease&#xff09;機制優化節點狀態共識與…

【代碼隨想錄算法訓練營——Day4】鏈表——24.兩兩交換鏈表中的節點、19.刪除鏈表的倒數第N個節點、面試題02.07.鏈表相交、142.環形鏈表II

LeetCode題目鏈接 https://leetcode.cn/problems/swap-nodes-in-pairs/ https://leetcode.cn/problems/remove-nth-node-from-end-of-list/ https://leetcode.cn/problems/intersection-of-two-linked-lists-lcci/description/ https://leetcode.cn/problems/linked-list-cycle…

C#中一段程序類比博圖

using system //博圖中要使用自帶指令庫&#xff0c;指令庫名稱叫systemnamespace Simple//博圖建立程序&#xff0c;分診斷文件夾&#x1f4c2;&#xff0c;vision文件夾&#xff0c;通訊Db文件夾&#x1f4c2;等等&#xff0c;simple類似博圖中的文件夾名稱{class Program//程…

vue飛自在酒店管理系統(代碼+數據庫+LW)

摘 要 近年來&#xff0c;隨著科技的迅猛進步和經濟全球化的深入發展&#xff0c;互聯網技術正以前所未有的速度提升社會綜合發展的效能。這一技術的影響力已滲透到各行各業&#xff0c;其中&#xff0c;飛自在酒店管理系統在互聯網時代背景下扮演著舉足輕重的角色。信息管理…

2025年統計與數據分析領域專業認證發展指南

在數據驅動決策日益重要的背景下&#xff0c;專業認證作為提升統計學和數據分析能力的一種方式&#xff0c;受到越來越多從業者的關注。本文基于行業發展趨勢&#xff0c;分析6個相關領域的專業資格認證&#xff0c;為專業人士提供參考。一、數據分析能力認證含金量CDA數據分析…

激光頻率梳 3D 輪廓測量 - 油路板的凹槽深度和平面度測量

一、引言油路板作為液壓系統核心部件&#xff0c;其凹槽深度與平面度精度直接影響油液流動特性與密封性能。傳統測量方法在面對復雜油路結構時存在效率低、精度不足等問題。激光頻率梳 3D 輪廓測量技術憑借時頻基準優勢&#xff0c;為油路板關鍵參數測量提供了新路徑&#xff0…