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

vue+微信支付目录+JSSDK签名解决方法遇到的坑如下注：此方法仅为个人总结，并非唯一解决方法微信支付JSSDK签名报错微信支付转账缺少API参数微信支付目录配置，只有5个配置，可能5个以上的地方都有配置，路由规划微信授权回调处理技术我用vue路由模式history模式，有两个好处history路由模式好看history模式可以保留页面back,上一页滚动条的位置微信JSSDK，图片上传，地理位置获取，微信支付等功能UI框架，采用vux对应的处理方式（作为非专业的前端，只能研究hard)微信JSSDK签名错误微信官方说明如下所有需要使用JS-SDK的页面必须先注入配置信息，否则无法调用（同一个url只需要调用一次，每次url变化时都可以调用更改url的SPA的webapp。目前Android微信客户端不支持pushState新的H5特性，所以使用pushState实现web应用页面会导致签名失败，Android6.0会修复这个问题。经过反复测试和实验，发现存在以下问题。IOS第一次调用签名验证方法后，路由变化不再需要签名验证。Android跟随路由变化，每次都需要签名验证。至此，解决方案已经发布。Vue提供了vue-router。主要是利用router.beforeEach在用户第一次进来的时候获取一个签名验证。注意：只获取一次，以便解析IOS签名。Android下每个页面都需要获取签名注意：每次签名都要执行wx.config()方法更新签名配置微信支付相关（支付目录配置）问题描述微信支付目录需要最大配置of5一个支付目录必须细分为两个或多个支付目录配置规则示例你的支付目录如下：示例一：http://pandao.github.io/show/base-payment配置：http://pandao.github.iogithub.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/s...最终配置路径为http://pandao.github。io/pay/WeChat授权回调问题描述Vuehistory模式，需要配合后端服务器配置才能生效对应配置示例ApacheRewriteEngineOnRewriteBase/RewriteRule^index\.html$-[L]RewriteCond%{REQUEST_FILENAME}!-fRewriteCond%{REQUEST_FILENAME}!-dRewriteRule。/index.html[L]Nginxlocation/{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携带的回调地址。至此，我的描述就结束了，因为时间紧，代码就不详细贴了。这是一种“耍流氓”的行为。下次我会改进它。