微信h5授权获取用户手机号（H5页面实现微信授权登录）

项目需求描述：

用户通过扫码海报携带活动二维码跳转到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`函数中即可                。

最近开发分享裂变需求 

 

 

 

 

 

 

 

 ，对开发过程遇到的问题做个小小的总结                ，阅读中如果发现有不正确或者不规范的地方及时指正

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，共同进步

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
。