前端微信支付步骤(笔记)
对接了两次微信支付,第一次对接的时候没有做记录下来,这一次把要记录下来
一、获取openId
1、在微信公众平台配置相关信息,具体按照微信官方文档步骤进行配置:mp.weixin.qq.com/wiki?t=reso…
2、微信网页授权,文档:mp.weixin.qq.com/wiki?t=reso…
(1)第一步获取code 将网页地址跳转到如下链接:open.weixin.qq.com/connect/oau… 参数说明:
参数 | 是否必填 | 说明 |
---|---|---|
appid | 是 | 公众号唯一标示,可以登录公众平台查看 |
redirect_uri | 是 | 授权后重定向的回调链接地址(一般都是网站的首页,看具体的业务逻辑,重定向后会携带code),需要对url进行urlEncode处理(可urlEncode的网站:tool.chinaz.com/Tools/urlen… |
response_type | 是 | 返回类型,填写code(即此位置参数无需修改) |
scope | 是 | 填写snsapi_base或snsapi_userinfo。说明:snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 ) |
state | 否 | 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节(根据具体业务需求来定) |
#wechat_redirect | 是 | 无论直接打开还是做页面302重定向时候,必须带此参数 |
构建完上面的url之后,widows.location.href = 上面构建的url,如果参数填写都正确,微信授权成功之后会返回redirect_uri对应的url链接,并携带参数code,如果state也填上了,就会带上state参数 所以重定向后的url将会是:xxx.xxx.xxx?code=xxxxxx&state=xxx 这时候我们就可以拿到code了。
划重点(踩坑日常):如果vue.js开发,路由的默认hash模式下,会给url末尾加上#号,所以微信重定向过来之后的url会是这样子:xxx.xxx.xxx?code=xxxxxx&state=xxx/#/ 所以用 window.location.search 获取不了url后面的参数,认为这是没有参数的url。。。把路由改成history模式就ok了
(2)通过code换取网页授权access_token :access_token 不能保存在前端,一般这一步都是在后台服务器进行的,所以前端负责拿到code,把code传给后台,后台在用code请求微信获取access_token的接口,请求正确时微信会返回access_token,同时也会返回openid,因为这一步不是在前端进行的,所以就不详细写了,后台拿到openid之后,可以通过接口返回给前端,或者保存在cookie中,前端再从cookie中获取openid。
二、使用JSSDK
微信JS-SDK说明文档: mp.weixin.qq.com/wiki?t=reso…
1、绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
2、引入JS文件
H5项目使用微信sdk
在需要调用JS接口的页面引入如下JS文件,(支持https):res.wx.qq.com/open/js/jwe…
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
复制代码
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:res2.wx.qq.com/open/js/jwe… (支持https)。
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
复制代码
备注:支持使用 AMD/CMD 标准模块加载方法加载
vue.js 项目使用微信sdk
安装微信sdk
npm install weixin-js-sdk --save
复制代码
引入微信sdk(这里我是在一个js文件里面引入微信sdk)
import wx from 'weixin-js-sdk'
复制代码
3、通过config接口注入权限配置
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,公众号的唯一标识timestamp: 0, // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: [] // 必填,需要使用的JS接口列表
});
复制代码
参数 | 说明 |
---|---|
debug | 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印 |
appId | 必填,公众号的唯一标识,在公众平台可以查询 |
timestamp | 必填,生成签名的时间戳 |
nonceStr | 必填,生成签名的随机串 |
signature | 必填,签名,可查看JS-SDK使用权限签名算法 微信JS-SDK说明文档 17 附录1 |
jsApiList | 必填,需要使用的JS接口列表,可查看微信JS接口列表: 微信JS-SDK说明文档 16 附录2 |
因为前端不保存access_token的原因,所以timestamp、nonceStr、signature都需要后台生成,appId最好也是后台返回
我这项目目前只用到微信支付,所以jsApiList:['chooseWXPay'],使用其他接口同理
三、调用微信支付接口
在发起支付请求前确保设置好支付目录
官方文档:JSAPI支付步骤
发起一个微信支付请求:微信JS-SDK说明文档 14 微信支付
wx.chooseWXPay({timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: '', // 支付签名随机串,不长于 32 位package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)signType: '', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'paySign: '', // 支付签名success: function (res) {// 支付成功后的回调函数,处理项目的业务逻辑}
});
复制代码
和注入权限配置同理,这些参数除了回调函数以外都需要后台生成和调用微信接口获取,具体可以看微信支付的业务流程
微信支付业务流程
前端对接微信支付的步骤就是这样子,还有后台的一些逻辑,因为我不是做后台的,所以后台的逻辑我很多都没写
开发时遇到的问题
1、弹出微信支付的toast之后不能调起支付
可能原因
1、微信接口注入权限配置出错(没有获取到调用微信支付接口的权限)
2、签名出错
转载于:https://juejin.im/post/5c94792f518825328473f554
前端微信支付步骤(笔记)相关推荐
- 微信支付api的服务器上,服务器微信支付接口笔记(与app端对接)
到这里,准备工作就算完成了. 支付流程步骤详解: 步骤1:用户在商户APP中选择商品,提交订单,选择微信支付. 这一步,app将相关订单信息提交给商户 步骤2:商户后台收到用户支付单,调用微信支付统一 ...
- 服务器微信支付接口笔记-(与app端对接)
最近几天在做app的微信支付和支付宝支付,主要负责服务器接口.记录一下服务器这边的工作. 参考微信的官方文档链接:(有用的几个) 1 - 首先,如果想让app可以使用微信支付,必须先申请一个开放平台的 ...
- Android 微信支付步骤
以前自己写过微信支付,今天让我用h5调用微信支付,结果还浪费了点时间,虽然时间不长. 1.导入jar包 .微信提供的jar包 2.写你的微信支付的代码,其实如果参数都有了就一段代码: public v ...
- jsapi前端微信支付完成后没有执行回调函数
关键字:微信支付.直连模式.公众号开发 正文: 起初我是这么写的,一直无法触发回调函数: onBridgeReady(payParam){WeixinJSBridge.invoke('getBrand ...
- web前端开发流程,前端微信支付流程
第一个阶段,开发环境和工具准备 浏览器 (Google,FireFox,-) 下载,安装前端开发工具vscode, 下载.安装 node.npm.webpack.webpack-cli.cnpm,配置 ...
- 微信支付学习笔记之调用com.github.binarywang.wxpay.service接口
接口链接:https://github.com/binarywang 使用步骤: 将HttpServletRequest转成 ip /*** 获得请求地址ip* @param httpservletr ...
- 【WeChatPay】微信支付V3学习笔记(一)
微信支付学习笔记 一.获取相关信息 二.API V3 2.1.引依赖 2.2.写配置类 2.2.1.获取商户的私钥文件 2.2.2.获取签名验证器 2.2.3.获取http请求对象 2.3.下单显示微 ...
- Thinkphp整合微信支付功能
1.微信公众号: 独特的appid.appscrect.接口权限之中设置可以获取用户ID信息权限的域名(每个用户对于不同公众都会有一个特有ID,通过这个ID获取用户微信账号基本信息.详情看微信开发者文 ...
- 畅购商城4.0 微信支付
畅购商城4.0 1.微信支付 1.1流程分析 1.2微信支付概述 1.2.1账号申请 步骤一:注册公众号,根据自身主体类型注册对应的公众号 只能申请服务号,订阅号没有办法申请支付 https:// ...
最新文章
- infopath java包_InfoPath 2013 修补程序包 (Ipeditor x none.msp) 的描述︰ 2014 年 4 月 8,...
- 大批量插入数据如何优化
- 中dubbo所需要的依赖_Dubbo介绍、dubbo架构图、dubbo运行和执行流程、dubbo支持的协议以及支持的注册中心...
- android语言列表+波斯,Android 多语言入门及实战
- osip2 代码分析
- RTTI、dynamic_cast、typeid、虚函数表
- 51Nod-1284 2 3 5 7的倍数【数位DP+记忆化搜索】
- android 界面布局
- 《The Django book 2.0中文译本》PDF
- linux卸载驱动命令,卸载打印机驱动程序 (Linux)
- CSS之内联、内部、外部样式
- 一步步用python制作游戏外挂
- 百度扩容软件V.2.3版,第四代扩容带自助修复功能
- 用hook android 微信,【第一篇】【安卓微信】HOOK微信发消息,当HOOK遇上HOOK。
- Ubuntu+Tesla M40上OpenCL问题解决过程
- 激光雷达还是摄影测量?两者数据融合如何提高点云质量
- 量化岗经典面试题——纸牌游戏
- 数据分析 # 深入分析近三年以来各大城市发展情况
- Android Studio3.5及使用AndroidX的一些坑
- 林轩田机器学习基石课程个人笔记-第六讲