使用的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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/241143.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

小程序开发实战案例五 | 小程序如何嵌入H5页面

小程序开发实战案例五 | 小程序如何嵌入H5页面

在接入小程序过程中会遇到需要将 H5 页面集成到小程序中情况&#xff0c;今天我们就来聊一聊怎么把 H5 页面塞到小程序中。 本篇文章将会从下面这几个方面来介绍&#xff1a; 小程序承载页面的前期准备小程序如何承载 H5小程序和 H5 页面如何通讯小程序和 H5 页面的相互跳转 小…
阅读更多...
Ubuntu重启后进入initramfs导致无法开机

Ubuntu重启后进入initramfs导致无法开机

今晚&#xff0c;我的电脑意外关机&#xff0c;重新开机后打开了虚拟机后出现initramfs&#xff0c;一直无法开机。该虚拟机使用的是 vm17,系统是ubuntu20, 解决方案 使用如下命令查看和识别磁盘、分区或文件系统的信息 在initramfs后面输入 fsck /dev/sdb4 ,即修复上面损坏的…
阅读更多...
WINCC读写EXCEL-VBS

WINCC读写EXCEL-VBS

原创 RENHQ WINCC 关于VBS操作EXCEL的文档不管在论坛上还是在网上&#xff0c;相关的脚本已经很多&#xff0c;但是依然有很多人在问这个问题&#xff0c;于是把我以前在论坛上发的一个集合帖子的脚本拿来&#xff0c;重新开个帖子&#xff0c;如果再有人问的话&#xff0c;可…
阅读更多...
kali下-MSF-ftp_login模块破解FTP账号及密码

kali下-MSF-ftp_login模块破解FTP账号及密码

一、环境准备 两台设备在同一个网络内 一台kali系统&#xff1a;192.168.10.128 一台winserver2016&#xff1a;192.168.10.132 二、MSF介绍 metasploit 全称是The Metasploit Framework&#xff0c;又称MSF&#xff0c;是Kali 内置的一款渗透测试框架&#xff0c;也是全球…
阅读更多...
MySQL中锁的概述

MySQL中锁的概述

按照锁的粒度来分可分为&#xff1a;全局锁&#xff08;锁住当前数据库的所有数据表&#xff09;&#xff0c;表级锁&#xff08;锁住对应的数据表&#xff09;&#xff0c;行级锁&#xff08;每次锁住对应的行数据&#xff09; 加全局锁&#xff1a;flush tables with read lo…
阅读更多...
基于springboot+vue的图书个性化推荐系统(前后端分离)

基于springboot+vue的图书个性化推荐系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…
阅读更多...
线程同步--生产者消费者模型

线程同步--生产者消费者模型

文章目录 一.条件变量pthread线程库提供的条件变量操作 二.生产者消费者模型生产者消费者模型的高效性基于环形队列实现生产者消费者模型中的数据容器 一.条件变量 条件变量是线程间共享的全局变量,线程间可以通过条件变量进行同步控制条件变量的使用必须依赖于互斥锁以确保线…
阅读更多...
数据结构之栈的基本操作

数据结构之栈的基本操作

该顺序栈涉及到了存储整型数据的顺序栈还有存储字符型数据的顺序栈 实现的功能有&#xff1a;入栈、出栈、判断是否为空栈、求栈的长度、清空栈、销毁栈、得到栈顶元素 此外根据上述功能&#xff0c;编写了数值转换&#xff08;十进制转化八进制&#xff09;方法、括号匹配方法…
阅读更多...
服务器变矿机，该如何应对？

服务器变矿机，该如何应对？

开始 恶意的挖矿程序会导致服务器cpu的异常占用&#xff0c;很让人讨厌。起初&#xff0c;我只是使用top命令显示出占用cpu不正常的进程&#xff0c;发现其中一个进程占用了百分之九十九点几&#xff0c;然后通过kill -9 <PID>命令干掉它。但总是过不了几天&#xff0c;…
阅读更多...
深度学习：探索人工智能的前沿

深度学习：探索人工智能的前沿

1. 引言 1.1 人工智能的演进 人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一门研究如何使计算机能够执行通常需要人类智能的任务的领域。从早期的符号推理到现代的深度学习&#xff0c;人工智能经历了漫长的发展过程。 20世纪50年代&#xff…
阅读更多...
MySQL 基于创建时间进行RANGE分区

MySQL 基于创建时间进行RANGE分区

MySQL是一款广泛使用的关系型数据库。在MySQL中&#xff0c;大量数据场景提高查询效率是非常关键的&#xff0c;所以&#xff0c;对数据表进行分区是一个很好的选择。 在创建分区表之前&#xff0c;需要了解一下MySQL分区的基本概念。MySQL分区可以将一个大表分成多个小表&…
阅读更多...
K8s 网关选型血泪史

K8s 网关选型血泪史

Sealos 公有云几乎打爆了市面上所有主流的开源网关&#xff0c;本文可以给大家很好的避坑&#xff0c;在网关选型方面做一些参考。 Sealos Cloud 的复杂场景 Sealos 公有云上线以来&#xff0c;用户呈爆发式增长&#xff0c;目前总共注册用户 8.7w&#xff0c;每个用户都去创…
阅读更多...
FFmpeg之AVFormat

FFmpeg之AVFormat

文章目录 一、概述二、解封装流程三、重要结构体3.1、AVFormatContext3.2、AVInputFormat3.3、AVOutputFormat3.4、AVStream 四、重要函数分析4.1、avformat_alloc_context4.2、avformat_open_input4.2.1、init_input4.2.2、av_probe_input_format2 4.3、avformat_find_stream_…
阅读更多...
Flutter开发之蓝牙链接传输数据

Flutter开发之蓝牙链接传输数据

本文使用的是flutter_blue_plus插件来实现链接蓝牙之后&#xff0c;和设备直接实现数据互相传输的功能。 1、配置蓝牙权限 iOS权限设置<key>NSBluetoothAlwaysUsageDescription</key><string>App需要您的同意,才能访问蓝牙,进行设备连接,数据通讯服务</…
阅读更多...
LeetCode 热题 100 | 双指针（上）

LeetCode 热题 100 | 双指针（上）

目录 1 283. 移动零 2 11. 盛最多水的容器 3 15. 三数之和 菜鸟做题第一周&#xff0c;语言是 C 1 283. 移动零 解题思路&#xff1a; 两个指针一前一后遍历数组前者永远指向 0&#xff0c;后者永远在寻找非 0 数的路上后者找到一个非 0 数就和前者进行一个数值交换 …
阅读更多...
Qt应用开发(安卓篇)——Hello Qt On Android

Qt应用开发(安卓篇)——Hello Qt On Android

一、前言 这一篇从实际出发&#xff0c;讲述如何创建、编译和部署Qt On Android项目。 二、ADB调试 ADB的全称为Android Debug Bridge&#xff0c;就是起到调试桥的作用&#xff0c;主要用于连接计算机与Android 设备&#xff0c;以便进行调试和数据传输。ADB 可以实现以下主要…
阅读更多...
分享一个美美的html模板

分享一个美美的html模板

在这个万物vue的年代&#xff0c;网页设计越来越框架化。 上网搜个资料学习学习吧&#xff0c;咵咵咵&#xff0c;“游泳健身&#xff0c;vue了解一下” 我只是想简单地学个html&#xff0c;js啊&#xff01;怎么就这么复杂&#xff01; 曾几何时&#xff0c;在网上找个网页…
阅读更多...
一文了解【完全合作关系】下的【多智能体强化学习】

一文了解【完全合作关系】下的【多智能体强化学习】

处于完全合作关系的多智能体的利益一致&#xff0c;获得的奖励相同&#xff0c;有共同的目标。比如多个工业机器人协同装配汽车&#xff0c;他们的目标是相同的&#xff0c;都希望把汽车装好。 在多智能体系统中&#xff0c;一个智能体未必能观测到全局状态 S。设第 i 号智能体…
阅读更多...
汽车芯片「新变量」

汽车芯片「新变量」

编者按&#xff1a;汽车行业的格局重构和技术革新&#xff0c;也在推动芯片赛道进入变革周期。不同商业模式的博弈&#xff0c;持续升温。 对于智能汽车来说&#xff0c;过去几年经历了多轮硬件和软件的性能迭代&#xff0c;甚至是革新&#xff0c;如今&#xff0c;市场正在进…
阅读更多...
FPGA引脚物理电平（内部资源，Select IO）-认知2

FPGA引脚物理电平（内部资源，Select IO）-认知2

引脚电平 The SelectIO pins can be configured to various I/O standards, both single-ended and differential. • Single-ended I/O standards (e.g., LVCMOS, LVTTL, HSTL, PCI, and SSTL) • Differential I/O standards (e.g., LVDS, Mini_LVDS, RSDS, PPDS, BLVDS, and…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023