vue+微信支付目录+JSSDK签名解决方案

Little_XM 发布于2019-06-28 14:35 / 748人阅读

摘要：主要是用，每当用户第一次进来时，去获取一次签名验证。注意只获取一次，这样签名就解决了。

vue+微信支付目录+JSSDK签名解决方案 遇坑如下

注意：此方法仅为个人总结，并非唯一解决方案

微信JSSDK签名出错

微信支付调起支付缺少API参数

微信支付目录配置，只有5个配置，可能超过5个地方有配置，路由规划

微信授权回调处理

我所使用的技术

vue路由模式 history 模式，有两点好处

history路由模式好看

history模式下可以保持页面后退时，上一个页面的滚动条位置

微信JSSDK，图片上传，地理位置获取，微信支付等功能

UI框架，采用vux

相应的处理方法（作为一个非专业的前端，只能苦苦研究了) 微信JSSDK签名出错

微信官方说明如下

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）

由此可知，对于vue等SPA应用，Android和IOS 要做不同的处理了

经过反复测试实验,发现以下问题

IOS首次调用签名验证方法后，路由变化可不再需要签名验证

Android 随着路由变化，每次都需要签名验证

至此，解决方案已经出炉

vue提供vue-router。主要是用router.beforeEach，每当用户第一次进来时，去获取一次签名验证。注意：只获取一次，这样IOS签名就解决了。

Android下，则需要每个页面去获取签名

注意：每次签名时，都要执行wx.config()方法，用以更新签名配置

微信支付相关（支付目录配置）

问题描述

支付目录必须细分到二级或以上

支付目录配置规则示例

你的支付目录如下：
例1：http://pandao.github.io/show/base
- 支付配置：http://pandao.github.io/show

例2：http://pandao.github.io/pay/show?a=2&b=3
- 支付配置 http://pandao.github.io/pay/

应该发现其中的规律了吧，配置到最后一个""/"的后面。

解决方案

将所有支付页面的路由，统一加上“/pay/”，响应的参数变更，以？a=b等

效果例如

http://pandao.github.io/pay/s...

最后配置路径为 http://pandao.github.io/pay/

微信授权回调

问题描述

vue history模式，需要配合后端服务器配置才能生效

相应的配置示例

Apache


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

我采用的nginx的配置

为了将前后台路由上区分开，微信端我的路由，均已 url/weixin/param这样区分

所以我的配置为

location ^~ /weixin/ {
  try_files $uri $uri/ /index.html;
}

意思是，只要访问路由是 /weixin/这样的路由，均请求html静态文件，这样，不会影响，同一个域名下，接口，后台等请求连接

前言铺垫够多了，下面说说授权回调的解决方案

其实很简单：例如我去请求 url/access？return_url="url/weixin/index"

看出来解决方法了吗，就是去授权方法的地方，先去授权，拿到授权后，再回调 return_url 中携带的回调地址

至此，我的叙述就结束了，由于时间紧迫，没有详细的贴上代码，这是“耍流氓”的行为啊，下次完善。

服务器托管 idc机房托管微信支付签名错误微信jssdk jssdk微信图片微信jssdk不稳定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/26266.html

使用vue开发微信公众号下SPA站点的填坑之旅

摘要：原文见我的博客，点击进入使用开发微信公众号下站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱。原文见我的博客，点击进入使用vue开发微信公众号下SPA站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱^_^。 ...

yeyan1996 2019-08-21 15:09 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

afishhhhh 2019-06-27 16:36 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

Taonce 2019-08-20 16:49 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

lieeps 2019-08-30 15:55 评论0 收藏0