一行代码实现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)
即可实现发起微信支付
一行代码实现Vue微信支付,无需引用wexin-sdk库,前后端分离HTML微信支付,无需引用任何库的更多相关文章
- Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- vue 项目中使用mock假数据实现前后端分离
也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
- Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...
- .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架
框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史
---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
随机推荐
- SWLU:主核性能采样、调试工具包
http://bbs.nsccwx.cn/topic/262/swlu-主核性能采样-调试工具包
- Comparison and difference for Default geodatabase,Current workspace,Scratch workspace,Home Folder
Comparison and difference for Default geodatabase,Current workspace,Scratch workspace,Home Folder 商务 ...
- AndoridSQLite数据库开发基础教程(6)
AndoridSQLite数据库开发基础教程(6) 为数据库添加添加空表 如果开发者想要往数据库中添加表和列,操作步骤如下: (1)在打开的数据库中,单击左下方的“+”按钮,弹出Table Edito ...
- 【转载】 我的Machine Learning学习之路
原文地址: https://www.cnblogs.com/steven-yang/p/5857964.html ------------------------------------------- ...
- Java中使用Socket连接判断Inputstream结束,java tcp socket服务端,python tcp socket客户端
最近在试着用java写一个socket的服务器,用python写一个socket的客户端来完成二者之间的通信,但是发现存在一个问题,服务器方面就卡在读取inputsream的地方不动了,导致后面的代码 ...
- 123457123456#0#----com.DoraGame.ErTongFanPai97--前拼后广--记忆翻牌-doraX
com.DoraGame.ErTongFanPai97--前拼后广--记忆翻牌-doraX
- PRECONDITION_FAILED - inequivalent arg 'type' for exchange 'exchange' in vhost '/': received 'direct
最近在搞rabbitmq,把解决问题方法记下 问题1:PRECONDITION_FAILED - inequivalent arg 'type' for exchange 'exchange' in ...
- 05点睛Spring MVC 4.1-服务器端推送
转发:https://www.iteye.com/blog/wiselyman-2214626 5.1 服务器端推送 SSE(server send event)是一种服务器端向浏览器推送消息的技术, ...
- 【GStreamer开发】GStreamer播放教程04——既看式流
目的 在<GStreamer基础教程--流>里面我们展示了如何在较差的网络条件下使用缓冲这个机制来提升用户体验.本教程在<GStreamer基础教程--流>的基础上在扩展了一下 ...
- Appium移动自动化测试-----(二)安装 Android SDK
安装Android SDK Android SDK(Software Development Kit,软件开发工具包)提供了 Android API 库和开发工具构建,测试和调试应用程序.简单来讲,A ...