前端在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现。通过实际经验自己总结了一下，前端在H5页面调起微信支付有两种办法，一是利用内置对象，二是通过引用微信的js sdk。亲测都能支付成功，从写法上来看用内置对象更简单一些。
第一种方法：利用内置对象
微信浏览器内置了一个名为`wx`的对象，这个对象提供了一系列的接口，包括支付功能。在H5页面中，我们可以直接使用这个对象来实现支付功能。下面是具体的步骤：
1. 引入微信支付JS文件
首先，我们需要在H5页面中引入微信支付的JS文件。这个文件通常是通过CDN方式引入的，例如：
```html
```
2. 配置微信支付参数
接下来，我们需要配置微信支付的参数，这包括订单号、金额、商品名称等。这些参数可以通过`wx.chooseWXPay()`方法传递给微信支付系统。
```javascriptvar orderNo = "1234567890";
var amount =10.99;
var goodsName = "测试商品";
// 配置微信支付参数var params = {
"nonceStr": wx.generateNonceStr(),
"timeStamp": Date.now(),
"package": "prepay_id=" + wx.getPrePayId(),
"signType": "MD5",
"paySign": wx.sign(params, "your_appid", "your_mch_id")
};
```
3. 调用微信支付接口
最后，我们需要调用`wx.chooseWXPay()`方法来触发微信支付功能。
```javascript// 调用微信支付接口wx.chooseWXPay({
"timestamp": params.timeStamp,
"nonceStr": params.nonceStr,
"package": params.package,
"signType": params.signType,
"paySign": params.paySign,
"success": function(res) {
console.log("支付成功！");
},
"cancel": function() {
console.log("支付取消！");
}
});
```
第二种方法：通过引用微信的js sdk
除了利用内置对象之外，我们还可以通过引用微信的JS SDK来实现支付功能。这个方法相比于第一种方法更灵活一些，可以在任何地方使用。
1. 引入微信JS SDK文件
首先，我们需要在H5页面中引入微信JS SDK文件。这个文件通常是通过CDN方式引入的，例如：
```html
```
2. 初始化微信JS SDK
接下来，我们需要初始化微信JS SDK，这包括设置appid、mch_id等参数。
```javascript// 初始化微信JS SDKvar wx = require("weixin-js-sdk");
wx.config({
"debug": true,
"appId": "your_appid",
"timestamp": Date.now(),
"nonceStr": wx.generateNonceStr(),
"signature": wx.sign({
"timestamp": Date.now(),
"nonceStr": wx.generateNonceStr()
}, "your_appid", "your_mch_id")
});
```
3. 调用微信支付接口
最后，我们需要调用`wx.chooseWXPay()`方法来触发微信支付功能。
```javascript// 调用微信支付接口wx.chooseWXPay({
"timestamp": Date.now(),
"nonceStr": wx.generateNonceStr(),
"package": "prepay_id=" + wx.getPrePayId(),
"signType": "MD5",
"paySign": wx.sign({
"timestamp": Date.now(),
"nonceStr": wx.generateNonceStr()
}, "your_appid", "your_mch_id")
}, function(res) {
console.log("支付成功！");
});
```
通过以上两种方法，我们可以在H5页面中实现微信支付功能。
