概要
最近公司开展支付，大概总结下支付流程以及遇到的问题
使用工具
使用 uniapp 模块搭建H5页面
微信支付
官方文档链接：微信支付
| 支付方式 | 使用场景 |
|---|---|
| H5支付 | H5支付主要是在手机、ipad等移动设备中通过第三方的浏览器来唤起微信支付的支付产品。 |
| JSAPI支付 | JSAPI支付主要是用户通过消息或扫描二维码在微信内部打开网页时，可以调用微信支付完成下单购买的流程。 |
| Native支付 | Native支付是指商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式，适用于PC网站、实体店单品或订单、媒体广告支付等场景 |
| APP支付 | APP支付又称移动端支付，是商户通过在移动端应用APP中集成开放SDK调起微信支付模块完成支付的模式。(安卓IOS原生使用) |
| 小程序支付 | 小程序支付是专门被定义使用在小程序中的支付产品。目前在小程序中能且只能使用小程序支付的方式来唤起微信支付。 |
| 付款码支付 | 付款码支付是用户展示微信钱包内的“刷卡条码/二维码”给商户系统扫描后直接完成支付的模式。主要应用线下面对面收银的场景。 |
本次涉及到：
H5端的话，微信支付大概分为两种，一种是外部浏览器拉取微信支付--- H5支付，另外一种是微信内部浏览器拉取支付 --- JSAPI
PC端，主要是使用微信支付---Native
H5支付
H5支付主要用于触屏版的手机浏览器请求微信支付的场景，方便从外部浏览器唤起微信支付。
- 准备工作
申请对应商户属性的APPID以及mchid等 （一般是管理微信商户平台账号的人去申请） - 后台搭建和配置开发环境，前端准备好对应页面，此处需要在微信商户平台设定回调页面链接redirect_url （主要用于支付完成后跳转从微信回归到H5页面）。
业务流程
- 前端调用支付接口，传递订单信息
- 后台创建订单信息，获取到微信的支付链接，传递给到前端
- 前端直接跳转该url拉取微信支付，支付成功之后，点击完成会自动跳转至回调页面redirect_url
- 在该回调页面上，前端可调用查询支付结果接口，根据结果返回跳转成功或失败页面，展示对应的结果
回调页面 主要功能 — 1.调用查询支付结果的接口 2.根据后台返回的结果数据跳转成功或失败页面等待，展示结果。
官方流程图
JSAPI
JSAPI支付适用于线下场所、公众号场景和PC网站场景，主要是用于微信内部支付的调用。
同理
准备工作
申请对应商户属性的APPID以及mchid等 ，配置授权目录
业务流程类似，前端页面改变的地方是 需要调用微信内部方法获取code传递给后台，以便后台获取assess_token或openId
业务流程
- 前端 Home 页面 ，创建订单，调用订单信息接口，获取到订单Id等；
- 在 Home 页面，判断环境-是否是微信内部环境，如果 是 - 通过微信网页授权
https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXX&redirect_uri=${encodeURIComponent(需要跳转的页面)} &response_type=code&scope=snsapi_base&state=STATE#wechat_redirect - 微信携带授权code重定向到 Home 页面， 后台可将订单数据拼接在重定向的地址后面，也可单独请求（注意：路由是history还是hash），将code传递给后台以便获取access_token、openid，保存本地；
- pay页面中选择支付的方式，调用后台接口，判断是否时微信内部浏览器支付
①YES，调用接口传递订单信息及openId，获取微信JS-API支付需要用到的参数；前端通过JSAPI接口，拉取微信支付；
②NO，则可以直接跳转后台返回的支付链接，拉取对应的支付； - 同理，在回调页面上，前端可调用查询支付结果接口，根据结果返回跳转成功或失败页面，展示对应的结果
微信官方文档-网页授权
网页授权流程：
- 引导用户进入授权页面同意授权，获取code
- 通过code换取网页授权access_token（与基础支持中的access_token不同）
- 如果需要，开发者可以刷新网页授权access_token，避免过期
- 通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）
Home 页面（一般进入H5页面就可以获取code）
onShow() {
// 1. 判断环境
if(this.isWechat()){
// 2.获取code
this.getCode()
}
},
methods: {
// 判断是否微信环境环境-（针对JS-API）
isWechat() {
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == 'wxwork'
var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'
return isWeixin
},
// 获取code
getCode() {
// 非静默授权，第一次有弹框 静默授权的话，scope=snsapi_base
// 1.授权后重定向的回调链接地址（当前页面的地址（home 地址）） window.location.href
var redirect_URL = ' http://localhost:8080/#/Home?orderId=...' //
// ps：该地址需要添加到公众号的一个设置里面去，作为授权的目录
// 2.公众号ID：appid（ 配置公众号时的信息，可自行查看）
var appid = 'wxgongzhonghaopeizhi'
// 3.截取code
this.code = this.getUrlCode().code // 截取code
// 4.判断code的有无：
// 无 - 直接跳转微信授权网页，来获取微信授权后携带code的回调地址链接；有 - 直接调用后台接口传递给后台
if (this.code == null || this.code == '') {
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid +
"&redirect_uri=" + encodeURIComponent