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

标签(空格分隔): 微信 支付 坑 vue


场景

在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付。

基本知识

1.依据微信jssdk官方文档,使用微信功能的页面,必须进行微信 config,并在wx ready 之后再调用微信功能。

2.进行微信支付的话,需要在微信开放平台配置微信支付合法路径。该合法路径有层级限制,比如需要支付的页面的url为 https://example.com/redpacket/:problemid 的话,配置的合法路径需为 https://example.com/redpacket/。即允许最后一级是可变的参数。

状况

通过 https://example.com/lesson/:lessonid 进入的 vue 根页面,之后点击某个链接进入了需要进行微信支付的 vue 子页面 https://example.com/lesson/redpacket/:redpacketid

支付路径不合法

坑1 苹果 vs 安卓

{
path: '/redpacket/:redpacketid',
name: 'redpacket',
component: Redpacket
},

微信确认支付合法路径的时候,ios 取 Landing Page, Android 取 Current Page。即 ios 认为合法路径的配置应该是 https://example.com/lesson/,而 Android 认为合法路径的配置应该是 https://example.com/lesson/redpacket/。 导致微信支付合法url认定不一致的问题。一种解决办法是就在微信开放平台设置两个合法路径,但是由于可配置合法路径只能最多5个,所以一个功能使用2个名额比较浪费。

参考上面链接中的介绍,微信会把 ? 后面的全给忽略掉,所以多长都不会占用路径层级了,所以尝试了把 path 改为

{
path: '/redpacket?/:redpacketid',
name: 'redpacket',
component: Redpacket
},

的方式,苹果和大部分安卓手机都没有问题了,但是发现华为 p9 p10依然有80%的几率失败。

所以为了苹果,必须把支付功能页面和根页面改为是同一层url:

{
path: '/redpacketqueryproblemid', // 参数改为通过query的方式获取
name: 'redpacket',
component: Redpacket
},

这样,只用配置一个合法路径就可以了: https://example.com/lesson/

坑2

根据微信官方文档介绍

6.确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

我在根页面进行了 wx.config() 操作(因为需要调用jssdk禁用微信分享),在进入发红包页面的时候,又进行了 wx.config() 操作(因为需要调用jssdk微信支付)。但是在删掉在进入发红包页面的时候的 wx.config() 之后,发现 华为 p9 p10 不再发生支付失败,所有设备页都正常。所以不知道是官方文档写错了,还是我们又误解。总之,坑2 为 不能按照官方文档说的做,url变化了不要再次config

vue 单页应用中微信支付的坑的更多相关文章

  1. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  2. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  3. vue单页应用中根据不同城市不同业务添加百度统计代码

    问题描述: 我们知道一般的百度统计代码是添加在html的head里的:但是,因为目前项目是用vue开发的单页应用,所以在路由跳转之间不会刷新页面, 统计代码如果放在项目里的index.heml的hea ...

  4. vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。

    使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...

  5. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  6. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  7. 基于vue单页应用的例子

    代码地址如下:http://www.demodashi.com/demo/13374.html 目录结构 src目录 主要的代码目录 components 存放项目组件 router 路由文件 sto ...

  8. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  9. VueJs单页应用实现微信网页授权及微信分享功能

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...

随机推荐

  1. 获取url路径的正则

    package unit; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Util { // ...

  2. 关于XML的验证(DTD与XSD)一点实践

    [转自] http://blog.chinaunix.net/uid-276853-id-366491.html 关于XML的验证一点实践 1)此方法是在XML文档中绑定对应的DTD文件来进行的 // ...

  3. linux 工具(1)------终端提示符配置

    Linux环境变量,PS1用于设置终端的提示符. 设置规则 设置方法 设置规则 \d :代表日期,格式为 Weekday Month Date,例如 "Mon Aug 1" \H ...

  4. BankNote

    # coding=utf-8 import pandas as pd import numpy as np from sklearn import cross_validation import te ...

  5. display inline-block 间隔

    1.如果li横排用display:inline-block; 则li之间不能有间隔 必须连着一起,所以才一般用float:left; .today-wrap{ position: relative; ...

  6. PIE SDK打开长时间序列数据

    1. 功能简介 时间序列数据(time series data)是在不同时间上收集到的数据,这类数据是按时间顺序收集到的,用于所描述现象随时间变化的情况.当前随着遥感卫星技术日新月异的发展,遥感卫星的 ...

  7. 2019.03.27 读书笔记 关于GC垃圾回收

    在介绍GC前,有必要对.net中CLR管理内存区域做简要介绍: 1. 堆栈:用于分配值类型实例.堆栈主要操作系统管理,而不受垃圾收集器的控制,当值类型实例所在方法结束时,其存储单位自动释放.栈的执行效 ...

  8. document.write与document.getElementById.innterHTML的区别

    <html> <head> <meta charset="utf-8"> <script> var tmp = "< ...

  9. mysql用户操作

    一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...

  10. C# Uploadify 文件上传组件的使用

    一.页面的构建 1.要引用的JS和CSS <link href="../css/jquery-ui.css" rel="stylesheet" type= ...