使用的uview 微信高版本 头像昵称填写能力

2024-01-19 07:44
文章标签 使用 微信 版本 能力 昵称 头像 填写 uview

本文主要是介绍使用的uview 微信高版本 头像昵称填写能力，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

<template><view><button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button><view><!-- 提示窗示例 --><u-popup :show="show" background-color="#fff"><view class="infoBox"><view class="title">邀请您补全个人信息</view><br><br><br><form catchsubmit="getUserName"><view style="width: 100%;"><view class="popup-info"><view class="popup-info-left">头像</view><view class="popup-info-right"><button class="avatar-wrapper" open-type="chooseAvatar"@chooseavatar="onChooseAvatar" slot="right"><img class="avater" :src="avatarUrl" alt="用户头像"></button></view></view><br><br><view class="popup-info"><view class="popup-info-left">昵称</view><view class="popup-info-right"><input type="nickname" class="nickName-input" @blur="userNameInput"placeholder="请输入昵称" /></view></view></view><view class="buttonSum"><view class="button"><button @click="dialogClose">取消</button></view><view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;"><button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button></view></view></form></view></u-popup></view><view class="text-center margin-top-sm" @tap="back">暂不登录</view></view></view>
</template><script>import avatarUrl from "@/static/logo.png"export default {data() {return {avatarUrl: avatarUrl,nickName: '',token: '',imgList: [],show: false,}},methods: {back() {uni.navigateBack({delta: 1,})},wxGetUserInfo(e) {// 1、授权必须要在用户点击事件之后进行// 2、uni老的方法getUserInfo已经拿不到用户信息了// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用// #ifdef MP-WEIXINuni.getUserProfile({desc: 'get_name', // 这个参数是必须的success: user => {console.log('用户信息', user)uni.setStorageSync("user_info", user.userInfo)//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取if (user.userInfo.nickName == '微信用户') {this.show = true} else {uni.navigateBack({delta: 1})}}})// #endif// #ifdef MP-ALIPAY// uni.getUserInfo({// 	desc: 'get_name', // 这个参数是必须的// 	success: user => {// 		console.log(user)// 		uni.setStorageSync("user_info", user.userInfo)// 		// 虚假的openid// 		getApp().globalData.openId = user.ariverRpcTraceId;// 		uni.navigateBack({// 			delta: 1// 		})// 	}// })// #endif},// 点击头像async onChooseAvatar(e) {// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来this.avatarUrl = e.detail.avatarUrl;console.log(e.detail.avatarUrl, 'e.detail.avatarUrl'),// 临时图片转为base64uni.getImageInfo({src: this.avatarUrl,success: function(res) {// 获取到图片的临时地址var tempFilePath = res.path;// 将图片转为base64格式uni.getFileSystemManager().readFile({filePath: tempFilePath,encoding: 'base64',success: function(res) {var base64Img = 'data:image/png;base64,' + res.data;let userInfo = uni.getStorageSync("user_info")userInfo.avatarUrl = base64Imguni.setStorageSync("user_info", userInfo)}});}});},// 点击昵称userNameInput(e) {console.log(e.detail);this.nickName = e.detail.valuelet userInfo = uni.getStorageSync("user_info")userInfo.nickName = e.detail.valueuni.setStorageSync("user_info", userInfo)console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));},getUserName(e) {console.log('提交getUserName', e);},submitSure(e) {console.log('确定submitSure', e);},dialogClose(e) {console.log('dialogClose取消', e);this.show = false}},onLoad() {// this.show = true},}
</script><style lang="scss" scoped>.cu-btn {margin-top: 20px;margin-left: 20px;margin-right: 20px;}.infoBox {width: 80vw;height: 180px;position: relative;.title {font-size: 18px;text-align: center;margin-top: 15px;margin-bottom: 15px;font-weight: 500;}.popup-info {width: 100%;height: 40px;display: flex;justify-content: space-around;line-height: 40px;.popup-info-left {text-align: center;width: 50%;}.popup-info-right {width: 50%;display: flex;align-items: center;justify-content: center;button::after {border: none;}.nickName-input {display: inline-block;width: 100%;top: -5px;}.avatar-wrapper {border: none !important;width: 40px;height: 40px;padding: 0 !important;background: none;.avater {width: 40px;height: 40px;}}}}.buttonSum {width: 100%;display: flex;justify-content: space-around;position: absolute;bottom: 0;.button {width: 50%;border-top: 1px solid #e2e1e1;}button {width: 50%;background-color: #ffffff;font-size: 16px;outline: none;}button::after {border: none;border-radius: 0;}}}.u-popup__wrapper {border-radius: 10px;}
</style></style>

 效果

 

 参考的这个

 微信小程序头像昵称填写能力-CSDN博客

因为之前用的getUserProfile，有一天发现它获取到的头像是灰色，昵称是微信用户，一看官网说是不用了，低版本的还能用，高版本的要用头像昵称填写来实现。

如下是我的小程序登录页面代码：

逻辑：当小程序判断到没有登陆时把用户弹到登录页面，引导用户登录，用户点击一键登录后弹出弹框引导用户填写昵称和头像，将信息存储起来，方便在其他地方使用。

注意：

1、头像获取到的是临时地址，需要处理，才能在浏览器展示，我采用的是将其转化为base64的方式，具体请看：onChooseAvatar

2、昵称获取需要使用button的form-type="submit"属性，触发form提交来收集昵称
 

<template><button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button><view><!-- 提示窗示例 --><uni-popup ref="alertDialog" background-color="#fff"><view class="infoBox"><view class="title">邀请您补全个人信息</view><br><br><br><form catchsubmit="getUserName"><view style="width: 100%;"><view class="popup-info"><view class="popup-info-left">头像</view><view class="popup-info-right"><button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right"><img class="avater" :src="avatarUrl" alt="用户头像"></button></view></view><br><br><view class="popup-info"><view class="popup-info-left">昵称</view><view class="popup-info-right"><input type="nickname" class="nickName-input" @blur="userNameInput" placeholder="请输入昵称" /></view></view></view><view class="buttonSum"><view class="button"><button @click="dialogClose">取消</button></view><view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;"><button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button></view></view></form></view></uni-popup></view><view class="text-center margin-top-sm" @tap="back">暂不登录</view></view>
</template><script src="path/to/canvas/library.js"></script>
<script>import qiniuUploader from '../../util/qiniuUploader.js'import {RequestConstant} from '../../util/constant.js'export default {data() {return {avatarUrl: '../../static/icon-avatar.png',nickName: '',token: '',imgList: []}},methods: {back() {uni.navigateBack({delta: 1,})},wxGetUserInfo(e) {// 1、授权必须要在用户点击事件之后进行// 2、uni老的方法getUserInfo已经拿不到用户信息了// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用// #ifdef MP-WEIXINuni.getUserProfile({desc: 'get_name', // 这个参数是必须的success: user => {console.log('用户信息', user)uni.setStorageSync("user_info", user.userInfo)//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取if (user.userInfo.nickName == '微信用户') {this.$refs.alertDialog.open()} else {uni.navigateBack({delta: 1})}}})// #endif// #ifdef MP-ALIPAYuni.getUserInfo({desc: 'get_name', // 这个参数是必须的success: user => {console.log(user)uni.setStorageSync("user_info", user.userInfo)// 虚假的openidgetApp().globalData.openId = user.ariverRpcTraceId;uni.navigateBack({delta: 1})}})// #endif},// 打开弹框dialogToggle() {this.$refs.alertDialog.open()},// 点击头像async onChooseAvatar(e) {// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来this.avatarUrl = e.detail.avatarUrl;console.log(e.detail.avatarUrl,'e.detail.avatarUrl'),// 临时图片转为base64uni.getImageInfo({src: this.avatarUrl,success: function(res) {// 获取到图片的临时地址var tempFilePath = res.path;// 将图片转为base64格式uni.getFileSystemManager().readFile({filePath: tempFilePath,encoding: 'base64',success: function(res) {var base64Img = 'data:image/png;base64,' + res.data;let userInfo = uni.getStorageSync("user_info")userInfo.avatarUrl = base64Imguni.setStorageSync("user_info", userInfo)}});}});},// 点击昵称userNameInput(e) {console.log(e.detail);this.nickName = e.detail.valuelet userInfo = uni.getStorageSync("user_info")userInfo.nickName = e.detail.valueuni.setStorageSync("user_info", userInfo)console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));},getUserName(e) {console.log('提交getUserName', e);},submitSure(e) {console.log('确定submitSure', e);uni.navigateBack({delta: 1})},dialogClose(e) {console.log('dialogClose取消', e);this.$refs.alertDialog.close()}},onLoad() {},}
</script><style lang="less" scoped>.cu-btn {margin-top: 20px;margin-left: 20px;margin-right: 20px;}.infoBox {width: 80vw;height: 180px;position: relative;.title {font-size: 18px;text-align: center;margin-top: 15px;margin-bottom: 15px;font-weight: 500;}.popup-info {width: 100%;height: 40px;display: flex;justify-content: space-around;line-height: 40px;.popup-info-left {text-align: center;width: 50%;}.popup-info-right {width: 50%;display: flex;align-items: center;justify-content: center;button::after {border: none;}.nickName-input {display: inline-block;width: 100%;top: -5px;}.avatar-wrapper {border: none !important;width: 40px;height: 40px;padding: 0 !important;background: none;.avater {width: 40px;height: 40px;}}}}.buttonSum {width: 100%;display: flex;justify-content: space-around;position: absolute;bottom: 0;.button {width: 50%;border-top: 1px solid #e2e1e1;}button {width: 50%;background-color: #ffffff;font-size: 16px;outline: none;}button::after {border: none;border-radius: 0;}}}.uni-popup__wrapper {border-radius: 10px;}
</style></style>

这篇关于使用的uview 微信高版本 头像昵称填写能力的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/621705。

相关文章

C#中lock关键字的使用小结

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中，lock关键字用于确保当一个线程位于给定实例的代码块中时
阅读更多...
MySQL 强制使用特定索引的操作

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND
阅读更多...
C# $字符串插值的使用

C# $字符串插值的使用

《C#$字符串插值的使用》本文介绍了C#中的字符串插值功能,详细介绍了使用$符号的实现方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录$ 字符使用方式创建内插字符串包含不同的数据类型控制内插表达式的格式控制内插表达式的对齐方式内插表达式中使用转义序列内插表达式中使用
阅读更多...
flask库中sessions.py的使用小结

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se
阅读更多...
Java Thread中join方法使用举例详解

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原
阅读更多...
在macOS上安装jenv管理JDK版本的详细步骤

在macOS上安装jenv管理JDK版本的详细步骤

《在macOS上安装jenv管理JDK版本的详细步骤》jEnv是一个命令行工具,正如它的官网所宣称的那样,它是来让你忘记怎么配置JAVA_HOME环境变量的神队友,：本文主要介绍在macOS上安装... 目录前言安装 jenv添加 JDK 版本到 jenv切换 JDK 版本总结前言China编程在开发 Java
阅读更多...
Spring AI使用tool Calling和MCP的示例详解

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语
阅读更多...
Linux系统之lvcreate命令使用解读

Linux系统之lvcreate命令使用解读

《Linux系统之lvcreate命令使用解读》lvcreate是LVM中创建逻辑卷的核心命令,支持线性、条带化、RAID、镜像、快照、瘦池和缓存池等多种类型,实现灵活存储资源管理,需注意空间分配、R... 目录lvcreate命令详解一、命令概述二、语法格式三、核心功能四、选项详解五、使用示例1. 创建逻
阅读更多...
在Java中使用OpenCV实践

在Java中使用OpenCV实践

《在Java中使用OpenCV实践》用户分享了在Java项目中集成OpenCV4.10.0的实践经验,涵盖库简介、Windows安装、依赖配置及灰度图测试,强调其在图像处理领域的多功能性,并计划后续探... 目录前言一 、OpenCV1.简介2.下载与安装3.目录说明二、在Java项目中使用三 、测试1.测
阅读更多...
C++中detach的作用、使用场景及注意事项

C++中detach的作用、使用场景及注意事项

《C++中detach的作用、使用场景及注意事项》关于C++中的detach,它主要涉及多线程编程中的线程管理,理解detach的作用、使用场景以及注意事项,对于写出高效、安全的多线程程序至关重要,下... 目录一、什么是join()？它的作用是什么？类比一下：二、join()的作用总结三、join()怎么
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2