微信授权的方法是,在项目里面配置拦截器(此处可以参考各个框架的拦截器)没有拦截器也可以,反正意思就是跳转到项目里的时候判断微信环境

如果是微信环境,

判断微信环境的方法是

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {

// 微信环境

}

此时处于没有登陆的状态或者需要微信授权的状态跳转微信授权链接

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {

// 微信环境

var redirect_uri = window.location.protocol + '//' + window.location.host + '/';
var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + WECHAT_APP_ID + "&redirect_uri=" + encodeURIComponent(redirect_uri, "UTF-8") + "&response_type=code&scope=snsapi_base&state=10#wechat_redirect"
window.location.href = url;

}

appid 是自己微信公众号的appid,redirect_uri是授权跳转的url,这个域名也要在微信公众号的后台配置授权安全域名,

比如redirect_uri是 http://www.eeeee.com/#/home,授权回来的url微信会带code,此处code是授权成功给的唯一识别码(用户后台查询用户openid)

此时URL是 http://www.eeeee.com/?code=3333333333#/home,因为前端框架的原因,之后页面跳转url只会改变#号后面的值,此处藏了很多坑,比如不能后面又加了code的参数,就会混淆,如http://www.eeeee.com/?code=3333333333#/home?code=44,微信分享也会遇到一些坑

我的一个解决方案是:

授权回来之后,无刷新改变url

var _url = window.location.protocol + '//' + window.location.host + '/#/home;
window.history.pushState({},0, _url)

这样url又变回授权前的样子(要在用过code之后)

目前感觉还是很好用的

url带#号,微信授权,微信分享那些坑的更多相关文章

  1. url带#号,微信支付那些坑

    现在前端很多框架的前端路由都带#号,主要为了做到无刷新跳转页面. 在微信公众号做微信支付时,配置的支付路径比如是http://www.eee.com/#/order,在调微信支付的方法时错误信息是'U ...

  2. 无需公众号PHP微信登录微信授权微信第三方登录微信开发php开发

    无论是个人还是公司,无需申请公众号,无需申请微信开放平台,即可实现手机网站和PC网站的微 信登录!!! 正常的微信登录是这样的: 1.手机版网站做微信登录,需要申请一个认证公众号,认证不仅需要公司营 ...

  3. 微信授权,openid 分享

    https://packagist.org/packages/fcode/wxshare

  4. window.location.search 为何在url 带# 号时获取不到 ?

    我们在获取url参数时,会常常用到截取参数 getUrlParam(name) { const reg = new RegExp('(^|&)' + name + '=([^&]*)( ...

  5. 微信授权登录(PHP)

    微信授权登录(PHP) 微信授权 OAuth2.0授权 微信网页授权 主要是在项目中遇到网页授权登录这个需求,就对此做些总结记录. OAuth2.0授权 OAuth是一个开放协议,允许用户让第三方应用 ...

  6. SPA单页应用前后分离微信授权

    项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...

  7. 你所误解的微信公众号开发、以及微信公众号网页授权、接收url跳转参数等问题

    前言:有一星期没跟新博客了,最近太忙.项目赶进度就没把时间花在博客上:今天来说说所谓的微信公众号开发和填坑记录: 微信公众号:运行在微信终端的应用 (对于开发者来说比较爽的你只需考虑兼容微信浏览器,因 ...

  8. [转] Android:微信授权登录与微信分享全解析

    https://wohugb.gitbooks.io/wechat/content/qrconnent/refresh_token.html http://blog.csdn.net/xiong_it ...

  9. NodeJs实现自定义分享功能,获取微信授权+用户信息

    最近公司搞了个转盘抽奖的运营活动,入口放在了微信公众号里,好久没碰过微信了,刚拾起来瞬间感觉有点懵逼....似乎把之前的坑又都重新踩了一遍,虽然过程曲折,不过好在顺利完成了,而且印象也更加深刻了,抽时 ...

随机推荐

  1. Servlet学习:实现分页效果的方法

    分页的算法:需要定义四个变量,它们有各自的用处int pageSize:每页显示多少条记录int pageNow:希望显示第几页int pageCount:一共有多少页int rowCount:一共有 ...

  2. (转)C# Enum,Int,String的互相转换 枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...

  3. BootLoader的架构设计

    @注:黄色部分代表根据不同的开发板进行处理.

  4. datagrid

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...

  5. 移动web页面前端开发总结

    移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...

  6. Spring MVC学习笔记——登录和异常处理

    1.在WEN-INF文件夹下面,添加一个login.jsp文件 <%@ page language="java" contentType="text/html; c ...

  7. Excel—利用散点图计算相关系数

    1.建立数组 2.创建散点图. 3.添加趋势线. 4.设立为线性函数,勾选显示公式.显示R^2值,R即为相关系数. 5. 备注:此外也可以使用=CORREL()函数对相关系数进行求值.其结果是一致的.

  8. Linux系统启动过程

    1. 从BIOS到KERNEL BIOS自检->MBR(GRUB)->KERNEL->KERNEL自解压->内核初始化->内核启动 BIOS自检 当电脑开机的时候,电脑会 ...

  9. 在Azure虚拟机上安装VNC

    我们知道,Azure提供的linux虚拟机镜像是没有桌面的,是base版的,大多情况下能满足绝大部分工作需要,甚至很多习惯使用命令行的读者,反而用不惯带桌面的linux OS,但是有些情况下,桌面还是 ...

  10. java project中 xml文件路径问题

    xml文件默认是和src文件平级的,当不在project根目录下时,java代码中使用xml文件时需要写为这种形式:“/src/..../bean.xml”