微信网页开发遇到的坑

大家好，我是许RR。最近在做一个外包项目，老板要求使用微信网页开发，什么是微信网页开发呢？我简单的总结下我在微信开发遇到的两种网页：

• 第三方网站

  这个是我自己给的称谓，所谓的第三方网站就是没有使用微信给的API，用原生或者框架代码做成的网站，这个网站可以放在微信公众号提供的一个菜单里，作为一个超链接，点击，然后就能访问到这个网站，看上去是在微信里的网站，实际上它就是个第三方网站。

• 微信网站

  这个就不同了，这种网站我称为“微信网页”。为什么呢？因为这种网站通过微信公众号的设置（比如说appid,appsercet,微信js安全域的设置）就能获得使用微信提供的API的福利，比如说微信提供的导航栏，二维码API，某些能让你的网站看上去更完美的嵌入在微信里（就好像是微信做的网站一样）,当然最大的好处大概就是获取微信用户对应公众号的open_id以及微信昵称和头像（就是微信打开某些应用提示你的是否授权，其实就是个oauth2.0协议）。

科普完了，接下来介绍下最近开发踩的一个巨大的坑：

微信网页上传文件：

本来我们这个项目是基于vue和lumen的，前后端分离，上传文件也是个很简单的功能，后台我很快完成。到前端的时候就卡住了，本来我以为前端没做过文件上传的功能写不出来或者是写错了，结果我把代码接手过来一看，然后在接下来的两天的时间里翻了大概有几十篇的博文。然后分别在项目中使用了fetch,axios什么formdata或者no headers或者header formdata都试过了，没有一个行的（原生代码在非微信浏览器上倒是一次上传成功），在network中file甚至没有上传文件流，这太搞笑了。

导师让我们试试ajaxfileuploadfile.js，这是一个jQuery的插件，我研究过源码后发现它只是基于ajax的再一次封装，而且文件上传也没什么好封装的（这也是这个插件不流行的原因，仅仅节省不到半个小时的工作）,于是我在vue中引入了jQuery（这只是个半小时的坑），然后在API中使用$.ajax()上传。结果还是失败了。后台接受到的仍然是空值。

结合网上博客和微信只提供了图片上传API我大胆的猜测微信可能对文件上传这一功能做了阉割，毕竟微信网站在微信内嵌的浏览器上运作，微信只需要disable掉input file这个标签或者干脆点的毁灭文件上传流。于是我提出了这个想法，但是毕竟需求最大，我们还是希望能够用微信网页实现文件上传功能。然后导师又提出一个想法：“如果微信上传文件限制，那么用它自己的腾讯云盘的API行不行呢？”，说实话我实在佩服导师，我是想不出这么多种猜测的。但是这个可能也很快破灭了，一是微信砍掉的是文件上传流，如果将文件类比为货车的话，那么微信砍掉的就是公路，二是我们使用的服务器和域名都是腾讯的。

本来一点希望都没有，这个时候前端在网上翻到了一篇博文（原地址已经找不到），博文里讲他开发的时候也遇到这个问题，然后通过引入一个插件解决了这个问题，但是这种方法是屏蔽掉微信砍掉的文件上传流（恩，原理他也不懂），相当于货车不走公路反而插翅飞了起来，其实就是利用了微信的bug。

既然有希望那么就开干吧，引入作者说的插件后发现错误百出，然后认真的看这篇博文发现这老哥也是转载但是是属于那种不记原作者名的转载（笑），最后各种搜大概发现了三份错漏百出的代码，引入完全使用不了的那种。最后我放弃了，一是这些错漏百出的代码即使引入了之后修改能正常运行的代价太高，花费时间太长，而且就算能够正常运行成功的概率太低。二是这个插件利用的是微信的bug，不稳定性太高，说不定哪天微信就将这个bug修复，那么就gg。三是这篇博文发自2015年，很可能微信已经修复了这个bug，而且它是转载的，说不定原作者是13年发的。

最后的结果是说服老板使用移动端第三方网站，沟通也是一门艺术（狗头）。

总结下：

1. 项目经验不足

   如果微信网页开发经验足够，应该立刻意识到这个需求难以实现，和老板沟通，而不是耗费多余的时间去尝试。

2. 微信网页不适合做复杂的操作

   微信按理说本来就是应该执行一些用手机就能实现的操作（所以会有图片API的提供），上传文件这种有时候要在电脑端操作的不太适合微信网页。

3. 微信小程序有上传文件的接口

4. 头脑要灵活

   代码有bug，或者是进度卡住了，应该像导师一样去思考各种各样的可能，尝试各种操作，除非是完全不能实现，不然总能找到一两个办法（找到微信的bug也是个办法）。

5. 沟通很重要（哈哈哈）