給文檔加了個小程式的功能

接手文檔項目後，想看看用戶對文檔有什麼回饋，除了一部分錯誤的回饋外，還收到一部分有價值、但是不「善良」的回饋。

這個點，也是我一直想做的，能不能讓文檔的展示形態更加豐滿些？

在進行小程式開發時，基礎庫提供了大量靈活的組件可提供給開發者使用，並且配套了一些詳細的文檔內容。現在的體驗還停留在貼圖、貼程式碼上，為了提供更高的文檔體驗，這裡提供了在文檔內實現 demo preview 的效果，在看組件程式碼時，也能同步了解該組件具體呈現的效果。

除了內部提供的內置組件外，在小程式生態內部還有眾多優秀的組件庫，有些組件庫會選擇使用 H5 來呈現效果，另外一些更細緻的開發者會額外申請一個小程式來體驗組件庫。

為了服務這部分開發者，提高其自定義組件庫的可用性，後期也會朝著可預覽 ➕ 可編譯的小程式 playground 來實現。

一個完整的文檔預覽小程式，需要幾塊工作量：

編譯工具

現在小程式內部編譯工具是以 wcc 和 wscs 為核心，然後外層自定義獨立小程式編譯程式碼的內容拼接。

在開始做小程式編譯工具時，問了周圍的同事，能了解細節的人，真的沒幾個人。而實現小程式編譯工具的人，都在另外一個組，那時候，真逼的我沒辦法，實現了《心在六組，人在八組》的狀態。我曾以為，我是不是真的是在八組。

寫一個編譯工具，就技術難度來說，還是有點的。主要思路就是詞法分析、語法分析。而我，其實並不需要做的太細，因為 wcc 和 wscs 都是現成的，我主要需要實現一個組件的依賴樹。

runtime 內容預覽

runtime 項目搭建是基於已有項目，本著程式設計師的基本道德標準之一「不重複造輪子」。runtime 原有基本架構是基於 react + iframe 通訊的結構，對標微信開發者工具，而文檔預覽的架構有些許不同，需要自定義小程式解包，增強 runtime 載入基礎庫文件的性能。

整個過程做下來，文檔預覽 runtime 的大致模樣也基本定了。

文檔預覽結構

在編譯工具和 runtime 內容預覽兩個大頭工作量搞定之後，剩下主要是如果結合文檔來進行編譯的耦合實現。

這個塊工作量不難，內嵌一個 iframe，將 /xcode 對應小程式程式碼，放進去差不多就大功告成了。

到這裡，預覽一期的大致內容差不多搞定啦！

有興趣的小程式設計師，可以打開文檔嘗鮮體驗下：

https://developers.weixin.qq.com/miniprogram/dev/component/button.html