一個小程序開發者的技術之路 | 2018掘金年度徵文

這是我在掘金的第一篇原創文章，主要是總結一下2018年技術上的學習與思考，也想對2019年進行一下規劃和展望。

2018 從小程序開始

2018年，是我工做的第二年。17年，主要的學習和實踐的技術是vue，咱們組用vue作了一套 sass 化的商城系統。可是17年底，由於公司業務的調整，在18年初，咱們組專一於了小程序的開發。

在通過獨立負責前端開發一個比較小的禮品卡小程序以後。咱們組開發的第一個小程序是某手機品牌商城。在這一年中我大概參與了八九個小程序的開發，從開始小程序的商城，到目前在作的智慧門店項目。

首先想談的是選型，咱們當時有原生，mpvue 和 wepy 可選。當時的考慮是想既然是新的東西，要先了解它的自己是怎麼寫的，因此就選擇了用原生開發。可是咱們又很想用scss來寫樣式，因此使用了前端工具，主要是爲了轉換 scss。關於前端開發工具，我在以後的部分也會着重介紹。

其次，在小程序技術的學習上，在開始時，感受沒有遇到太大的問題，由於以前有vue的基礎，因此轉換爲小程序的開發中，還算比較天然。在這一年裏，我總結下來比較難的點有：

1. 實現一些複雜的效果的時候，小程序有一些瓶頸。好比小程序的性能，好比一些內置的組件一些事件想修改的時候，沒辦法徹底的修改和控制，有些還有兼容性問題。例如video組件對播放條的控制。須要多去研究，微信開發者社區也是一個好地方。
2. 對於小程序受權的控制。由於小程序對受權管理仍是比較嚴格的，並且須要受權的規則也在改變。在整個商場系統中，何時得到權限，能夠拿到好比 UnionId，頭像等，須要在開始時就討論和設計好。
3. 小程序性能的優化。如今還只是在優化接口的請求，儘可能減小無用或者複用的接口。在將來也但願有更多的探索。

小程序cli工具和前端工程化淺嘗

在18年9月份左右的時候，當時咱們組內已經作了十幾個左右定製化的小程序商城。可是在這個過程當中，咱們寫了一些UI組件和業務組件來加速開發，不管是樣式組件，或者是對接後端的業務組件，都沒有一個統一的管理，碎片化比較多。可能不一樣的商城實現一樣的功能的時候，是兩套代碼。加上以前是用的別人寫好的cli工具，因此這時候個人想法是本身寫一個cli的工具，能夠把樣式組件和業務組件統一管理起來，而且進行版本控制。這樣，在以後討論中也逐漸明確瞭如下幾個功能:

1. 把UI組件庫，業務組件庫和編譯環境配置文件分別放到三個git倉庫進行管理。
2. 可以初始化開發項目，cli工具能夠把咱們寫好的組件庫按照所需版本添加到初始化的項目裏。這樣剛初始好的項目的功能也是統一的。
3. 可以更新兩個組件庫以及cli工具自身。
4. 可以編譯 scss 文件，而且解決 scss 在轉爲 wxss 過程當中的重複編譯和與wxss @import功能不一樣的問題（最後咱們把 scss 文件分爲兩類，一類裏面只寫樣式，一類裏面寫一些變量和有功能的語句，這個以後再寫一篇文章細談）。
5. 能更方便的切換開發環境（這是以前的工具就有的，這裏作了一些擴展）

這是這個cli工具規劃的一期的功能，以上的功能基本都實現了，也算運用了一點前端工程化的思想去管理咱們小程序的開發，最後我完善了這個工具的文檔而且上傳到了公司私有的Npm源上。可是這個工具仍是有個小遺憾，就是我 webpack 用的很差，在處理 scss 文件重複編譯的問題上沒有找到好的方法，最後是在百度出的比較 fis3 這個打包工具上找到了方法。可是 fis3 本最近也沒有更新了，裏面的東西都比較老，但願以後能夠用 webpack 解決，把編譯內核換成 webpack。

固然也經過這個小工具的編寫，我也學了一些關於編寫命令行工具的以及一點點node的知識。

Taro，一套 react 代碼，編譯多端小程序

年末的時候，咱們有了支付寶小程序和釘釘小程序的一些探索。也但願能夠一套代碼編譯多端小程序。我就嘗試了一下把一個不是很複雜的小程序轉換爲Taro的項目。

當時選擇Taro也是通過了一些比較，相較於其它的多端編譯的框架， Taro 相對來講出來的比較早，用的比較多，github上issue解答比較多，腳手架工具也好用，也出了小冊能夠學習。 Taro有一個功能感受很好用，只要在一個已經寫好的小程序上執行 taro convert 能夠把一套小程序代碼轉換爲 taro 的項目。 雖然咱們的小程序代碼可能由於用 <template> 嵌套的有點多，使得轉換的過程當中有報錯。可是仍是很方便的直接轉換爲了react代碼。

如今使用起來的小問題就是一個是taro自己有一些限制，可是會有提示，要看一下文檔什麼不能用。還有就是可能對其它除了微信小程序的小程序的兼容性的支持（文檔也但願儘快更進）。

如今已在嘗試或19年感興趣的點

如今已經19年了，下面有些東西已經在嘗試學習，但也可能有些點19年學習不到，仍是加油吧。

• react全家桶
• canvas基礎
• webpack
• TS
• node基礎
• tensorflow.js

總結

18年感受主要精力仍是在小程序上，對其它方面仍是技術上的進步仍是很少，並且沒有一個好的規劃、感受學習的點仍是不夠深，不夠精。但願在19年能有所規劃，有所改善。在工做上，也但願在組內，能更發揮本身的技術影響力，19年再加油！