uniapp写登陆|微信小程序登录和微信h5登录使用同一个页面

在这里插入图片描述

文章目录

  • 导文
  • 微信小程序登录
    • 先写一个样式
    • 代码实现
    • 详细解释:
  • 微信h5登录
    • 先写一个样式
    • 代码实现
      • 1. `checkWeChatCode()`
      • 2. `getWeChatCode()`
      • 页面获取登陆后的code


导文

微信小程序登录怎么实现?
微信h5登录怎么实现?
用uniapp写同一个页面,怎么实现都通用呢?

微信小程序登录

先写一个样式

  <button type="default" @click="handerdl">登陆</button>

在网页中创建一个可点击的按钮,创建一个回调函数handerdl
在这里插入图片描述

代码实现

以下代码包含了登录逻辑和根据不同平台存储 token 的代码:

handerdl() {wx.login({success(res) {if (res.code) {// 如果登录成功,会执行以下代码块// 打印登录获取的 codeconsole.log(res.code);// 调用 Login 函数,传入 res.code,并且使用 Promise 对象处理返回结果Login(res.code).then((res) => {// 打印返回的数据console.log(res.data);console.log(res.data.access_token);// 根据不同平台进行 token 存储处理// 微信小程序平台处理/*#ifdef MP-WEIXIN*/wx.setStorageSync("token", res.data.access_token);wx.setStorageSync("Bear", res.data.token_type);/*#endif*/});} else {// 登录失败时的处理console.log("登录失败!" + res.errMsg);}},});
}

详细解释:

  1. wx.login({ ... }):这是一个微信小程序的 API 调用,用于获取用户登录凭证 code。wx 是微信小程序提供的全局对象,wx.login 方法获取用户登录凭证(code),然后执行 success 回调函数。

  2. success(res) { ... }:登录成功后的回调函数,参数 res 包含了登录成功后的返回信息,其中 res.code 是用户登录凭证。

  3. if (res.code) { ... } else { ... }:判断是否成功获取了登录凭证,如果成功则执行相应的操作,否则输出登录失败信息。

  4. Login(res.code).then((res) => { ... });:调用名为 Login 的函数(假设是一个异步函数或者返回 Promise 的函数),将 res.code 作为参数传递给它。成功获取到返回结果后,使用 .then() 处理返回的数据。

  5. console.log(res.data);console.log(res.data.access_token);:打印登录成功后返回的数据,包括 access_token。

  6. 条件编译块

    • /*#ifdef MP-WEIXIN*//*#endif*/:这部分是条件编译的语法,用于区分不同的平台。在微信小程序平台下执行 wx.setStorageSync 存储 token。

微信h5登录

先写一个样式

     <button  @click="getWeChatCode">微信授权登录</button>

在网页中创建一个可点击的按钮,创建一个回调函数getWeChatCode
在这里插入图片描述

代码实现

主要分为两个函数:checkWeChatCode()getWeChatCode()。来逐步解释这两个函数的作用和实现细节:

1. checkWeChatCode()

checkWeChatCode() {let code = this.getUrlCode("code");let http = this.getUrlCode("http");console.log(22, code, http, encodeURIComponent(location.href));if (code) {// this.handleToLogin(code)  //该方法如果回调页面是在本页面才使用 我这里的实例没有使用回调页面使用了console.log(23);}
},
  • 作用:用于检查当前页面 URL 中是否包含名为 code 的参数。
  • 详细解释
    • this.getUrlCode("code"):调用 getUrlCode 函数获取 URL 中名为 code 的参数值。
    • this.getUrlCode("http"):获取 URL 中名为 http 的参数值。
    • console.log(22, code, http, encodeURIComponent(location.href));:输出日志,显示 codehttp 参数的值,以及当前页面的 URL。

2. getWeChatCode()

getWeChatCode() {uni.setStorageSync("wechat_login_tag", "true");const appID = "wxqweqweqwe123123"; // 公众号appIDconst parsedUrl = new URL(window.location.href);const basAAA = parsedUrl.origin;const redirectUrl = basAAA;const callBack = `${redirectUrl}/user/index`; // 回调地址 就是你的完整地址登录页window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +appID +"&redirect_uri=" +encodeURIComponent(callBack) +"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
},
  • 作用:用于发起微信授权登录请求,如果当前页面没有 code 参数,则重定向到微信授权页面。
  • 详细解释
    • uni.setStorageSync("wechat_login_tag", "true");:在 uni-app 中设置一个本地存储标记,用于退出登录后不再自动触发登录。
    • const appID = "wxqweqweqwe123123";:设置微信公众号的 AppID,确保请求授权时使用正确的应用标识。
    • const parsedUrl = new URL(window.location.href);:解析当前页面的 URL。
    • const basAAA = parsedUrl.origin;:获取当前页面的域名部分。
    • const redirectUrl = basAAA;:设置重定向地址为当前页面的域名部分。
    • const callBack = ${redirectUrl}/user/index;:拼接完整的回调地址,这里将重定向到 /user/index 页面。
    • window.location.href = ...:构建微信授权链接并进行页面重定向。
      • "https://open.weixin.qq.com/connect/oauth2/authorize":微信授权登录接口地址。
      • appid=:传入公众号的 AppID。
      • redirect_uri=:传入经过 encodeURIComponent 编码的回调地址。
      • response_type=code:要求微信返回 code 类型的授权码。
      • scope=snsapi_userinfo:获取用户的基本信息。
      • state=1:状态参数,用于防止 CSRF 攻击。
      • #wechat_redirect:微信要求的固定参数,表示重定向到微信授权页面。

页面获取登陆后的code

  onLoad(parm) {let code = this.getUrlCode("code");console.log(code);},

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/48884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CloudCampus的三种部署模式

CloudCampus的三种部署模式 本地部署 客户购买控制器 自己运营 软件永久license sns &#xff0c;将软件补丁、软件升级&#xff08;含升级版本的新特性&#xff09;、远程支持等打包在一起组成SnS年费 msp自建云部署 msp 购买控制器 msp运营 …

深入解析:conda 与 pip 使用全攻略

在 Python 环境管理和包管理中&#xff0c;conda 和 pip 是两种最常见的工具。了解它们之间的区别和联系&#xff0c;并掌握常用的使用命令和配置源&#xff0c;可以帮助我们更高效地管理 Python 环境和安装包。 conda 与 pip 的区别和联系 区别 包管理范围&#xff1a; cond…

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案)

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案) 一、介绍 早在2009年, 深度学习还只是一个新兴领域。只有少数人认为这是一个富有成效的研究领域。今天,它被用于开发应用程序,这些应用程序在一段时间前被认为是困难或不可能做到的。 语音识别、图像识别、在数…

Linux第三节课(基本指令)

一、补充 1. *表示可执行程序&#xff0c;例如&#xff1a; ------ ls *(显示当前目录下的所有的可执行程序) ------ ls *.c(显示当前目录下的所有的可执行的C语言程序) ------ ls test*.c(显示当前目录下的以test命名开头的所有的可执行的C语言程序) 2.rm -i 被删文件 --…

《云原生安全攻防》-- 容器攻击案例:镜像投毒与Fork炸弹

在本节课程中&#xff0c;我们将介绍两个比较有意思的容器攻击案例&#xff0c;镜像投毒与Fork炸弹。 在这个课程中&#xff0c;我们将学习以下内容&#xff1a; 镜像投毒&#xff1a;构建恶意镜像&#xff0c;诱导用户拉取镜像创建容器。 Fork炸弹&#xff1a;Fork炸弹的攻击…

【Socket 编程】基于UDP协议建立多人聊天室

思路 对于服务端来说&#xff0c;除了要接收消息之外&#xff0c;还要实现一个路由转发模块&#xff0c;该路由转发模块可以将相应发送给所有连接的客户端。而对于客户端来说&#xff0c;除了要发送消息给聊天室&#xff0c;还要能实时看到其它所有客户端的消息。 下面来看看具…

鸿蒙笔记--动画

这一节主要了解一下鸿蒙的动画&#xff0c;动画的引入主要是为了提升用户体验、增加用户反馈和互动感、引导用户操作以及缓解等待带来的不适感。 属性动画: Index.ets Entry Component struct Index {StatewidthSize: number 100StateheightSize: number 40build() {Column…

C++函数( Lambda、inline 、多载、指标)第二部

Lambda 函数 Lambda 函数是C11 新增的函数形式&#xff0c;这是种匿名函数&#xff0c;也就是不需要函数识别字&#xff0c;简单举例如下 #include <iostream>int main() {auto f [](int i) {return i * i;};std::cout << f(11) << std::endl;std::cout &l…

sql常见50道查询练习题

sql常见50道查询练习题 1. 表创建1.1 表创建1.2 数据插入 2. 简单查询例题(3题&#xff09;2.1 查询"李"姓老师的数量2.2 查询男生、女生人数2.3 查询名字中含有"风"字的学生信息 3. 日期相关例题(6题&#xff09;3.1 查询各学生的年龄3.2 查询本周过生日的…

redis的学习(二):常见数据结构及其方法

简介 redis常见的数据结构和他们的常用方法 redis的数据结构 redis是一个key-value的nosql&#xff0c;key一般是字符串&#xff0c;value有很多的类型。 j基本类型&#xff1a; stringhashlistsetsortedSet 特殊类型&#xff1a; GEOBitMapHyperLog key的结构 可以使用…

MacOS M1 安装item2 并配置Zsh

文章目录 1 下载item22 美化item22.1 配置主题2.2 设置黑色的主题&#xff1a;2.3 配置显示状态栏 status bar 3 安装 Oh my zsh3.1 设置主题3.2 设置插件3.3 安装第三方插件1 下载仓库解压2 使用 git clone 一些常用插件以及其作用 参考 1 下载item2 MacOS自带终端&#xff0…

ontap simulator配置过程

一、下载模拟器 参考《Simulate_ONTAP_9-14-1_Installation_and_Setup_Guide.pdf》P4的指导&#xff0c;登录网站进行下载。 二、传入pve&#xff0c;并解压转换 # 解压 tar -xvf vsim-netapp-DOT9.14.1-cm_nodar.ova# 解压后的文件列表&#xff0c;其中ovf文件里定义了虚拟机…

WGS84经纬度坐标 GCJ02火星坐标 BD09百度坐标互相转换

WGS84经纬度坐标 GCJ02火星坐标 BD09百度坐标互相转换 背景&#xff1a;uniapp做的微信小程序&#xff0c;使用到了相机拍照并获取位置坐标信息&#xff1b;在腾讯地图上展示坐标点位置信息&#xff1b; 由于业务需要我们的PC端用的不是腾讯地图&#xff0c;需要使用WGS84坐标或…

《0基础》学习Python——第二十三讲__网络爬虫/<6>爬取哔哩哔哩视频

一、在B站上爬取一段视频&#xff08;B站视频有音频和视频两个部分&#xff09; 1、获取URL 注意&#xff1a;很多平台都有反爬取的机制&#xff0c;B站也不例外 首先按下F12找到第一条复制URL 2、UA伪装&#xff0c;下列图片中&#xff08;注意代码书写格式&#xff09; 3、Co…

ViT(Vision Transformer)网络结构详解

本文在transformer的基础上对ViT进行讲解&#xff0c;transformer相关部分可以看我另一篇博客&#xff08;transformer中对于QKV的个人理解-CSDN博客&#xff09;。 一、网络结构概览 上图展示了Vision Transformer (ViT) 的基本架构&#xff0c;我按照运行顺序分为三个板块进…

Rancher

文章目录 Rancher1. 安装和配置2. 服务部署和管理3. 容器自动化缩容和扩容 Rancher Rancher 是一个开源的企业级容器管理平台&#xff0c;旨在简化容器化应用的部署、管理和运维。它支持多种容器编排引擎&#xff0c;如 Kubernetes、Docker Swarm 等&#xff0c;并提供了统一的…

自动驾驶系统开发与调试:车路云一体化无人驾驶挑战赛参赛体验

点击蓝字 关注我们 在过去的几年里&#xff0c;自动驾驶技术在全球范围内吸引了大量关注。其潜力不仅在于提升行车安全&#xff0c;而且还可以改变我们的出行方式和城市规划&#xff0c;提高交通运输效率。国际汽车工程师学会&#xff08;SAE&#xff09;根据不同自动驾驶程度&…

MySQL学习之事务,锁机制

事务 什么是事务&#xff1f; 事务就是逻辑上的一组操作&#xff0c;要么全做&#xff0c;要么全不做 事务经典例子&#xff1a;转账&#xff0c;转账需要两个操作&#xff0c;从一个人账户上减钱&#xff0c;在另一个账户上加钱&#xff0c;比如说小红给小明转账100元&…

JAVA在线文档

1.存在码 JDK21中文API 2.全栈行动派 JDK17中文API 3.mklab.cn JDK11中文API JDK8中文API JDK7-21英文API 4.docs.oracle.com JDK7-22英文文档

项目笔记| 基于Arduino和IR2101的无刷直流电机控制器

本文介绍如何使用 Arduino UNO 板构建无传感器无刷直流 &#xff08;BLDC&#xff09; 电机控制器或简单的 ESC&#xff08;电子速度控制器&#xff09;。 无刷直流电机有两种类型&#xff1a;有传感器和无传感器。有感无刷直流电机内置3个霍尔效应传感器&#xff0c;这些传感…