一行代码实现Vue微信支付,无需引用wexin-sdk库,前后端分离HTML微信支付,无需引用任何库

前后端分离项目实现微信支付的流程:

1:用户点击支付

2:请求服务端获取支付参数

3:客户端通过JS调起微信支付(微信打开的网页)

 

* 本文主要解决的是第3步,视为前两步已经完成,能正确拿到支付参数,示例参数如下 :

 

      "appId":"wx2421b1c4370ec43b",     //公众号名称,由商户传入     
         "timeStamp":"1395712654",         //时间戳,自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式:     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 

 

有了这些参数,就好办了,我们知道,网页如果是通过微信打开的会获得一个全局JS对象:WeixinJSBridge,我们可以判断如果这个对象不为空,就可以调用其方法发起微信支付,代码如下 :

 

复制代码
 if (typeof WeixinJSBridge == "undefined") {
                    alert("请使用微信浏览器打开")
                } else {
                    WeixinJSBridge.invoke('getBrandWCPayRequest', data, (res) => {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            alert("支付成功");
                        } else {
                            //这里支付失败和支付取消统一处理
                            alert("支付取消");
                        }
                    })
                }
复制代码

 

以上代码写在获取支付参数回调中,其中data=回调参数

 

可以发现,实际上我们只需要调用:  

 

WeixinJSBridge.invoke('getBrandWCPayRequest',data)

 

即可实现发起微信支付




posted @   yzeng  阅读(1688)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示