最近我们接到一个新需求，需要在公众号引入微信支付。此前微信支付方式主要有当面支付和H5支付。微信支付存在两个弊端：

首先支付最终会生成一个微信链接，格式为：://xxx，我们可以通过微信直接访问该链接，并成功打开支付界面，但是在支付的时候会报错：当前交易不支持点击消息链接发起。

第二：将支付链接转换成二维码，方便扫描支付。第二个弊端就出现了，当我将图片保存到本地，通过微信扫描本地二维码时，再次出现错误提示：不支持从相册中选择二维码。

H5支付的缺点是什么？H5支付正常情况下是在外部浏览器上使用，会直接从外部浏览器跳转到微信完成支付。在H5项目中，我们一直正常使用H5微信支付。当收到公众号的付款时，第一反应就是直接使用H5支付，这样用户打开浏览器就可以使用微信支付了。然而，当我们接入支付的时候，我们发现了H5支付的缺点：H5支付只能在外部浏览器使用，微信支付不能在微信中使用。所以此时最适合的支付方式就是支付宝支付。

由于我从未参与过公众号开发，所以我的第一反应当然是看支付文档：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

直接按照文档进行开发吧，首先去微信商户平台设置支付目录：

公众号需要设置授权域名：

接下来我们看一下支付流程：

服务端其实就是创建订单然后调用统一订单接口，这里我们看统一订单接口文档：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

文档中有一个参数，这个参数的解释是：当=（即支付）时，必须传递这个参数，这个参数是商户对应的微信用户唯一标识。

因此我们可以理清一下整体的逻辑：

1.前端跳转授权界面，用户授权成功获取到code后调接口换取用户openid。2.服务端保存用户预支付订单。3.服务端调用统一下单接口，然后将参数返回给客户端。4.客户端调起支付，支付成功执行支付回调。

前端跳转到授权界面，我们可以看一下跳转的参数要求：

这里需要注意的是参数，如果用户授权成功就会跳转到，后面会拼接code参数，一定是我们刚刚设置的公众号授权域名下的地址，需要传递。

点击授权后，调用接口为用户交换code，贴出关键代码：

通过这个接口，我们可以成功获取到用户的信息，我们可以进行如下测试：

可以看到已经成功获取用户了，接下来我们为该用户创建预付费订单，下面是关键代码：

商品数据保存成功，调用统一订购接口，获取统一订购接口返回的参数信息：

我们可以打印返回的参数信息：

剩下的就只有客户端发起支付了，我们来看微信H5发起支付的文档：

首先根据签名加密规则对参数进行加密，生成签名，加密算法规则如下：

首先实现签名生成算法：

当用户点击微信支付按钮时，调用服务端接口创建预付款订单，并返回统一的订单接口参数给客户端：

然后客户端调用支付，内置对象只会在微信浏览器里生效，所以在其他浏览器打开会报错。贴出关键代码：

我们可以测试一下是否可以调用支付接口：

当我们完成支付的时候微信服务器会异步执行我们统一下单接口中设置的回调方法，回调方法需要特别注意的是微信回调返回给微信端的格式是XML格式的：

当支付完成后微信会返回est:ok给客户端，客户端支付完成后可以直接跳转到指定界面，在这里成功完成支付：