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

背景：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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • php微信支付之公众号支付功能

    网上的很多PHP微信扫码支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后给出一个单文件版的,希望可以给各位想接入微信扫码支付的带来些许帮助和借鉴意义. 将该文件放到你的授权目录下,并在微信里访问这个文件,即可看到演示效果.效果如下:   需要注意的事项: 1.该文件需放到支付授权目录下,可以在微信支付商户平台->产品中心->开发配置中设置. 2.如提示签名错误可以通过微信支付签名验证工具进行验证:微信公众平台支付接口调试工具 代码如下: <?php header('Co

  • vue项目使用微信公众号支付总结及遇到的坑

    微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签

  • 微信支付PHP SDK之微信公众号支付代码详解

    微信支付PHP SDK之微信公众号支付代码详解

    这里假设你已经申请完微信支付 1. 微信后台配置  如图 我们先进行测试,所以先把测试授权目录和 测试白名单添加上.测试授权目录是你要发起微信请求的哪个文件所在的目录. 例如jsapi 发起请求一般是jsapi.php所在目录 为测试目录,测试白名单即开发人员的微信号. 正式的支付授权目录不能和测试的一样否则会报错.不填写或者填错授权目录以及测试白名单都会报错. 报错样例: NaNsystem:access_denied 不在测试白名单 2. 配置 lib/WxPay.Config.php文件

  • Java微信支付之公众号支付、扫码支付实例

    Java微信支付之公众号支付、扫码支付实例

    微信支付现在已经变得越来越流行了,随之也出现了很多以可以快速接入微信支付为噱头的产品,不过方便之余也使得我们做东西慢慢依赖第三方,丧失了独立思考的能力,这次打算分享下我之前开发过的微信支付. 一 .H5公众号支付 要点:正确获取openId以及统一下单接口,正确处理支付结果通知,正确配置支付授权目录 H5的支付方式是使用较为广泛的方式,这种支付方式主要用于微信内自定义菜单的网页,依赖手机上安装的微信客户端,高版本的微信才支持微信支付,下面按我的流程注意说明 1  编写用于支付的页面,由于是测试用

  • java开发微信公众号支付

    java开发微信公众号支付

    最近做了微信公众号支付的开发,由于是第一次做也摸索了几天的时间,也只是达到了实现功能的水平,并没有太多考虑到性能问题,所以这篇文章比较适合初学者. 微信公众号支付的总体其实很简单,大致就分为三步.第一步需要获取用户授权:第二步调用统一下单接口获取预支付id:第三步H5调起微信支付的内置的js.下面介绍具体每一步的开发流程. 一    首先要明确微信公众号支付属于网页版支付,所以相较于app的直接调取微信支付要多一步微信授权.也就是需要获取用户的openid.微信公众号使用的交易类型是JSAPI,

  • 微信公众号支付（MVC版本）

    一.获取微信支付 MCHID,KEY,APPID,APPSecret 四个支付关键值. 微信支付商户平台 https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F   1.登录微信支付商户平台获取到商户号(MCHID),   2.在"账号中心"栏目下"API安全"栏目里设置API密钥(KEY) 微信公众号: https://mp.weixin.qq.com/      1.登录微信公众在&q

  • java微信公众号支付开发之现金红包

    我们先来看看公众号发放现金红包的效果: 需要调用商户平台的接口,接口发放规则如下: 1.发送频率限制--默认1800/min 2.发送个数上限--按照默认1800/min算 3.金额上限--根据传入场景id不同默认上限不同,可以在商户平台产品设置进行设置和申请,最大不大于4999元/个 4.其他的"量"上的限制还有哪些?--用户当天的领取上限次数,默认是10 5.如果量上满足不了我们的需求,如何提高各个上限?--金额上限和用户当天领取次数上限可以在商户平台进行设置 注意-红包金额大于2

  • 微信支付PHP SDK —— 公众号支付代码详解

    微信支付PHP SDK —— 公众号支付代码详解

    在微信支付 开发者文档页面 下载最新的 php SDK http://mch.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 这里假设你已经申请完微信支付 1. 微信后台配置  如图 我们先进行测试,所以先把测试授权目录和 测试白名单添加上.测试授权目录是你要发起微信请求的哪个文件所在的目录. 例如jsapi 发起请求一般是jsapi.php所在目录 为测试目录,测试白名单即开发人员的微信号. 正式的支付授权目录不能和测试的一样否则会报错.不填

  • 微信公众号支付H5调用支付解析

    微信公众号支付H5调用支付解析

    最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付   需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/             那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.q

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

    背景: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} =

  • 详解nodejs微信公众号开发——3.封装消息响应模块

    上一篇文章:nodejs微信公众号开发(2)自动回复,实现了简单的关注回复.采用拼接字符串的形式,并不是很方便,这里我们将其封装承接口. 1. ejs模板引擎 不使用拼接字符串的方式,那么模板引擎就是较好的选择.Nodejs开源模板的选择很多,程序中使用 EJS,有Classic ASP/PHP/JSP的经验用起EJS来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对

  • 详解nodejs微信公众号开发——2.自动回复

    详解nodejs微信公众号开发——2.自动回复

    上一篇文章:nodejs微信公众号开发(1)接入微信公众号,本篇文章将在此基础上实现简单的回复功能. 1. 接入代码的优化 之前我们简单粗暴的实现了微信公众号的接入,接入的代码直接写在了app.js文件里面,从项目开发的角度而言,不便于日后代码的维护,所以将这部分代码独立出来,按照koa的风格,写成一个中间件. 在根目录下新建wechat文件夹,新建generator.js文件, var sha1 = require('sha1'); module.exports = function(opts

  • 详解nodejs微信公众号开发——6.自定义菜单

    上一篇文章:nodejs微信公众号开发--5.素材管理接口,我们实现了新增临时素材.管理永久素材的接口,这些接口的实现,使我们能够推送多样的消息给用户.本节介绍的内容是关于自定义菜单 1. 自定义菜单的介绍 自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的功能.关于自定义菜单需要掌握以下几点内容: 自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单. 一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以"..."代替. 创建自定义菜单后,由于微信客

  • 详解Vue微信公众号开发踩坑全记录

    详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

  • 详解nodejs微信公众号开发——4.自动回复各种消息

    详解nodejs微信公众号开发——4.自动回复各种消息

    上一篇文章:nodejs微信公众号开发--3.封装消息响应模块,实现了对消息接口的模块化处理,方便后期的使用,本篇文章将介绍微信公众号回复各种消息的功能实现,包括文本.图片.语音.视频.音乐.图文等. 注:感觉最近localtunnel很不稳定,测试起来比较麻烦,有条件的自己搞个云服务器吧,我比较偷懒,几继续使用localtunnel了. 1. 被动回复用户消息 当用户发送消息给公众号时(或某些特定的用户操作引发的事件推送时),会产生一个POST请求,开发者可以在响应包(Get)中返回特定XML

  • 详解nodejs微信公众号开发——1.接入微信公众号

    详解nodejs微信公众号开发——1.接入微信公众号

    接入微信公众号是开发的第一步,万事开头难,走好第一步,后面的路就更宽广. 1.公众平台测试帐号的使用 登录微信公众平台,由于很多开发人员并没有认证的的微信公众号,所以比较折中的方式是使用公众平台测试帐号来测试功能,其优势是能够测试微信公众号的绝大部分功能,不受认证门槛的限制. 进入测试账号管理界面: 我们需要配置接口的信息,URL和Token是微信公众平台和本地开发服务建立连接的桥梁. 微信配置好后,扫面下方的测试号二维码,即可以在手机上测试开发的功能. 2.验证公众号 一图胜千言.接入公众号时

  • 详解nodejs微信公众号开发——5.素材管理接口

    详解nodejs微信公众号开发——5.素材管理接口

    上一篇文章:nodejs微信公众号开发--4.自动回复各种消息,我们实现了被动回复文字和图文,回复图片失败,因为需要先获取通过素材管理接口上传多媒体文件而得到的MediaId,这一节们就来实现素材管理的接口.可参看:公众平台开发者文档 1. 新增临时素材 临时素材顾名思义是临时的,上传后一定时间就被清理掉,适用于一些有时效性的图文链接.关于临时素材需要注意的点: 对于临时素材,每个素材(media_id)会在开发者上传或粉丝发送到微信服务器3天后自动删除(所以用户发送给开发者的素材,若开发者需要

  • 微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解

    微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解

    本文实例讲述了PHP实现微信公众号支付功能.分享给大家供大家参考,具体如下: 直言无讳,我就是一个初涉微信开发的小白,写这篇博客的原因:一是为了给自己做下备忘记录,以便以后能回忆这条程序猿的坎坷路:二是希望能帮助到同是自学开发的小白们:三是对那些不屑一顾于我等尘埃的大牛们的控诉,小白的道路坎坷,你们凭什么总要一副高高在上的样子?我等敬而不畏... 背景介绍: 随着智能手机的普及,移动支付下的微信.支付宝所提供的便利需求不言而喻,好吧,至少我周围连个小摊贩的早餐都可以微信支付,而且人家手机还比我高

  • java微信公众号支付示例详解

    本文实例为大家分享了java微信公众号支付示例代码,供大家参考,具体内容如下 开始之前,先准备好:appid.商家号.商户密匙. 工具类: MD5Util.java package com.yiexpress.core.utils.wechat; import java.security.MessageDigest; /** * MD5工具类 */ public class MD5Util { public final static String MD5(String s) { char hex

随机推荐