【Uniapp-Vue3】登录成功后获取当前用户信息并渲染到页面中

最新推荐文章于 2025-04-27 19:10:25 发布
原创 最新推荐文章于 2025-04-27 19:10:25 发布 · 675 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端 #javascript

没有配置user.js的可以看这一篇文章：

【Uniapp-Vue3】开发userStore用户所需的相关操作-优快云博客 

 引入user.js，在uni.login中传入登录成功的信息

我们能够在Storage中获取到用户的相关信息，但是我们会看到uni-id-pages-userInfo为空

并且我们会报“权限校验未通过”的错误

 在uni-id-users.schema数据表中找到 "wx_openid" 字段，将下面的 "permission" 部分删除，后面需要完善相关权限的时候再加回来

 我们再看Storage，用户信息就获取到了

我们通过userInfo就可以拿到获取过来的信息 

uniapp实现获取用户定位信息、手机号信息、蓝牙、设备、相册、相机、声音等，请你完善展示所有信息
前端-尔嵘
12-24 786
在 UniApp 中获取用户的定位信息、手机号信息、蓝牙、设备信息、相册、相机、声音等，可以通过调用相应的 API 来实现。以下是实现这一功能的详细步骤和示例代码。
UniApp + Vue3开发中的坑：无法获取到dom元素的排查过程 无法直接修改style样式的坑
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-21 845
在开发项目时，我遇到了一个令人困惑的问题。原本我以为ref获取到的 DOM 元素可以直接修改它的style，比如width。然而，我发现某些元素的样式并没有生效，经过一番排查，我才发现这个问题并非我想象中的那么简单。
uniapp开发微信小程序获取用户基本信息以及手机号 uni.getUserProfile getPhoneNumber
HelloWord176的博客
04-24 3490
首先获取用户信息以及手机号必须要通过button按钮点击实现 小程序登录、用户信息相关接口调整说明官方 一、获取用户信息（友情链接） 依据微信小程序开发文档描述，先写一个button按钮，open-type设为getUserProfile，在uniapp页面中创建按钮 <button style="border: none; height: 120rpx; width: 120rpx" class="login obta..
一分钟学会uniapp获取用户信息
...
09-25 6243
一分钟学会uniapp获取用户信息
uni-app获取用户信息
liuhaoxin666的博客
03-28 1万+
1.uni-app获取用户信息首先需要获取到code，和微信小程序获取用户信息步骤一样，只不过微信小程序是从wx.login里获取，而uni-app是从uni.login里获取。代码如图一 图一 2.通过获取到的code，向后台换区openid和session_key，可以直接请求接口来获取，以code为参数来请求接口，就可以获取到openid和秘钥了，获取之后用缓存将获取到的数据用setSto...
uniapp:小程序获取用户信息
weixin_44719499的博客
04-27 4655
*2. **微信授权登录流程。**1. **准备工作。**3. **代码实现。**4. **注意事项。**5. **参考资料。**6. **常见问题。
uniapp-vue3对话聊天实现模型流式输出
最新发布
06-10
引用[1]提到了在UniApp中使用FetchAPI实现流式响应，引用[3]提供了一个Vue3+TS(uniapp)的聊天页面实现，其中使用了scroll-view来实现自动滚动到底部。主要步骤：1.使用fetch或uni.request来请求支持流式输出的API...
uni-app 组件里面获取元素宽高的实现
10-15
通过使用`uni.createSelectorQuery()`结合生命周期函数或者`$nextTick`，可以有效地解决在页面渲染过程中元素尺寸尚未确定的问题，从而获取到正确的元素尺寸信息，以支持复杂的布局调整和数据绑定等操作。...
vue2/3 | uniapp - [通用]实现移动端点击商品加入购物车动画功能，加入购物车时类似抛物线掉入页面悬浮的购物袋中，类似美团淘宝外卖电商加入商品到购物车效果（详细示例代码，一键复制开箱即用
高级前端工程师
03-04 3664
vue2，vue3，uniapp，加入购物车飞入交互效果，移动端h5网页网站，手机端H5，vue实现商品加购物车时的动画，uniapp实现将商品放入购物车的飞入动效，购物车飞入动画，vue实现点击商品加入购物袋动画，uniapp实现购物车的动态添加动画抛入效果，加入购物车的小球落入动画，vue实现购物车抛物线小球动画效果，uniapp项目中css实现加入购物车小球抛物线飞入动画效果，vue加入购物车物体移动效果，如何实现点击加入购物车后按一定轨迹飞到悬浮的购物车中，利用贝塞尔曲线实现添加购物车时的小球抛物线
uniapp-扩展小常识
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
01-01 1877
uniapp-扩展小常识，Uniapp是一个使用Vue.js开发所有前端应用的框架，开发者可以使用Vue.js的语法和开发体验，编写一套代码，同时将其编译为多个平台的应用，包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等。这种跨平台开发的能力极大地节省了开发成本和时间，提高了开发效率，为开发者带来了诸多便利。
vue获取当前登陆用户信息
技术分享，共同进步
09-19 1万+
问题如下：在登陆之后我们需要获取当前用户信息（如图：） 解决方法： 在vue文件的script里面定义一个us（如代码：） <script> var us = JSON.parse(window.localStorage.getItem("user")); var names = us.name 其中 window.localStorage.getItem（）就是获取到localStorage里面的items的路径；（如图1.1） user是整个用户信息数据 比如：use
关于uniapp在小程序中获取用户信息
qq_40358970的博客
07-24 6324
但是在使用中，我们会发现uni.getUserProfile这玩意不会出现以下弹框。这是因为微信官方的调试库问题；所以我们只需要把调试库换成2.21.2-2.27.0之间即可；在微信小程序中，获取用户信息时，需要用到两个api就行。到此就可以出现弹框授权了哦！
uniapp在小程序登录，获取用户信息，获取手机号等流程
热门推荐
tutodelinglimgho的博客
06-21 2万+
uniapp在小程序登录，获取用户信息，手机号等，如何查看自己的小程序appid与小程序密钥
uniapp获取用户信息
qq_43319351的博客
06-22 1985
可以根据返回值传给后台用于登录，相当于账号密码。
(最详细,最新)uniapp，支付宝小程序，获取用户信息和手机号码
luolearn的博客
06-07 4335
2.通过uniapp提供的uni.login,方法这样就可以拿到支付宝的authCode授权码，然后后根据文档后台去调用对应的接口，我这边是要确定用户唯一id，本来想要电话号码的，然后发现可以拿到当前的使用小程序用户的userId，后面可能userId会被弃用，也可以拿opneId。或者直接到申请隐私（点击上一页的详情，进入这个页面），这里只要是没有静止的，就是可以调用弹出框的，我上面的小程序是调用不了，下面小程序是可以的（这里展示了，我两个小程序配置，差异的对比）1.获取用户信息，获取手机信息。
微信小程序（总结一）：uniapp开发，获取微信用户信息（最新）
qq_45796592的博客
02-01 1万+
微信小程序开发：最新的获取微信用户信息
uniapp 小程序获取用户信息
前端历险记
06-28 2865
添加一个点击事件 <text @click="bindGetUserInfo">登录/注册</text> login() { let _this = this; // 获取登录用户code uni.login({ success: (res) => { // console.log('res',res) if (res.code) { this.wxcode = res.code } else { uni.showToast({
uniapp获取用户信息（登录及个人中心页面的实现）
weixin_48952990的博客
07-27 8884
uniapp获取用户信息（登录及个人中心页面的实现）
uniapp微信小程序获取用户信息
qq_43039004的博客
01-15 1501
uni.getUserProfile({ desc:"用于完善用户信息", //必填，声明获取用户个人信息后的用途，不超过30个字符 success: (res) => { uni.setStorageSync('userInfo', res.userInfo) uni.$u.route({ url: 'pages/userLogin/userLogin', }) }, fail: (err) => { uni.showToast({ icon:"none"
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值