H5页面实现微信授权登录-Toy模板网

这篇具有很好参考价值的文章主要介绍了H5页面实现微信授权登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求描述

用户通过扫码海报携带活动二维码跳转到h5页面，并且完成微信授权，完成授权的用户进入小程序后不再进行授权操作。这里边涉及到了两个大问题：

一是怎样在一个域名下部署两个项目；
二是用户点击授权之后跳转当前页，获取到code值后，什么时候向服务端发送授权请求。

问题分析

先讨论第一个问题?

首先第一个项目正常打包部署即可，比如主服务域名为：www.xxx.xxx;
然后，第二个项目的域名必须是是在主域名的后面拼接上项目路由，如：www.xxx.xxx/h5/；（h5只是路由名称，可以自定义）
对于前端来说，需要做以下操作：

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

图1：
H5页面实现微信授权登录

图2：
H5页面实现微信授权登录

图3：

H5页面实现微信授权登录

注意：如果你是通过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函数中去获取。

总结

在开发过程中往往会遇到奇奇怪怪的小问题，但是解决这些问题往往是最基础最底层的知识点；因为当时卡了很久，做个小小的总结来鞭策自己，希望能帮助到遇到同样问题的小伙伴，阅读中如果有异议或者不正确的地方欢迎评论，我会及时更新。文章来源地址https://www.toymoban.com/news/detail-402834.html

到了这里，关于H5页面实现微信授权登录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！