uniapp 小程序微信授权登录

最新推荐文章于 2024-09-19 09:24:43 发布
最新推荐文章于 2024-09-19 09:24:43 发布
阅读量616 收藏 3
点赞数
分类专栏： 小程序 uniapp 前端 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45665305/article/details/113117307
版权
前端 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
小程序
4 篇文章 0 订阅
订阅专栏
uniapp
3 篇文章 0 订阅
订阅专栏

小程序授权登录是小程序必不可少的功能，直接上我项目的原代码吧

第一步：
这里
我这里是判断用户环境，由于我项目需要配合三个端来使用，原生安卓和ios都需要嵌套我前端小程序的页面，所以这里写了两套

第二步：

调用uniapp提供的api，拿到code，用code来换取token和openid
在这里插入图片描述

直接上源码，希望能帮助到各位刚入行的前端小伙伴

在这里插入图片描述

大哥哥不怕
关注
专栏目录
uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释
高级前端工程师
02-08 2万+
uniapp 微信小程序微信登录，uniapp微信小程序授权登录怎么做，uniapp编译为微信小程序 获取手机号登录教程，uniapp开发小程序,实现获取微信授权登录uniapp开发微信小程序-用户授权登录和获取手机号码新!uniapp微信小程序微信授权登录UNIAPP---实现微信小程序登录授权和手机号授权uniapp 微信小程序 获取手机号/用户授权(最详细)uniapp + vue3微信小程序开发(3)微信授权登录uniapp开发微信小程序-5.用户授权登录和用户信息获取uniapp开发微信小程序授权
【微信授权登录】uniapp开发小程序，实现微信授权登录功能 & 退出登录
weixin_48596030的博客
06-30 1万+
uniapp开发小程序，实现获取微信授权登录功能 & 退出登录
uniapp-实现微信授权登录（详细教程）
weixin_70342264的博客
09-09 2861
uniapp-实现微信授权登录（详细教程）
uni-app微信小程序登录授权的实现
10-15
主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp 微信小程序 授权 登录
weixin_42487883的博客
07-23 3233
通过以上步骤，我们实现了一个简单的微信小程序授权登录功能。用户点击微信登录按钮，触发事件。在事件中，调用uni.login获取用户的code。将code发送到服务器，服务器通过微信接口换取用户的openIdsessionKey和unionId。将用户信息存储到本地，以便后续使用。以上示例代码仅供参考，实际开发中可能需要根据具体需求进行调整和完善。希望本文能对你在开发微信小程序授权登录功能时有所帮助。
uniapp-实现微信授权登录
一个努力不被优化的程序员
11-10 1万+
的很多功能。微信是目前最受用户欢迎的社交平台之一。相比于其他社交平台，微信授权用户可以更加方便地登录应用程序。本文将详细介绍如何在Uniapp中实现微信授权登录，并提供相应的代码和注释。应用本身不需要存储用户的用户名和密码，减少了用户信息泄露的风险。安全性: 微信登录是一种相对安全的登录方式，因为它依赖于微信的。
Uniapp微信授权登录
二锅头
03-14 4200
因为这两个是不变的，在代码中可定义在一个公共组件中导出，需要的地方引入即可。
uniapp 小程序授权登录，获取用户头像昵称等信息
01-26
uniapp 小程序授权登录，获取用户头像昵称等信息，代码已经封装好，下载就能用
uniapp开发之微信小程序登录
最新发布
はんみん的博客
09-19 415
都需要获取临时code（有效期5分钟），再通过code获取用户手机号返回给前端，而且都要用到appid和secret，所以步骤少不了。在开发一款微信小程序时，需要用户进行微信登录，有两种方案。今天介绍第二种，因为第一种开始收费了。再请求获取openid。
uniapp之微信小程序登录
qq_60272948的博客
04-05 2813
在uniapp如何实现登录界面呢。
使用 UniApp 实现小程序的微信登录功能
11-20
1.微信登录思路： 在main.js 中封装公共函数，用于判断用户是否登录 在main.js 中分定义全局变量，用于存储接口地址 如果没有登录、则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey、OpenId 等信息【本应后台接口、但是此处使用js发送请求】 通过 openId 调用后台 Api 获取用户的信息 获取成功，则说明已经授权过了,直接登录成功 获取失败，则说明没有授权过，需要授权之后才能进行登录 用户点击页面微信登录按钮【 <button open-type=”get
新！uniapp微信小程序微信授权登录
irisMoon06的博客
01-03 1万+
新！uniapp微信小程序微信授权登录
uniapp微信一键登录微信授权
热门推荐
m0_45884629的博客
06-05 2万+
微信登录，uniapp微信授权登录
uniapp微信小程序端实现微信登录
m0_51431448的博客
07-08 2393
从网上看了一些，好像说是要先调用uni.getUserProfile 或者uni.getUserInfo获取用户信息后，然后再调用uni.login才行，但是我看着uni.getUserProfile和uni.getUserInfo 返回的都是一些匿名信息（nickName: "微信用户", 头像也是统一的灰色头像），不知道有啥用哦，应该是之前是可以正常返回的，后来不知哪个版本后应该是为了用户的隐私、安全啥的，就都返回匿名信息了。（提前向用户发起授权请求。
uniapp-微信授权登录
一个努力不被优化的程序员
11-25 6377
2.在“开发-开发者工具”中生成JS-SDK签名，获取“appId”、“nonceStr”、“timestamp”和“signature”参数。授权码的流程由于涉及到微信公众号开发者平台的配置，无法在此展示，但是上面提到了具体的配置和获取参数的步骤，按照步骤逐一完成即可。2.在“公众号设置”-“功能设置”-“网页授权设置”中设置授权回调域名；2.在uniapp中引入微信JS-SDK，获取微信授权登录所需的参数；2.在uniapp中引入微信JS-SDK，获取微信授权登录所需的参数。
uniapp微信小程序授权登录
weixin_45128657的博客
03-20 280
【代码】uniapp微信小程序授权登录。
uniapp 小程序微信登录
zaijiandeai的博客
07-23 1357
啥也不说先上效果图 html代码 <template> <view> <view class='header'> <image src='../../static/img/wx_login.png'></image> </view> <view class='content'> <view>申请获取以下权限</view> <text>获得你的公开信息(昵称，头
uniapp 微信小程序登录
qq_34170840的博客
03-22 1万+
2022年 uniapp 微信小程序登录方法
uniapp小程序微信授权登录方法以及样式
05-31
要实现微信授权登录，你需要按照以下步骤进行操作： 1. 在微信公众平台申请开发者账号，并创建一个小程序。 2. 在小程序管理后台中，打开“设置”->“第三方设置”，将“网页授权域名”设置为你的服务器域名。 3. 在uniapp中，使用uni.login()方法获取用户的code。 4. 将获取到的code发送到服务器，使用微信官方提供的接口获取用户的openid和access_token。 5. 将获取到的openid和access_token保存在服务器端，返回给uniapp。 6. 在uniapp中，使用uni.getUserInfo()方法获取用户的基本信息，如昵称、头像等。 7. 将用户的基本信息保存在服务器端，返回给uniapp。 以下是一个简单的示例代码： ```html <!-- 登录页面 --> <template> <view> <button @tap="wxLogin">微信授权登录</button> </view> </template> <script> export default { methods: { wxLogin() { uni.login({ success(res) { // 将code发送到服务器 uni.request({ url: 'https://your.server.com/login', data: { code: res.code }, success(res) { // 获取到openid和access_token const { openid, access_token } = res.data // 将openid和access_token保存在storage中，用于后续接口请求 uni.setStorageSync('openid', openid) uni.setStorageSync('access_token', access_token) // 获取用户基本信息 uni.getUserInfo({ success(res) { // 将用户基本信息发送到服务器 uni.request({ url: 'https://your.server.com/userinfo', data: { openid, nickname: res.userInfo.nickname, avatar: res.userInfo.avatarUrl }, success(res) { // 用户信息保存成功，跳转到首页 uni.switchTab({ url: '/pages/index/index' }) } }) } }) } }) } }) } } } </script> ``` 在样式方面，可以使用uniapp提供的组件样式和自定义样式来实现。以下是一个简单的示例代码： ```html <!-- 登录页面 --> <template> <view class="container"> <image class="logo" src="/static/logo.png"></image> <view class="title">欢迎登录</view> <button class="login-btn" @tap="wxLogin">微信授权登录</button> </view> </template> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .logo { width: 100px; height: 100px; margin-bottom: 20px; } .title { font-size: 24px; font-weight: bold; margin-bottom: 20px; } .login-btn { width: 200px; height: 50px; background-color: #42b983; color: #fff; border-radius: 25px; font-size: 16px; font-weight: bold; text-align: center; line-height: 50px; } </style> ``` 以上示例代码仅供参考，具体实现方式还需根据项目需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值