vue 单页应用中微信支付的坑
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 单页应用中微信支付的坑的更多相关文章
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事
实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...
- vue单页应用中根据不同城市不同业务添加百度统计代码
问题描述: 我们知道一般的百度统计代码是添加在html的head里的:但是,因为目前项目是用vue开发的单页应用,所以在路由跳转之间不会刷新页面, 统计代码如果放在项目里的index.heml的hea ...
- vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。
使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- 基于vue单页应用的例子
代码地址如下:http://www.demodashi.com/demo/13374.html 目录结构 src目录 主要的代码目录 components 存放项目组件 router 路由文件 sto ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- VueJs单页应用实现微信网页授权及微信分享功能
在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...
随机推荐
- 获取url路径的正则
package unit; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Util { // ...
- 关于XML的验证(DTD与XSD)一点实践
[转自] http://blog.chinaunix.net/uid-276853-id-366491.html 关于XML的验证一点实践 1)此方法是在XML文档中绑定对应的DTD文件来进行的 // ...
- linux 工具(1)------终端提示符配置
Linux环境变量,PS1用于设置终端的提示符. 设置规则 设置方法 设置规则 \d :代表日期,格式为 Weekday Month Date,例如 "Mon Aug 1" \H ...
- BankNote
# coding=utf-8 import pandas as pd import numpy as np from sklearn import cross_validation import te ...
- display inline-block 间隔
1.如果li横排用display:inline-block; 则li之间不能有间隔 必须连着一起,所以才一般用float:left; .today-wrap{ position: relative; ...
- PIE SDK打开长时间序列数据
1. 功能简介 时间序列数据(time series data)是在不同时间上收集到的数据,这类数据是按时间顺序收集到的,用于所描述现象随时间变化的情况.当前随着遥感卫星技术日新月异的发展,遥感卫星的 ...
- 2019.03.27 读书笔记 关于GC垃圾回收
在介绍GC前,有必要对.net中CLR管理内存区域做简要介绍: 1. 堆栈:用于分配值类型实例.堆栈主要操作系统管理,而不受垃圾收集器的控制,当值类型实例所在方法结束时,其存储单位自动释放.栈的执行效 ...
- document.write与document.getElementById.innterHTML的区别
<html> <head> <meta charset="utf-8"> <script> var tmp = "< ...
- mysql用户操作
一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...
- C# Uploadify 文件上传组件的使用
一.页面的构建 1.要引用的JS和CSS <link href="../css/jquery-ui.css" rel="stylesheet" type= ...