我的小程序開發「踩坑血淚史」

文 | 沈銳

高曉松說，人生不止眼前的苟且，還有詩和遠方。

我說，碼農的世界不止 0 和 1，還有紅黃藍。

大概就是這樣的一種信念，催生了我的微信小程序 ——「碼農也塗鴉之 dA 版」吧。

不同於其他的一些實用性娛樂性很強的小程序，我的這款小程序更像是一種「私人定製」，因為它唯一功能，就是用來方便大家瀏覽我在 deviantArt 上的 CG 作品。

下面，我來回顧一下，在這個小程序開發過程中所「踩」的坑，以及一些點滴的心得體會。

希望今天我在知曉程序（微信號 zxcx0101）分享的這篇文章，會對大家有所幫助。

開發環境

對於我來說，首當其衝的「大坑」，是開發環境。因為，微信小程序開發工具僅支持 Windows 和 macOS 系統，但我的日常操作系統是 Linux。

起初在網上找到的方法，是虛擬機加 Samba 共享，但是這種方法不僅使用麻煩、浪費資源，而且預覽的樣式也無法完全準確。

之後，我在 GitHub 上找到了一個微信 web 開發者工具的移植，能夠真正在 Linux 下開發了。可惜，好景不長，隨著小程序組件的一次更新，移植版出現了奇怪的錯誤。

提交 issue 兩天後無人理睬的情況下（懷疑該作者已棄坑），我不得不開始搜索其他可替代方案。幸好，發現另一個移植版是可以用的。

評論功能

顯示評論的功能，是在小程序第二次更新時加的。起初，沒覺得是個難事，後來發現不太對——deviantArt 的 API 返回的評論內容是 HTML，但小程序無法直接解析它。

通過一番搜索，我找到了 wxParse 框架。使用過後，發現評論里的圖片長寬有問題，透明圖片的背景居都是白色。

好吧，我只能將它 fork 下來，然後讀源代碼、查原因、改代碼、提交 PR，問題終於解決了。評論區效果如下圖。

雖然有些艱難，但這個過程不也正好體現了開源的好處嗎？:D

底部標籤欄

我將小程序第一個版本形容成是在「裸奔」，因為它沒有底部標籤欄。

在第二個版本中，我決定為小程序添加自實現的底部標籤欄。經過了日夜奮戰， 我哼哧哼哧地把它實現了，覺得還挺順暢的。

測試的時候，發現點了五次就不能點了，我不得不再次查閱資料。結果發現，底部標籤欄居然是微信小程序提供的一個功能組件！噗…… 一口鮮血就噴了出來！

好吧，這是一個經驗教訓，下次開始前，一定要熟悉官方文檔，要好好做功課。

這裡想順便談談小程序的模板，因為實現底部標籤欄大量用到了模板功能。

小程序中的模板功能是用來定義可重用組件的。這功能還不錯，但有一點：模板的事件函數，必須定義在調用它的頁面對象上（即便這個事件是只局限於模板內部的）。

正因如此，我現在不得不在每個頁面的 函數開頭，將模板里需要的函數都運行一遍。

隨著小程序的不斷改進，我相信這個問題會得到解決。

圖片下載

原本我想在小程序添加的，是把圖片下載到用戶指定的本地目錄的功能。

查看了每個作品的圖片鏈接，發現每張圖片的子域名都不同。小程序的下載伺服器域名是要提前設置的，這麼多的子域名怎麼設置？這事困擾了幾天。

突然有一天，我想，deviantArt 這麼做該不會只是為了「分流」吧？試了試，果然如此。於是我加了段邏輯，用來替換子域名為同一個子域名，問題解決了。

接著，我就順著文檔，開始寫下載功能。我調用了小程序 API，小程序提示文件下載成功了，但是卻沒有在系統中找到。文件下載到哪兒去了呢？

後來我才知道，原來小程序是把文件保存到它自己的一個「秘密目錄」，並且提供了 API，可以載入這個「秘密目錄」的文件，這跟我想的「下載」，完全不是一回事啊。

說到這個問題，想到小程序的另一個限制：小程序內無法打開外部鏈接。本來想讓用戶可以用外部瀏覽器直接打開圖片，這下也沒轍了。

關於這些限制，後來在微信小程序的社區也見到有人吐槽，希望以後能夠改進吧。

寫在最後

回顧整個開發過程，挺折騰的。這個期間，我碰到了很多問題，也解決了很多問題。不過，最後看到自己的小程序發布的那一刻，還是挺興奮的。

微信小程序的出現的確大大降低了手機應用的開發門檻。我希望，每個開發者都可以來試試開發微信小程序，體驗一下小程序開發的樂趣。

「碼農也塗鴉之 dA 版」小程序使用鏈接

https://minapp.com/miniapp/1423/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！