微信網頁開發遇到的坑
最近在做一個外包項目，老闆要求使用微信網頁開發，什麼是微信網頁開發呢？我簡單的總結下我在微信開發遇到的兩種網頁：
第三方網站
這個是我自己給的稱謂，所謂的第三方網站就是沒有使用微信給的API，用原生或者框架代碼做成的網站，這個網站可以放在微信公衆號提供的一個菜單裏，作爲一個超鏈接，點擊，然後就能訪問到這個網站，看上去是在微信裏的網站，實際上它就是個第三方網站。
微信網站
這個就不同了，這種網站我稱爲“微信網頁”。爲什麼呢？因爲這種網站通過微信公衆號的設置（比如說appid,appsercet,微信js安全域的設置）就能獲得使用微信提供的API的福利，比如說微信提供的導航欄，二維碼API，某些能讓你的網站看上去更完美的嵌入在微信裏（就好像是微信做的網站一樣）,當然最大的好處大概就是獲取微信用戶對應公衆號的open_id以及微信暱稱和頭像（就是微信打開某些應用提示你的是否授權，其實就是個oauth2.0協議）。
科普完了，接下來介紹下最近開發踩的一個巨大的坑：
微信網頁上傳文件：
本來我們這個項目是基於vue和滷門的，前後端分離，上傳文件也是個很簡單的功能，後臺我很快完成。到前端的時候就卡住了，本來我以爲前端沒做過文件上傳的功能寫不出來或者是寫錯了，結果我把代碼接手過來一看，然後在接下來的兩天的時間裏翻了大概有幾十篇的博文。然後分別在項目中使用了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年發的。
最後的結果是說服老闆使用移動端第三方網站，溝通也是一門藝術（狗頭）。
總結下：
項目經驗不足
如果微信網頁開發經驗足夠，應該立刻意識到這個需求難以實現，和老闆溝通，而不是耗費多餘的時間去嘗試。
微信網頁不適合做複雜的操作
微信按理說本來就是應該執行一些用手機就能實現的操作（所以會有圖片API的提供），上傳文件這種有時候要在電腦端操作的不太適合微信網頁。
微信小程序有上傳文件的接口
頭腦要靈活
代碼有bug，或者是進度卡住了，應該像導師一樣去思考各種各樣的可能，嘗試各種操作，除非是完全不能實現，不然總能找到一兩個辦法（找到微信的bug也是個辦法）。
溝通很重要（哈哈哈）