uniapp微信小程序登陆流程(前端详细)

简介: 登陆逻辑先通过uni.getUserProfile()函数获取用户信息

登陆逻辑先通过uni.getUserProfile()函数获取用户信息

1024b19218af40c7a8a6290c6186518d.png

然后将uni.login()放在uni.getUserProfile()成功回调里面获取code

1024b19218af40c7a8a6290c6186518d.png

最后在uni.login登陆成功的回调里面向后端发送 code encryptedData iv 等信息


后端通过encryptedData iv来得到用户的解密所有信息,然后返回给前端,前端把这个信息存储下来实现登陆


先看几遍官方文档


小程序登录 | 微信开放文档


小程序登录 | 微信开放文档


前端代码 大致是这样,可以自己改改

login() {
    let that = this;
    uni.getUserProfile({
      desc: '用于完善用户资料',
      lang: 'zh_CN',
      success: (res) => {
      console.log(res)
      // that.wxlogin(res.userInfo);
      uni.login({
        success(codeData) {
        console.log(codeData)
        uni.showLoading({
          title: '登录中'
        });
        uni.request({
          url: myApi.loginUrl,
          data: {
          code: codeData.code,
          encryptedData: res.encryptedData,
          iv: res.iv,
          },
          method: 'GET',
          success(login) {
          uni.hideLoading();
          console.log(login)
          uni.showToast({
            title: '登陆成功去看打印',
            icon: 'none'
          })
          }
        })
        }
      })
      }
    });
    },


坑只能通过点击事件来调取,不能直接调取

1024b19218af40c7a8a6290c6186518d.png

无效调取

1024b19218af40c7a8a6290c6186518d.png


目录
相关文章
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
110 7
|
23天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
15天前
|
小程序 前端开发 算法
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
203 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
48 0
微信小程序更新提醒uniapp
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
40 2
|
27天前
|
机器学习/深度学习 人工智能 小程序
【一步步开发AI运动小程序】三、运动识别处理流程
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP备受关注。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章介绍了视频帧、帧率FPS、抽帧和人体识别等基本概念,并详细说明了处理流程,包括抽帧、人体识别检测、骨骼图绘制和运动分析等步骤。下篇将介绍如何在小程序中实现抽帧。
|
1月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
26 0
|
1月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
61 0
|
1月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
44 0