vue--微信支付
1、当前页面没有注册:
需要登录微信支付商家后台,添加支付路径授权
2、安装 weixin-js-sdk 微信SDK npm install weixin-js-sdk --save
3、引入 import wx from 'weixin-js-sdk';
4、在 created()中 执行一个函数获取APPID等参数进行微信授权
fetchGetsignpackageAction(){
let param = {};
param.url = window.location.href;
fetchGetsignpackage(param).then((res) => {
let resData = res.data;
if (resData.respHeader.resultCode === 0) {
const Data = resData.respBody;
wx.config({
debug: false,
appId: Data.appId,
timestamp: Data.timestamp,
nonceStr: Data.nonceStr,
signature: Data.signature,
jsApiList: [
'checkJsApi',
'onMenuShareAppMessage',
'onMenuShareTimeline',
'updateAppMessageShareData',
'updateTimelineShareData',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'getNetworkType',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay'
]
});
}else{
Toast({
message: retData.respHeader.message || "网络异常",
});
}
})
fetchGetsignpackage() axios请求返回的参数如下:

5、点击支付调起微信支付执行的方法:
okFryWxPayHandler(){
let reqBody = {};
reqBody.orderId = this.orderId;
reqBody.payType = this.payType;
reqBody.openId = Cookies.get("openId");
fetchOrderPayMsg(reqBody).then((res) => {
let resData = res.data;
if(resData.respHeader.resultCode == 0){
let msg = JSON.parse(resData.respBody);
let _this = this;
wx.chooseWXPay({
"timestamp": msg["timestamp"], // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
"nonceStr": msg["nonceStr"], // 支付签名随机串,不长于 32 位
"package": msg["package"], // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
"signType": msg["signType"], // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
"paySign": msg["paySign"], // 支付签名
success: function (res) {
// 支付成功后的回调函数
// alert(res);
_this.submitActive = true;
_this.$router.push({path: '/busi/paySuccess',query: {price: _this.totalPrice}});
},
cancel: function () {
_this.submitActive = true;
}
});
}else{
this.submitActive = false;
Toast({
message: resData.respHeader.message,
});
}
});
}
nuxt中 由于路径问题,微信支付没办法成功。。。。
vue--微信支付的更多相关文章
- 一行代码实现Vue微信支付,无需引用wexin-sdk库,前后端分离HTML微信支付,无需引用任何库
前后端分离项目实现微信支付的流程: 1:用户点击支付 2:请求服务端获取支付参数 3:客户端通过JS调起微信支付(微信打开的网页) * 本文主要解决的是第3步,视为前两步已经完成,能正确拿到支付参数, ...
- VUE 进行微信支付,解决 微信支付URL未注册
使用history方式 比较坑吧就不吐槽了,说下实现方式 需要解决问题: 1.因为我的微信支付授权路由是:m.xxxx.com,this.$router.push('xxx')之后经常出现 [微信支付 ...
- vue 单页应用中微信支付的坑
vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...
- vue微信公众号、H5微信支付
1.H5微信支付 后台会返回一个URL,前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下) 使用window.location.href =res.data;进行页面跳转到支付界面(r ...
- 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP)
wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述 公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...
- vue,一路走来(6)--微信支付
微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面 ...
- 微信支付完成 vue 页面不跳转问题
遇到的问题是 vue 调用微信支付 回调成功以后,页面路由不跳转. 解决的办法是用window.location.href /** * @method 支付费用方法 * @param data:后台返 ...
- 在vue中获取微信支付code及code被占用问题的解决?
这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...
- Vue — 微信公众号内置h5支付相关
首先,在公众号后台配置h5页面地址 开发流程 1.通过配置h5地址,获取code.再通过code,获取openid getOpenid(){ let url = 'https://open.weixi ...
- vue 调用微信支付方法
pay(){ let data ={ order_id:this.order_id, wechatpay_type:this.wechatpay_type, merchant_id:localStor ...
随机推荐
- koa 基础(十二)koa-static 静态资源中间件 静态web服务
1.目录 2.app.js /** * koa-static 静态资源中间件 静态web服务 * 1.npm install --save koa-static * 2.const static = ...
- 一个继承的 DataGridView
// 允许增加一个 checkbox 列 public class DgvBase : DataGridViewX { protected override void OnColumnAdded(Da ...
- [redis]redis实现分页的方法
每个主题下的用户的评论组装好写入Redis中,每个主题会有一个topicId,每一条评论会和topicId关联起来,大致的数据模型如下:{ topicId: 'xxxxxxxx', comments: ...
- 在Linux上安装Python3.7.1
一.安装依赖环境 输入命令:yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readlin ...
- apicloud 顶部状态栏透明方法
api.setStatusBarStyle({ style: 'dark', color:'transparent' });
- kvm热迁移(4)
一.迁移简介 迁移分为热迁移和冷迁移,冷迁移是在机器关机的状态下进行迁移,具体操作在之前的博客有体现.热迁移是在机器处于开机状态进行迁移,本次博客主要讲解热迁移. 系统的迁移是指把源主机上的操作系统和 ...
- npm scripts
参考资料1:[https://docs.npmjs.com/misc/scripts] 参考资料2:[http://www.ruanyifeng.com/blog/2016/10/npm_script ...
- golang 多级json转map
func main() { jsonStr := `{"isSchemaConforming":true,"schemaVersion":0,"unk ...
- Day05:集合操作——线性表(二) / 查找表 / 文件操作——File(一)
文件操作:https://www.cnblogs.com/wsnb8/p/11403626.html
- 2019年icpc区域赛银川站总结
目录 一.前言 二.10月19日热身赛 三.10月20日正式赛 四.结果 一.前言 比赛前我们队有ccpc厦门和icpc银川的名额,然而这两个地区的时间正好撞了,考虑到银川更容易拿奖,加上我们ACM协 ...