用微信微信官方账号js-sdk在vue踩坑记录

最近在vue砸了微信官方账号api的微信访问。不得不说这里的水真的很深。上次分享了微信授权登录和js-sdk签名的部分。我的许多朋友私下表示怀疑。今天，我将在这里再次尝试理顺这个坑：

微信JS-SDK是微信公众平台为网页开发者提供的基于微信的网页开发工具包。通过使用微信JS-SDK，网页开发者可以高效利用手机系统的拍照、选图、语音、定位等功能，直接使用微信独有的分享、扫描、卡券、支付等功能，为微信用户提供更好的网页体验。将页面分享给朋友圈

以上摘自官方文档，说明要想在微信官方账号内嵌的h5中实现微信共享和支付的功能，必须引入js-sdk。使用js-sdk有一个关键环节，就是通过config接口注入权限来验证配置，配置中有一个签名参数需要借助服务器来获取，这里就不讨论了，通过官方文档可以有一个深刻的理解。

哈希还是历史？

在上一篇文章中，我建议您将vue-router配置为在vue中使用哈希模式，那么哈希模式和历史模式有什么区别呢？让我给你一个栗子。让我们假设我们都通过http://domain.com进入，然后跳转到路由为/jssdk的页面，因此在签名验证期间由实际的js-sdk获得的当前页面的url在ios和andrioid之间是不同的。这里我通过表格展示：

事实摆在桌面上，我不能很好地表达我自己，所以我会很懒。36360 . 66666666666

如果你没有权限分享指定页面，哈希模式很方便，但我别无选择，只能用微信分享。如果你用哈希模式，分享地址，微信会自动处理掉#后面的部分，所以我不能和朋友或者好友分享指定的页面。

我能怎么做呢？我只能用脑子解决历史问题。其实很容易解决，就是iOS需要用第一次进入页面的URL获取签名，安卓每次切换路由都会重新配置签名。我在这里列出两个方案：

1.在门户文件中记录页面url。页面组件创建后，ios获取记录的URL进行签名，android获取当前路由(window . location . href . split(' # ')[0])。请去我的最后一个博客。

2.直接在门户文件中签名和注入配置，并且只在安卓每次切换路由时重新签名和配置。该方案适用于所有使用js-sdk的页面

问题记录

现在列出我在修补过程中遇到的bug:

1.安卓设备可以共享ios设备不能共享；出现这个问题的原因是采用历史模式，使用切换后的url，没有考虑ios验证签名得到的url是第一次访问的url。

2.ios设备进入页面时不能共享，只能手动刷新页面后才能共享；经过多次测试，我发现在测试共享时，如果访问的链接没有带http://，除了主页以外的所有页面都是无效的，测试时登陆页面ur必须加http://

3.正常点击链接分享，点击他人分享的图文消息后不能分享；

猜想一：当你点击图文消息时，微信添加的参数被从网址中移除，用于签名验证，那么我们也应该移除微信在签名时添加的参数吗？所以我把微信参数设为`？from=single messageisapininstalled=0 '这个部分去掉了，结果还是共享失败，不过我随意加了一个参数，共享正常。我随意加两个参数，分享就不正常了。

猜测2:微信分享的url只能允许一个参数进行签名验证？所以我写了这个：URL=location . href . split(')[0]，验证后发现不对。经过仔细考虑，我有一个非常可怕的想法，我甚至不相信官方文件。

猜想3:3:URL需要编码吗？也就是说，url=encodeuricomponent (window。location.href.split ('#') [0])经过多次调试，我终于发现了一个问题，那就是我需要对签名的URL进行编码，这并不容易，兄弟字。

只有签名的网址需要编码，共享配置的网址不需要编码。只需要对已签名的URL进行编码，共享配置中的URL不需要编码

这里是另一个坑。小心点。

经过n次调试和尝试，我编写了几十行代码，解决了以上所有问题。回头看，我真的很年轻，逻辑就是这么简单。也许一步到位，但是我已经和各种bug战斗了n次(谁能理解在生产环境中调试的悲伤，如果我换一点代码)，唉。

编码

分享一下我是如何按照第二个方案分享微信的配置的。因为我的项目中的要求是所有页面都需要共享，所以在每个页面组件中获取签名是不切实际的，所以我想使用vue-router的after hook来完成配置共享操作，对于android，我需要重新签名。

//main.js.从“weixin-js-sdk”导入wx，从“axios”导入请求.router.afterEach每个((to，The from)={ let _ URL=window.location.originato.fullpath//for非ios设备，重新签名if (window。__wxjs_is_wkwebview！==true){ request . get('/API/jssdk？Url=' encodeuricomponent (_ URL))。然后(函数(_ list){//注入配置wx . config({ 0.}) })} //微信共享配置wx . ready(function()){ wx . onmensharimeline({ 0.})wx . onmensharepmessage({ 0.})})}) .//当IOs设备进入页面时，会签署js-sdk if (window。_ _ wxjs _ is _ wkwebview==true){ let _ URL=window . location . href . split(' # ')[0]request . get('/API/jssdk？url=' encodeURIComponent(_url))。然后(function(RES){ let _ list=RES wx . config({ debug : false，appId: _ lists.appId，timestam p : _ list . timestamp，non crest : _ list . non crest，signature re : _ list . signature，jsApiList: ['chooseImage '，' uploadImage '，Preview image '，' on menu sharetime '，' onmenusharetimemessage '，' on menu sharetime '，' choosewxpay']})摘要：Summary一定要保证微信验证签名在调用签名配置时获取的url(ios永远是url(iOS第一次进入页面)与我们请求服务器获取签名时提交的URL一致。

拨打微信支付

这两个选项将走向何方

H5用微信支付。细心的人会发现，微信有两种解决方案。我对一个有大致的了解，一个是js-sdk中的开放能力，一个是微信支付开放平台提供的接口

Js-sdk版本：

微信支付版本：

如果只需要在微信官方账号打电话支付，两种方式都可以。由于作者使用了js-sdk来访问其他函数，所以我在这里选择了chooseWXPay。

访问步骤

在其他功能接入成功的前提下，很方便很快就能收到货款。作者列出的主要步骤如下：

js安全接口域名(如www.imwty.com)配置在微信公众平台。这是调用js-sdk的前提，微信官方账号支付也是基于JS-SDK；在微信支付平台设置支付目录，参考微信支付发展文档。这里需要配置的是支付的页面路由，需要添加/(如www.imwty.com/pay/)调用js-sdk签名配置(微信. config)，如上所述。在点击支付按钮的逻辑中，调用微信. chooseWXPay()方法，这也涉及到支付签名。有必要从服务器获取签名信息。注意：/访问支付页面时一定不能错过。微信在调用Step 4时会严格对比你页面的路线是否与支付平台设置的路线一致。

编码

这里主要展示作者在第四步的写作，仅供参考

.methods () {handlerPay () {**粗体文本* * let self=this//sign for payment APiutil . get('/API/jssdk/pay '，{amount:this。金额})。然后(函数(wxmsg) {self。$微信. choosewxpay({//支付签名时间戳，注意微信jssdk中所有时间戳字段都是小写的。但是，最新版本的支付后台用来生成签名的timeStamp字段名需要大写S字符appid:wxmsg.appid、timestamp3360wxmsg.timestamp、non crest : wxmsg . non crest、//支付签名随机字符串。不超过32位package: wxmsg.package，//统一支付接口返回的predate _ id的参数值，提交格式如下：predate _ id=* * *)sign type 3360 wxmsg . sign type，//签名方式默认为‘SHA1’。要使用新版本的支付，应该传入‘MD5’paysign : wxmsg . paysign、//支付签名成功3360函数(RES){//成功支付回调函数}、cancel3360函数(RES){//取消支付回调函数}。Error:函数(res) {//支付失败回调函数} })。catch(function(){ 0.}) }}结论

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