H5网站开发微信小程序支付的解决方案（web-view）

H5网站开发微信小程序支付，是在已有的H5网站上，增加微信小程序支付功能，很多企业在开发微信小程序之前已经有了现成的H5网站，只要通过微信小程序的web-view组件，就可以快速的制作出微信小程序，不需要另外再开发，可以为企业节约成本和精力。怎么样通过web-view组件制作小程序这里就不作介绍了，下面只介绍H5网站开发微信小程序支付的功能，因为H5网站上原来的微信支付功能在小程序里不能用，需要单独开发。

H5网站开发微信小程序支付之前要进行微信小程序支付的申请、认证和绑定商户号，完成这些步骤后才能进行接下来的程序开发。

1、创建微信小程序部分wmpay

通过小程序的wx.requestPayment方法来调起支付，下面是 wmpay.ts 的具体代码

wx.requestPayment({

    timeStamp: payData.timeStamp,

    nonceStr: payData.nonceStr,

    package: payData.package,

    signType: payData.signType,

    paySign: payData.paySign,

   success: function (res) {

     // 支付成功回调函数

   },

   fail: function (res) {

     // 支付失败回调函数

   }

})

2、前端H5支付页面跳转到微信小程序的支付页面

wmpay.html的具体代码如下

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

<script>

function callpay() {

 wx.miniProgram.navigateTo({

 url: "/pages/wmpay"

 });

}

</script>

完成以上几个步骤就可以正常发起支付了。