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

如果是微信环境,

判断微信环境的方法是

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. js 正则表达式 ( 1 )

    https://regexper.com/ 量词: ?: 最多一次(0次或者1次) +:至少一次(大于等于1次) *:大于等于0次 {n}:n次 {n,m}:n次到m次之间,包括n,m {n,}:n次 ...

  2. mac电脑http代理服务设置公司内网的相关配置

    哈喽,亲爱的小伙伴们 ,今天给大家分享一下公司内网配置 http代理服务设置及外网访问 ,<这是mac电脑的噢>  ===链接地址我的github项目   https://github.c ...

  3. css3 圆角

    -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ bo ...

  4. juery学习总结——例子

    1.select元素在选择是找到选择的值和option中的值 <!DOCTYPE html> <html> <head lang="en"> & ...

  5. Active Record 数据迁移

    1.创建controler: welcome ;action: index $ rails generate controller welcome index 2.创建名为Article的model定 ...

  6. Git学习笔记

    1.第一次提交文件的过程:     1)创建代码库:cd到要作为git代码库的文件夹下,执行git init命令.     2)设置邮箱和用户名:设置后才可提交代码,git config user.e ...

  7. Entity framewok 如何实现多条记录作为一条取出, for xml path如何实现

    http://www.myexception.cn/linq/1288046.html Entity framewok 怎么实现多条记录作为一条取出, for xml path怎么实现News表:ID ...

  8. Oracle基本查询语言

    --1.简单的数据查询语句--查询所有的员工的信息select * from emp;--查询员工的姓名和工作职位select ename,job from emp;--姓名和工作以中文的形式显示出来 ...

  9. 一个java源文件中为什么只能有一个public类。

    我们都遇到过一个源文件中有多个java类,但当第一个类使用public修饰时,如果下面还有类使用public修饰,会报错.也就是是说一个java源文件最多只能有一个public类. 当有一个publi ...

  10. Object-C目录

    Object学习目录: 1.OC概述 2.OC第一个应用程序 3.OC之类和对象(属性.方法,点语法) 4.OC之类的扩充(self,super关键字.继承.构造函数等)   5.OC之分类Categ ...