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--微信支付的更多相关文章

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

    前后端分离项目实现微信支付的流程: 1:用户点击支付 2:请求服务端获取支付参数 3:客户端通过JS调起微信支付(微信打开的网页) * 本文主要解决的是第3步,视为前两步已经完成,能正确拿到支付参数, ...

  2. VUE 进行微信支付,解决 微信支付URL未注册

    使用history方式 比较坑吧就不吐槽了,说下实现方式 需要解决问题: 1.因为我的微信支付授权路由是:m.xxxx.com,this.$router.push('xxx')之后经常出现 [微信支付 ...

  3. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  4. vue微信公众号、H5微信支付

    1.H5微信支付 后台会返回一个URL,前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下) 使用window.location.href =res.data;进行页面跳转到支付界面(r ...

  5. 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP)

    wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述 公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...

  6. vue,一路走来(6)--微信支付

    微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面 ...

  7. 微信支付完成 vue 页面不跳转问题

    遇到的问题是 vue 调用微信支付 回调成功以后,页面路由不跳转. 解决的办法是用window.location.href /** * @method 支付费用方法 * @param data:后台返 ...

  8. 在vue中获取微信支付code及code被占用问题的解决?

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...

  9. Vue — 微信公众号内置h5支付相关

    首先,在公众号后台配置h5页面地址 开发流程 1.通过配置h5地址,获取code.再通过code,获取openid getOpenid(){ let url = 'https://open.weixi ...

  10. vue 调用微信支付方法

    pay(){ let data ={ order_id:this.order_id, wechatpay_type:this.wechatpay_type, merchant_id:localStor ...

随机推荐

  1. 更换django自带的下载链接

    class Case(models.Model): file_type = MyFileField(verbose_name='file_obj', max_length=256, blank=Tru ...

  2. OpenStack 的单元测试

    目录 文章目录 目录 前言 单元测试能提高生产率 Python 单元测试工具清单 unittest Test Discover Test Fixture Test Suite Assert(断言) m ...

  3. 《Neural Networks and Deep Learning》课程笔记

    Lesson 1 Neural Network and Deep Learning 这篇文章其实是 Coursera 上吴恩达老师的深度学习专业课程的第一门课程的课程笔记. 参考了其他人的笔记继续归纳 ...

  4. Golang中基础的命令行模块urfave/cli

    前言相信只要部署过线上服务,都知道启动参数一定是必不可少的,当你在不同的网络.硬件.软件环境下去启动一个服务的时候,总会有一些启动参数是不确定的,这时候就需要通过命令行模块去解析这些参数,urfave ...

  5. CTF—攻防练习之HTTP—目录遍历

    主机:192.168.32.152 靶机:192.168.32.163 目录遍历攻击又称(目录爬升,目录回溯,点-点斜线),指再访问存储在web根文件之夹外的文件和目录,通过操控带有"点-斜 ...

  6. IntelliJ IDEA 2018.2激活

    IntelliJ IDEA 2018.2激活 下载补丁 下载补丁JetbrainsIdesCrack-4.2.jar 下载链接 修改文件 将文件JetbrainsIdesCrack-4.2.jar放在 ...

  7. 对JavaScript事件处理程序/事件监听器的设定的简单介绍

    下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...

  8. 使用URLOS 五分钟安装rTorrent (轻量级优秀BT/PT客户端)

    rTorrent是一个非常简洁.优秀.非常轻量的BT客户端,它使用ncurses库以C++编写,将 rTorrent 用在安装有 GNU Screen 和 Secure Shell 的低端系统上作为远 ...

  9. staticmethod自己定制

    class StaticMethod: def __init__(self,func): self.func=func def __get__(self, instance, owner): #类来调 ...

  10. s7-200日常使用烂笔头

    这篇文章只是记录我的苦逼自控之路,有些是书上的,有些是自己发现的,不记载网上得出来的一些东西.只为强化记忆以及便于翻阅. 1.今天使用PC\PPI cable线缆连接成功了200,这个线是盗版线,之前 ...