h5支付通道_微信 h5 支付实例「建议收藏」

1.先安装微信sdk

npm install weixin-js-sdk

2.使用的页面引入sdk插件

import wx from 'weixin-js-sdk'

3.调用微信支付

this.$http('http://localhost:8080', {
    "price_id": this.goodsID
},'post').then(res => {
// 公众号环境    
    wx.config({
        debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
        appId: res.appId, // 必填，公众号的唯一标识
        timestamp: res.timeStamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.paySign, // 必填，签名
        jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
    });
    wx.ready(() => {
        wx.checkJsApi({
            jsApiList: ["chooseWXPay"],
            success: function(res) {
                console.log("sccess");
            },
            fail: function(res) {
                console.log(res);
            }
        });
        wx.chooseWXPay({
            timestamp: res.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
            package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需u传入'MD5'
            paySign: res.paySign, // 支付签名
            success: function(res) {
                uni.showToast({
                    title: "购买成功!"
                })
                _this.closeModel()
            },
            fail: function(res) {}
        });
    });
})

备注：在微信开发者工具网页版调用支付无法支付，需在手机上测试

以上内容希望对你有所帮助

详细内容请查看微信sdk了解

今天的文章h5支付通道_微信 h5 支付实例「建议收藏」分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。