uniapp/微信小程序 登录以及用户信息获取功能相关问题 uni.login() uni.getUserinfo()

已于 2022-12-01 21:35:52 修改
阅读量5.9k 收藏 24
点赞数 11
分类专栏： uniapp 前端 文章标签： 微信小程序 uni-app 小程序
于 2022-12-01 04:09:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SANGZHU_001/article/details/128125384
版权
本文介绍了uni-app和微信小程序的登录流程，重点讲解了uni.login()和wx.login()接口的使用，指出这两个接口不会弹出授权弹窗。同时，讨论了wx.getUserinfo和wx.getUserProfile接口的变化，建议在获取用户信息时遵循微信的最新规则。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、小程序登录接口相关 wx.login() / uni.login()

小程序登录的这套流程说难不难，说简单却着实让人搞了很久才渐渐明白，刚参加工作时总会遇到相关的问题摸不着头脑，查各种文档，发现看了很多不同的解决方法，不知道那个正确一个个去实验，而且自己做出来的东西总是让自己觉得不满意。经过一系列的摸索之后才逐渐明白，原来不是因为自己没搞明白，而是由于上度娘看到的很多资料各不统一有可能是由于wx小程序本身对于接口的规则调整而导致的不同。
下面就大致总结一下，具体该如何做吧，为了记录一下流程，就从头说起吧（当然我也是个小白，就大致表述一下自己的理解，欢迎大家指正，千万别怼我，脸皮薄）

1、小程序登录流程 不需要烦恼的授权弹窗

不管是小程序还是其他需要登陆的应用，在登陆的逻辑上都是大差不差，大致可以用下图的关系表示。
简易登录流程
以下是小程序官方提供的小程序登录流程。与以上逻辑不同的是小程序多了一个微信服务端（但与此端交流多为后端人员的操作，除非是云开发的前端人员，否则此端不需要前端开发参与）。
在这里插入图片描述
我们可以发现，小程序登陆时ÿ

最低0.47元/天 解锁文章
uniapp(vue3) - 实现微信小程序平台端微信授权登录功能，Java后端实现前端uniApp小程序微信授权登录，uni-app+SpringBoot微信小程序登录授权获取用户昵称头像手机号源码
王佳斌
10-26 1万+
uniapp，vue3，微信小程序，java，SpringBoot，微信授权登录，uni-app微信小程序+SpringBoot(java)实现小程序授权登录获取用户的数据，获取用户头像昵称等信息，微信小程序与Java后端实现微信授权登录功能，Uniapp微信小程序+Java实现微信授权登录，uniappvue3微信小程序登录授权，拿到用户手机号，一键登录，UNIAPP实现微信小程序登录授权和手机号授权功能(uniapp做微信小程序)，前后端源码，详细示例代码，调用微信提供的第三方接口来实现，Java
uni-app 使用 uni.login(OBJECT)授权登录，手机号码授权 getPhoneNumber
qq_34720440的博客
06-30 9981
uni-app 使用 uni.login(OBJECT)授权登录，手机号码授权 getPhoneNumber uni.login() API <button open-type="getUserInfo" @getuserinfo="getuserinfo"">微信用户一键注册/快捷登录</button> getuserinfo() { uni.login({ provider: 'weixin', success: function (logi
uniapp微信小程序登录流程
最新发布
weixin_72363836的博客
03-06 1105
调用后端接口，将code作为参数置换出SessionKey和OpenId，accessToken进行存储(可以使用uni.setStorageSync)onLoad中或点击某个按钮调用 uni.login()获取登录用户code。3.登陆成功后打开获取电话，获取电话后获取头像，下面是获取电话框的样式结构。5.上传头像和电话（看需求）
uni-app 新版微信用户获取userInfo方法uni.getUserProfile
热门推荐
weng74的博客
04-09 1万+
uni-app 新版微信用户获取userInfo方法 uni.getUserProfile 微信更新了新的获取用户信息的方法，之前的getUserInfo方法获取不到用户的头像等信息，继续使用也会得到 灰色的头像 不是真正的用户头像 之前的获uniapp 中获取用户信息方法： <button open-type="getUserInfo" @getuserinfo="getUserInfo">立即登录</button> 新的 获取用户信息方法： //不要使用 open-type
uniapp获取用户信息 getuserinfo
u012922417的专栏
11-30 147
<button open-type="getUserInfo" class="user-mask" @getuserinfo="toLogin" withCredentials="true"></button> toLogin(fn){ console.log('111111111111 toLogin'); ...
uni-app处理微信小程序获取用户信息getUserInfo
u010227042的博客
01-06 9747
用微信原生代码应为： 使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。 <button form-type="submit" open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button> 1 bindgetuserinfo:用户点击该按钮时，会返...
uni-app微信小程序登录授权的实现
10-15
在开发uni-app微信小程序时，实现用户登录授权是至关重要的一步，这有助于提供个性化的服务并确保用户数据的安全。本文将深入探讨如何在uni-app中实现微信小程序的登录授权，并提供详细的步骤和示例代码。 首先，...
uniapp开发微信小程序-5.用户授权登录和用户信息获取
drnrrwfs的博客
07-31 8618
实际上手机号的应用场景基本上是在进行支付时才可以获取，是被用作支付凭证时使用（涉及商户号等支付操作），所以为了保护用户隐私，，大家完全可以使用onload方法在进入页面时直接执行下方的登录方法，免去用户登录这一操作，因为openid并不涉及用户隐私，所以平台没有强制我们询问用户是否授权。这个过程我们会在下篇文章。同样的，根据你的需求在数据库中将openid作为第二索引值保存，用户每次登录时就可以获取自己的数据。，openid是单个用户在此小程序中的唯一标识，单个用户在多个小程序中的标识是不同的。...
新版uniapp微信小程序授权登录，获取用户信息手机号
JaneYork的博客
07-13 2209
从一开始的getUserInfo改成getUserProfile，再改到直接不能获取信息了，那这个接口还有什么用，根本就没调用必要，直接wx.login拿个code登陆就完事了。其次，如果需要绑定手机号，可以根据标识，后续提示引导用户需要绑定手机号。或者点击按钮微信授权手机号【需要马内】：​​​​​。​​ 但是可以通过wx.login直接获取到openid， 微信小程序获取头像填写，昵称填写 ​​。【不推荐】uniapp一键登录，获取手机号+ unicloud云函数，需要马内： ​​。
uniapp的uni.login实现登录功能~
m0_62626838的博客
08-02 1052
1、uni.login实现登录功能。
一分钟学会uniapp获取用户信息
...
09-25 6021
一分钟学会uniapp获取用户信息
uni.app实现登录
chengcheng9876的博客
11-10 1762
1:微信小程序登录 2:uniapp登录 3: 遇到`https://api.weixin.qq.com`不在request合法域名列表中 4：uni.getUserProfile获取用户信息拉不起授权弹窗 5: uni.login 接口code字段值the code is a mock one 6：uniapp+vue3.0+vuex+uview-plus
uniapp--登录和注册页面-- login
weixin_54721820的博客
04-16 4122
直接使用即可，可以根据自己的需求修改样式！
uniapp 用户登录
Gblfy_Blog
01-03 1万+
文章目录一、登录基础1. 登录组件2. 页面引用组件3. 明确登录的实现思路4. 封装 action 调用登录接口5. 保存用户登录状态6. 成已登录的用户视图6. 现退出登录功能 一、登录基础 1. 登录组件 对于 登录 功能来说提供了两个登录的入口。 那么大家想一下，现在我们已经在 我的 这个 tab页 中实现了 登录的 UI，难道我还需要在另外一个页面中再去实现一遍吗？ 这个肯定是不需要的对不对。所以我们希望可以复用登录的 UI，而复用的方式则可以把 登录的 UI 封装称为一个 组件 创建登录组件
uniapp中的getUserInfo无法获取到用户信息的问题--解决办法
qq_36882279的博客
05-29 1万+
uniapp中的getUserInfo无法获取到用户信息的问题–解决办法 在uniapp微信小程序开发中，2021-04-13之前获取用户信息的写法： <button type="default" open-type="getUserInfo" @getuserinfo="handleGetUserInfo">获取用户信息</button> <script> export default{ data(){ return { userInfo: {}
uniapp一键登录
m0_62976988的博客
12-07 1536
安装小程序的请求适配器 axios-miniprogram-adapter@0.3.5。若使用到了axios,则建议使用npm安装yarn add axios@0.27.2。
微信小程序（总结一）：uniapp开发，获取微信用户信息（最新）
qq_45796592的博客
02-01 9877
微信小程序开发：最新的获取微信用户信息
uniapp app端和微信小程序端使用微信登陆以及获取用户信息
LLLLL2025的博客
03-01 5962
前言 最近在用uniapp，因为可以多端兼容，所以就入坑了擦 app端和微信小程序端使用uni.login() app端调用uni.login返回的数据： 微信小程序端调用uni.login后返回的数据： 可以看到里面都有code 共同点 它们都会返回 code 不同点 在app端拿到的这个code，去请求后端接口，后端用这个code去请求微信接口换取openid, session_ke...
uniapp开发微信小程序获取用户信息
02-28
### UniApp 微信小程序获取用户信息方法 #### 配置准备 确保已在微信开放平台完成注册并创建了微信小程序，在微信开发者工具中建立uni-app项目。确认`manifest.json`文件内mp-weixin平台下的`appId`和`appSecret`已正确定义[^1]。 #### 页面设计与按钮绑定事件处理函数 通过模板部分定义视图结构，利用`<button>`标签配合属性`open-type="getUserInfo"`来触发用户的授权操作，并监听`@getuserinfo`自定义事件用于接收回调参数： ```html <template> <view> <!-- 使用Button组件 --> <button class="WX-login-btn" open-type="getUserInfo" @getUserInfo="handleGetUserInfo">点击授权</button> </view> </template> <script> export default { methods: { handleGetUserInfo(event) { const userInfo = event.detail.userInfo; console.log('User Info:', userInfo); // 进一步逻辑如保存到本地或发送至服务器等... } } } </script> ``` 上述代码片段展示了如何捕获用户同意分享的信息详情，并打印出来以便后续处理[^3]。 对于某些情况下无法正常显示授权窗口或者未能成功取得所需资料的情况，则可能是因为接口更新或其他因素引起的问题[^2]。此时建议查阅官方文档了解最新变更说明，调整相应策略以适应新版本特性。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值