H5页面实现微信授权登录

news2025/1/24 5:42:20

项目需求描述:

用户通过扫码海报携带活动二维码跳转到h5页面,并且完成微信授权,完成授权的用户进入小程序后不再进行授权操作。这里边涉及到了两个大问题,一是怎样在一个域名下部署两个项目,二是用户点击授权之后跳转当前页,获取到code值后,什么时候向服务端发送授权请求。

先讨论第一个问题?

首先第一个项目正常打包部署即可,生成的域名`www.xxx.xxx`;
第二个项目的域名必须是`www.xxx.xxx/h5/`;
对于前端来说需要做的是:

1. 增加请求前缀,如图1
2. 配置路由信息,如图2
3. 修改模板文件index.html,如图3
4. 最后通过nginx将项目部署到服务器。

图1:

图2:

图3:
注意:如果你是通过vue开发的h5页面那么你只需要配置router文件就行,如果是原生开发的h5那么你就得配置.html文件。

就<meta base=/h5/ >做一说明:

 base标记定义了文档的基础URL地址,在文档中所有的相对地址形式的URL都是相对于这里定义的URL而言的。一篇文档中的<base>标记不能多于一个,必须放于头部,并且应该在任何包含URL地址的语句之前。

 授权问题?

在h5页面点击授权后,重定向到当前项目 https://www.xxx.xxx/h5/

const jumpUrl = `https://www.xxx.xxx/h5/`

window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb20930d8128f9ba5&redirect_uri=${jumpUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// location.herf 该url中除了重定向地址,其他的全是官方文档提供。

// 重定向后的页面url地址会携带用户的code值,例如:`https://www.xxx.xxx/h5/?code=xxxxxxxxxxxxxxxxxxxxxxx` 这种形式

 这样我们就能拿到用户code,再向服务端发送请求获取用户信息,在按照产品需求进行相应的操作。

以上是整个授权的流程,我在实现授权的过程中遇到了这样一个问题:

就是页面重定向之后是不会再去执行当前方法中后续代码的,所以不要在执行完window.location.href 这段代码后立马去获取url中的code值以及后续的请求操作。(原因浏览器重定向后会刷新页面,对于单页应用而言会发生组件卸载和重新渲染)应该在页面的根组件生命周期钩子中获取url中相应的值,去进行后续操作。(因为我当时使用vue开发的h5页面,所以当时是在`created`这个钩子中进行判断的),如果使用原生的话在`onload`函数中即可。

最近开发分享裂变需求,对开发过程遇到的问题做个小小的总结,阅读中如果发现有不正确或者不规范的地方及时指正,共同进步。

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

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

相关文章

vue.js not detected问题解决

最近在看vue的时候&#xff0c;发现之前装过的vuedevtools提示vue.js is not detected。重装了一次后&#xff0c;发现对于没有应用vue框架的页面&#xff0c;的确是检测不到vue.js&#xff0c;所以报这个很正常&#xff1b;切换到有vue.js资源的页面&#xff0c;调试界面就会自…

史上最详细vue的入门基础

一&#xff1a;Vue Vue&#xff1a;一种用于构建用户界面的渐进式javascript框架 Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件 特定&#xff1a; 1、采用组件化模式&#xff0c;提高代码复用率&#xff0c;且让代码更好…

安装与配置webpack-dev-serve

作用 相当于在本地开启了一个服务&#xff0c;我们可以通过http网络请求访问提高了IO性能&#xff0c;因为webpack-dev-server将我们的文件编译后放到内存里面&#xff0c;以空间换时间无需我们每次都需要手动编译我们的文件&#xff0c;我们每次保存文件&#xff0c;就会自动…

【web前端面试宝典】经典10问(上篇)

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;前端面试 &#x1f451;名言警句&#xff1a;海阔凭鱼…

Vue:实现TodoList案例(尚硅谷)

Vue核心&#xff1a;Vue核心&#xff1a;组件化编程&#xff08;脚手架&#xff09; 一、静态页面 app.vue 注&#xff1a; MyItem.vue不直接在app.vue中引入&#xff0c;而在MyList.vue中引入 <template><div id"root"><div class"todo-cont…

【微信小程序】一文读懂,数据请求

&#x1f352;观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新新文章啦&#xff0c;上文我们讲解了微信小程序的全局配置和局部配置&#xff0c;那么今天就让我们来学习微信小程序的数据请求&#xff0c;这可是做小程序交互效果和绑定数据动…

react生命周期详细介绍

目录 挂载&#xff1a;在组件实例被创建并插入到dom中时&#xff0c;生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render componentDidMount 更新&#xff1a;当组件的 props 或 state 发生变化时会触发更新。 componentWillReceive…

教你如何手写一个Promise

想要源码的可以看这里&#xff0c;里面也有一些其他的知识 想要手写一个promise&#xff0c;首先就要了解promise&#xff0c;想必大家都被过一些promise的面试题&#xff0c;知道一些promise的用法&#xff0c;主要考的就是一种异步编程的思想。 了解promise 我们先来看看直…

Node.js——http模块和导出共享

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿 offer&#xff08;秋招&#xff09; &#x1f947;推荐学习&…

uni-app 自定义下拉框

如图&#xff1a; html&#xff1a; <view class"row-item"> <view class"lable-tit">性别&#xff1a;</view> <view class"selected-all"> <view class"drop-down-box" click"btnShowHideClick…

JavaScript DOM基础

文章目录前言一、DOM 简介1.1 什么是 DOM1.2 DOM 树二、获取元素2.1 如何获取页面元素2.2 根据 ID 获取2.3 根据标签名获取2.4 通过 HTML5 新增的方法获取2.5 获取特殊元素&#xff08;body&#xff0c;html&#xff09;三、事件基础3.1 事件概述3.2 事件三要素3.3 执行事件的步…

Ant Design Pro(5)-7.高级表格ProTable

Ant Design Pro 高级表格ProTable的使用 文章目录Ant Design Pro 高级表格ProTable的使用一. 简介1. 什么是ProTable&#xff1f;2. 何时使用ProTable&#xff1f;二. 使用1. ProTable属性及使用2. ActionRef 手动触发3. Columns 列定义4. 批量操作5. 搜索表单一. 简介 1. 什么…

【Vue】父子组件通信

[Vue]父子组件通信前言父组件向子组件传值法一: props法二: $parent子组件向父组件传值$emit$emit .sync$refsv-model前言 &#x1f6a9;&#x1f6a9;&#x1f6a9; &#x1f48e;个人主页: 阿选不出来 &#x1f4a8;&#x1f4a8;&#x1f4a8; &#x1f48e;个人简介: 一名…

【Javaweb】会话跟踪技术CookieSession

学习目录前言一.会话引入二.Cookie1.Cookie的理解2.Cookie生命周期3.Cookie有效路径4.Cookie使用细节三.Session1.Session基本原理2.Session的理解3.Session基本使用4.Session底层5.Session生命周期前言 纸上得来终觉浅&#xff0c;绝知此事要躬行 一.会话引入 什么是会话&a…

“Property or method “***“ is not defined on the instance but referenced during render.”报错的原因及解决方案

报错问题&#xff1a; 在使用vue-cli运行项目的过程中&#xff0c;在VScode中不报错&#xff0c;但在浏览器调试工具中发出 [Vue warn]: Property or method "******" is not defined on the instance but referenced during render. Make sure that this propert…

vue-day01 使用cdn引入使用

vue-day01vue?vue简明例子模板语法1. 使用{{}} Mustache语法将数据绑定到对应的实例2.使用 v-once指令3.v-html指令4.v-bind指令和v-on指令5.动态参数&#xff0c;修饰符&#xff0c;指令缩写动态参数修饰符指令缩写vue? Vue 是一套用于构建用户界面的渐进式框架。与其它大型…

前端不使用 i18n,如何优雅的实现多语言?

前言&#xff1a; 关于ERP管理系统的多语言&#xff0c;或者其他应用的多语言一直是我们比较麻烦的问题&#xff0c;大部分是使用 i18n 在代码里进行配置&#xff0c;如果想要修改语言就要自己去改代码&#xff01; 今天我们分享一下如何不使用 i18n 去实现多语言&#xff0c;用…

web前端面试高频考点——Vue的基本使用(一文掌握Vue最基础的知识点)

系列文章目录 内容参考链接Vue基本使用Vue的基本使用&#xff08;一文掌握Vue最基础的知识点&#xff09;Vue通信和高级特性Vue组件间的通信及高级特性&#xff08;多种组件间的通信、自定义v-model、nextTick、插槽&#xff09;Vue高级特性Vue的高级特性&#xff08;动态组件…

ES6遍历方法,forEach、for...in,for..of

前言 js中遍历方法很多&#xff0c;在ES6新特性中出现了很多新的遍历方法&#xff0c;使遍历数组和对象更加方便&#xff0c;下面开始列举各种方法。 1.遍历对象 1.1.for…in…循环遍历对象自身和继承的可枚举的属性&#xff08;不包括Symbol&#xff0c;因为symbol的实例是…

微信小程序开发入门与实战(数据、事件、条件)

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; 微信小程序 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f4…