摘要:最近在做h5支付,然后发现一个问题,微信自带浏览器不支持h5支付,然后后台又做了一个微信支付的接口,然后要传code参数,代码写好总结后,就发到这里记录一下;

因为有两个支付接口,所以首先判断打开页面的是微信浏览器还是其他浏览器,代码如下:

if(ua.match(/MicroMessenger/i) == "micromessenger") {
//微信浏览器
}else{
//其他浏览器
}

然后,请求接口实例如下:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE&connect_redirect=1#wechat_redirect

参数的意思为:

接着我们要准备的就是,把我们支付的这个APPID与REDIRECT_URI填写好,appid问产品要,然后redirect_url自己找到自己需要跳转的地址链接,然后需要获取code的页面通过上一个页面跳转链接传值获取code即可;

例如:

window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cxxxxxxxxxx42c&redirect_uri=https://xxxxx.com/wap/payOrder.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';

随后,我们需要获取code的该页面地址链接就会变成:

https://xxxxx.com/wap/payOrder.html/?code=abc677adaduiadi7838&state=STATE

最后,我们通过获取链接取到code,传值给后台:

function getQueryString(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
} var code = getQueryString("code");

这样,我们就获取到code。

然后,支付的时候发现一个问题,弹出一个支付窗口,然后闪一下,又消失了,然后打印排查,最后发现是产品没把支付域名加上去,如图:

附上支付js代码以及需要的参数:(你的参数和后台的参数要严格按照规定的命名来写,注意大小写)

                    var wxpay = JSON.parse(data).result;

                    function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": 'wx9cxxxxxxxx442c', //公众号名称,由商户传入 ok
"timeStamp": wxpay.timeStamp, //时间戳,自1970年以来的秒数 ok
"nonceStr": wxpay.nonceStr, //随机串
"package": wxpay.package,
"signType": wxpay.signType, //微信签名方式
"paySign": wxpay.paySign //微信签名
},
function(res) {
if(res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
console.log('支付成功!')
}
});
}
if(typeof WeixinJSBridge == "undefined") {
if(document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if(document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}

希望对大家有所帮助。

微信授权获取code(微信支付)的更多相关文章

  1. 微信授权获取code/openid

    微信网页授权 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域名的说明 1.在微信公众号请求用户网页授权之前,开发者需要 ...

  2. 微信点餐系统(七)-微信授权获取openid:

    章节小结: 1.学会了微信授权的步骤,学会了微信授权的文档 2.学会了使用natapp内网穿透工具 3.加深了虚拟机的网络配置以及基本使用 4.学会了抓包购票工具fiddler的使用 5.微信授权步骤 ...

  3. 微信授权获取用户openid前端实现

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活.   首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url   h ...

  4. 微信授权获取用户openId等信息

    在我们开发小程序的时候,需要通过授权获取用户的信息. 第一种使用wx.getUserInfo直接获取微信头像,昵称 // 必须是在用户已经授权的情况下调用 wx.getUserInfo({ succe ...

  5. node 微信授权 获取openid

    node获取微信授权拿到openid 需要了解的网站   1.微信授权. 先说一下流程(一张图代替所有): 流程步骤: 1.用户同意,获取code. 2.通过code获取网页授权access_toke ...

  6. 前端微信登录获取code,userInfo,openid

    getUser(e) { wx.getUserProfile({ desc: '用户完善会员资料', success: res => { let userInfo = res.userInfo; ...

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

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

  8. 微信网页授权获取code链接

    本公众号授权 "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&r ...

  9. 微信网页授权获取code

    <script> var code = GetQueryString('code'); var callback = 'personal.html'; var appId = " ...

随机推荐

  1. ES6学习之ES5之后新增的字符串方法

    1.字符串模板:用法:`${变量名}` (好像是C#6.0中也引入了类似的方法.C#中的用法:$"我是{变量名}" ---> $"我叫{name}" ,相 ...

  2. css细节复习笔记——基本视觉格式化

    css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个 ...

  3. 【题解】 洛谷P2340 奶牛会展

    传送门 重新开始打代码Day1 第一眼看感觉不对啊,这道题目好像空间开不下,是不是不能dp... 后来想到了一个思路,他要求的是\(dp_{i,j,k}=j+k\),然后这样子不是很奇怪吗? 直接一维 ...

  4. SQL语句优化 (二) (53)

    接上一部分 (4)如果不是索引列的第一部分,如下例子:可见虽然在money上面建有复合索引,但是由于money不是索引的第一列,那么在查询中这个索引也不会被MySQL采用. mysql> exp ...

  5. Bootstrap框架常用总结

    Bootstrap框架常用标签:    标题标签:<h1>-<h6>        bootstrap中也设置的相同的样式  - 若要使用 必须使用空标签来定义 比如<s ...

  6. 配置DNS服务器转发器

    1.(windows server 2008 r2)控制面板->管理工具->服务器管理器->DNS->服务器图标->属性 2.转发器->编辑 3.填写DNS并点击确 ...

  7. (三)SSO之CAS框架单点退出,退出到CAS登录界面

    应需求的改变.CAS自定义登录页面不安全,不再使用,于是我一下子回到了原点,在linux上部署上了没有加自定义登陆界面的CAS,接下来开始修改CAS自己默认的登录界面为我们的界面. 一下子修改成功是根 ...

  8. gulp 搭建个人工作流:文件注入、热启动、跨域

    个人比价推崇前后端分离的开发方式,大家伙各司其职,只需通过 API 进行交流,不仅避免了沟通上的成本,更提升了开发效率.而在前端开发工作中,许多需求和问题是相似的,所以我们的开发模式往往是雷同的,是否 ...

  9. 第四天,同步和异常数据存储到mysql,item loader方法

    github对应代码:伯乐在线文章爬取     一. 普通插入方法 1. 连接到我的阿里云,用户名是test1,然后在navicat中新建数据库

  10. Cocoa对象——根类

    [转载自:http://mobile.51cto.com/iphone-274229.htm] Cocoa对象 根类是本文要介绍的内容,仅凭Objective-C语言和运行环境并不足以构造哪怕是最简单 ...