如何接入微信支付

image.png
官方微信支付地址

因为之前没怎么接触到微信这一块，所以最近公司有说要接入微信支付这一块。我也就来熟悉熟悉。
首先作为一个开发者，商户什么的你肯定不是，想要成为商户，是需要提交相关资料进行审核。所以这边开发的话是需要指定的商户提供对应的AppID给你，你才能进行开发和接入。

image.png

接入方式：

官方接入查看地址

image.png
上图是官方提供的6种微信支付的接入方式，每种都会有不同的接入方式，下面针对需要的几种方式进行介绍。

还有一种方式是H5嵌套到小程序中去调用微信支付，这种方式会在下面跟大家介绍，主要是通过一个小程序的中间页面进行调用支付和回调

🌊线下场景：🌊
这个其实不用过多介绍，主要是通过商家出示收款码或者让用户扫二维码，进行付款，之所以是线下，意思就是不管你程序员啥事了，所以跳过～～

🌊公众号：🌊

image.png
这种方式的意思就是，你打开的页面必须是在微信的浏览器内打开的，通过引入微信的 JS-SDK 可实现微信支付的方法调用，毕竟是公众号，页面肯定是微信的。
开发文档地址

🌊PC网站：🌊

image.png
这里的PC网站接入主要是生成二维码方式，需要用户手动扫一扫才能进行付款。两种支付方式，一种是让用户自己输入金额，一种是直接让用户付款多少金额。其实二维码这些都是后端生成给前端的，到时候前端只需要处理下用户支付结果就可以了。

🌊小程序：🌊

image.png
开发文档地址
既然是微信小程序自家的东西，肯定不用再引入其他东西了，直接用小程序提供的云开发功能，具体使用方法，可以参考上面的开发文档地址。

🌊H5通过唤醒微信调用支付：🌊
官方文档地址：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_2
微信官方体验链接：https://wxpay.wxutil.com/mch/pay/h5.v2.php，请在微信外浏览器打开。
当然，官方也给出了建议，在app内的话尽量使用app的调用方法，而且要在微信外浏览器打开，具体怎么实现要看项目需求

🌊小程序嵌套H5：🌊
因为通过分析，我们公司目前要实现的就是这种方式，希望能在我H5页面可以直接进行微信支付。

前面有提到PC网站接入支付，H5项目其实也就是属于网站，微信提供的也就2种实现方式，就是扫描二维码，我司虽然没说要用哪种方式，但是我感觉肯定不是这种。
～～肯定不会让用户扫码的😂

我简单的说下实现原理，具体的大家可参考文章 小程序webview内网页实现微信支付 。

1.小程序里嵌套的H5页面，发起支付 (携带相关订单号和金额等信息)

这里的嵌套指的是 web-view 内 src 页面地址路径

2.跳转到小程序的支付页面，调用小程序内的微信支付

估计你会问怎么跳到小程序页面的？

因为之前的H5页面是嵌套在小程序里面的，在对应H5项目里只要引用了微信的js-sdk，就可以通过 wx.miniProgram.navigateTo的方式 跳转到小程序页面

image.png

3.支付完成重新跳回H5页面，H5页面根据小程序返回的URL参数，来处理用户是否支付成功等状态

估计你会问怎么跳回去的？
通过 wx.navigateTo ，重新跳转回去就行了。?后面是你想要拼接的参数
../webview/webview是你嵌套的H5页面文件路径
payOk 为支付状态

   wx.navigateTo({
          url: '../webview/webview?payOk=true',
        })

总结：

H5:1个页面(主要用于支付的发起和结果的接收)；
小程序：2个页面(一个专门嵌套H5的页面，一个用来调用支付的页面)