这两天遇到一个需求就是开发微信公众号H5界面，需要点击支付按钮拉起微信进行支付。我自己觉得H5和小程序的支付流程还是有些不一样的，比如微信小程序就可以直接通过uni.login这个方法获取用户code，但这个方法在H5环境下就不行。

但要进行支付，用户的code又是必须拿到的，只有拿到了code才能向后端传递再拿到openid再拉起支付。大概试了半天，又翻了文档，最后采用的是如下的方法。

详细的解释和代码步骤我都注释在下面的代码中的，请君一阅。

至于微信公众号配置方面，大家可以去查阅相关的文档。

【注：仅作自己查看和分享学习之用】

1、order_detail.vue      订单详情界面

点击去支付按钮根据自己的需求携带参数进入支付界面。

2、pay.vue   新建一个界面作为支付界面

示例图如下：

然后代码主要采用的是通过微信授权链接地址拼接的方式来获取code，从而拿到openid，最后采用JSAPI方式调用微信支付。

关于JSAPI调用微信支付的文档，可以看这里：JSAPI调起支付 - JSAPI支付 | 微信支付商户文档中心

最后的成果图就是这样：