详解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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
js实现车辆管理系统
Aug 26 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python的slice notation的特殊用法详解
2019/12/27 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
户外活动总结范文
2014/04/30 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
销售人员工作自我评价
2014/09/21 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
Nginx进程调度问题详解
2021/09/25 Servers