详解nuxt 微信公众号支付遇到的问题与解决


Posted in Javascript onAugust 26, 2019

背景:nuxt为默认的history模式,用这个npm 支付weixin-js-sdk,开启debug模式,尽量在ios下调试,因为alert弹窗的信息会更多。

async onPay (config) {
 try {
 const wxUrl = window.location.href//分享的路径
 const res = await $axios.$get("")//获取配置sdk参数,包括微信分享的参数
 if (res.status === 0) {
  const {data} = res
  wx.config({
  debug: true,
  appId: data.appId,
  timestamp: data.timestamp,
  nonceStr: data.nonceStr,
  signature: data.signature,
  jsApiList: ['chooseWXPay']
  })

  wx.ready(function () {
  wx.checkJsApi({
   jsApiList: ['chooseWXPay'],
   success: (res) => {
   wx.chooseWXPay({
    timestamp: config.timestamp,
    nonceStr: config.nonceStr, 
    package: config.package, 
    signType: config.signType, 
    paySign: config.paySign, // 支付签名
    success: function (res) {
    },
    cancel: function (res) {
    // 支付取消的回调函数
    },
    error: function (res) {
    // 支付失败的回调函数
    }
   })
   }
  })

  })

 }
 } catch (e) {
 throw e
 }
}

1、微信调起支付loading又立刻关闭,并提示:当前页面的url未注册:https://xxx/xx/xx/

补充:由于支付路径太深,ios下,提示支付路径未注册出现了各种情况。甚至出现只有我一个人可以调起支付,其他人测试都不行的情况。

原因:这是因为微信获取支付路径的时候,在ios与安卓下是不同的,对于spa应用来说,首先我们把我们从微信别的地方点击链接呼出微信浏览器时所落在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面,我们叫做落地页。问题来了,在ios和安卓下呼出微信支付的时候,微信支付判断当前路径ios为落地页,安卓则为正常的当前页面的路径。

解决支付路径app不统一:用window.location.href 的方式跳转至支付页

微信获取支付路径的方式:以url最后一个/为准,获取/之前的路径。

支付路径例子:例如我们后台配置的支付的路径为

https://域名/项目名/(可能有多级目录)/pay/

那么就会匹配

https://域名/项目名/(可能有多级目录)/pay/?xxxxxxxxxxxxxxxxxx

注意pay支付路径后的/一定要加。因为我们做路由跳转很可能是这种形式

https://域名/项目名/(可能有多级目录)/pay?xxxxxxxxxxxxxxxxxx //错误,'?'前没有'/',会匹配不到正确的路径。

2、微信调起支付loading又直接关闭,提示,订单已过期。

解决:这个是服务器那边的问题,后端直接设置了固定的订单时间以跳过支付环节。

3、sdk中wx.config中的参数。

事实上,我们并不需要额外的请求wx.config的参数,因为支付接口返回的支付参数已经有了所有的config参数,除了signature这个加密签名字段,在支付参数中对应的加密签名是paysign这个字段,事实上直接用paysign作为signature的值也是没有问题的。wx.config的参数差别是分享的时候。需要额外的分享的路径url

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JSONP原理及简单实现
Jun 08 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 #Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 #Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 #Javascript
You might like
PHP实现下载功能的代码
2012/09/29 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php使用google地图应用实例
2014/12/31 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
Angularjs 基础入门
2014/12/26 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
Python使用剪切板的方法
2017/06/06 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python通过链接抓取网站详解
2019/11/20 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python实现超级玛丽游戏
2020/03/18 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
高级销售求职信
2014/02/21 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL