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

已于 2022-12-01 21:35:52 修改
阅读量5.6k 收藏 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接口的变化，建议在获取用户信息时遵循微信的最新规则。
摘要由CSDN通过智能技术生成

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

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

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

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

最低0.47元/天 解锁文章
奈河无桥
关注
  • 11
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uni-app 使用 uni.login(OBJECT)授权登录，手机号码授权 getPhoneNumber
qq_34720440的博客
06-30 9837
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--登录和注册页面-- login
weixin_54721820的博客
04-16 1976
直接使用即可，可以根据自己的需求修改样式！
uniapp获取微信用户openID
qq_43193513的博客
07-23 255
【代码】uniapp获取微信用户openID。
uniapp的uni.login实现登录功能~
最新发布
m0_62626838的博客
08-02 357
1、uni.login实现登录功能。
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获取用户信息
...
09-25 5804
一分钟学会uniapp获取用户信息
uni-app处理微信小程序获取用户信息getUserInfo
u010227042的博客
01-06 9610
用微信原生代码应为： 使用 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 8443
实际上手机号的应用场景基本上是在进行支付时才可以获取，是被用作支付凭证时使用（涉及商户号等支付操作），所以为了保护用户隐私，，大家完全可以使用onload方法在进入页面时直接执行下方的登录方法，免去用户登录这一操作，因为openid并不涉及用户隐私，所以平台没有强制我们询问用户是否授权。这个过程我们会在下篇文章。同样的，根据你的需求在数据库中将openid作为第二索引值保存，用户每次登录时就可以获取自己的数据。，openid是单个用户在此小程序中的唯一标识，单个用户在多个小程序中的标识是不同的。...
使用 UniApp 实现小程序的微信登录功能
10-15
首先，我们需要理解在使用UniApp开发微信小程序的微信登录过程中会涉及到的技术点，包括微信登录的流程、如何在UniApp中封装登录逻辑、如何在小程序中获取用户信息、以及如何将获取的用户信息安全地存储和使用。...
新版uniapp微信小程序授权登录，获取用户信息手机号
JaneYork的博客
07-13 1061
从一开始的getUserInfo改成getUserProfile，再改到直接不能获取信息了，那这个接口还有什么用，根本就没调用必要，直接wx.login拿个code登陆就完事了。其次，如果需要绑定手机号，可以根据标识，后续提示引导用户需要绑定手机号。或者点击按钮微信授权手机号【需要马内】：​​​​​。​​ 但是可以通过wx.login直接获取到openid， 微信小程序获取头像填写，昵称填写 ​​。【不推荐】uniapp一键登录，获取手机号+ unicloud云函数，需要马内： ​​。
uniapp登录流程详解uni.login
热门推荐
程序员哆啦A梦，蓝胖子
11-21 4万+
uni.login(OBJECT)登录 H5平台登陆注意事项： 微信内嵌浏览器运行H5版时，可通过js sdk实现微信登陆，需要引入一个单独的js，详见普通浏览器上实现微信登陆，并非开放API，需要向微信申请，仅个别开发者有此权限H5平台的其他登陆，比如QQ登陆、微博登陆，uni-app未封装，请在条件编译里按普通H5写法编写。 OBJECT 参数说明 参数名 类型 必填 说明 ...
微信小程序（总结一）：uniapp开发，获取微信用户信息（最新）
qq_45796592的博客
02-01 6997
微信小程序开发：最新的获取微信用户信息
uniapp一键登录
m0_62976988的博客
12-07 809
安装小程序的请求适配器 axios-miniprogram-adapter@0.3.5。若使用到了axios,则建议使用npm安装yarn add axios@0.27.2。
uniapp app端和微信小程序端使用微信登陆以及获取用户信息
LLLLL2025的博客
03-01 5760
前言 最近在用uniapp，因为可以多端兼容，所以就入坑了擦 app端和微信小程序端使用uni.login() app端调用uni.login返回的数据： 微信小程序端调用uni.login后返回的数据： 可以看到里面都有code 共同点 它们都会返回 code 不同点 在app端拿到的这个code，去请求后端接口，后端用这个code去请求微信接口换取openid, session_ke...
uniapp中的getUserInfo无法获取到用户信息的问题--解决办法
qq_36882279的博客
05-29 9507
uniapp中的getUserInfo无法获取到用户信息的问题–解决办法 在uniapp微信小程序开发中，2021-04-13之前获取用户信息的写法： <button type="default" open-type="getUserInfo" @getuserinfo="handleGetUserInfo">获取用户信息</button> <script> export default{ data(){ return { userInfo: {}
uniapp开发微信小程序授权登录
06-15
UniApp 是一套基于 Vue.js 的跨平台开发框架，它可以同时用于构建 Web、iOS、Android、H5 等应用。在 UniApp 中，如果你想要开发微信小程序并实现授权登录，你可以按照以下步骤进行： 1. **引入微信 SDK：**首先，确保在你的项目中安装了 UniApp 的微信小程序支持插件。在 `uni-app.json` 文件的 `frameworks` 部分添加 `uni-weixin`： ```json { "frameworks": { "webpack": {}, "vant": {}, "uni-weixin": {} // 添加微信小程序支持 }, } ``` 2. **配置微信 AppID：**在 `uniapp.config.js` 文件中，配置微信小程序的 AppID 和 Secret，这将用于请求微信服务器授权。 ```javascript const wxConfig = { // ... 其他配置项 appid: 'your.wx.appid', // 替换为你的小程序 AppID // ... }; ``` 3. **调用微信登录接口：**在需要使用授权登录的地方，使用 UniApp 提供的 `login` 方法，传入 `wx.login` 函数： ```javascript uni.login({ provider: 'weixin', success(res) { // 获取到code后，可以用它换取access_token和openid // 使用uni.getUserInfo方法获取用户信息 }, fail(err) { console.error('Login failed:', err); } }); ``` 4. **获取用户信息：**在成功获取到临时code后，调用 `getUserInfo` 方法获取用户的基本信息，如昵称、头像等。 ```javascript uni.getUserInfo({ provider: 'weixin', success(res) { // res.userInfo 会包含微信用户的详细信息 }, fail(err) { console.error('Get user info failed:', err); } }); ``` 5. **保存用户信息：**通常在服务器端处理获取到的用户信息，并与数据库中的用户表进行关联，存储或更新用户数据。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值