專訪微信WeUI主程江劍鋒：對微信Web App開發的建議
2016年3月19日，第二屆 FEDay前端開發者大會 將在廣州舉行，來自非死book、騰訊、阿里巴巴等公司的一線工程師將向參會者分享React、Redux、微信Web App、HTTP/2等話題。
最近 微信低調的發布了WeUI ，這是一套UI組件庫，可以幫助網頁開發者實現與微信客戶端一致的視覺體驗，據悉，這套UI組件庫也在微信內部得到使用。
微信團隊UI工程師，WeUI主程江劍鋒也將參加FEDay大會，分享《微信Web APP開發最佳實踐》。InfoQ記者對他進行了采訪，了解WeUI的情況，以及微信內部是如何進行Web APP開發的。
InfoQ：前段時間微信發布了WeUI，請介紹一下這個組件庫，以及它的開發歷史？
江劍鋒：WeUI 前身是我們在日常開發過程中，沉淀下來的基礎組件庫，在內部已經有廣泛使用，例如微信安全中心、微信意見反饋、舉報與投訴等微信內的 Web 應用。2015 年初，我們重新梳理這套基礎組件庫，包括設計、重構代碼、測試、編寫示例和文檔，形成現在的 WeUI 。
InfoQ：微信為何要向外界發布WeUI？
江劍鋒：在2015年初，微信開放了JS-SDK，開發者借助微信的帳號體系（網頁授權）、JS-SDK功能以及公眾號提供的接口，就可以開發 出功能強大的 Web 應用。然而，不少微信第三方 Web 應用，功能齊全，但是界面體驗卻不佳，缺乏專業的交互/視覺設計。于是我們重新梳理之前沉淀的組件庫，整理出一套與微信原生界面風格一致的基礎組件，取名 WeUI ，于 2015 年 10 月在 github 正式開源 。開發者可以使用這套 UI 庫，快速構建出美觀、易用的 Web 界面。
InfoQ：微信Web App和一般Web App有哪些不同？是否存在兼容性問題？
江劍鋒：JS-SDK 是微信Web APP區別于一般 Web App 的重要特點，除此之外，微信 Web App ，可以通過網頁授權，調用微信的用戶體系。Web App 通常都需要對用戶進行標識，記錄用戶的一些數據，普通的 Web App，需要開發者開發用戶注冊流程，用戶得填寫用戶名、密碼等信息才能完成注冊。對于開發者而言，增加了開發量；對于用戶而言，需要走注冊流程，記憶多 一個用戶名和密碼。而在微信內，只需要調用網頁授權，用戶無需輸入用戶名密碼，就可以獲取到用戶的 openid 、昵稱、頭像，對用戶進行標識了，對開發者和用戶來說都很方便。因為微信網頁授權必須在微信內完成，其他 App 或普通瀏覽器內就無法使用，開發者可能需要做兼容性判斷。
一般的 Web App，需要兼容不同的瀏覽器，而微信 Android 客戶端嵌入了 QQ瀏覽器團隊開發的X5內核，消除了各個 Android 版本內置 webview 之間兼容性的差異，開發者在 Android 下只需要考慮 X5 即可。
InfoQ：微信內部有哪些應用是使用Web APP形式開發的？
江劍鋒：目前微信里面典型的 Web App 有“微信網絡搜索”、“表情搜索”、“微粒貸”、“理財通”、“微信意見反饋”等。
以微粒貸為例，該應用功能比較多，每個功能有多個步驟，程序需要記錄這些步驟的狀態，如果采用 Web Page 的形態，每個步驟都要重新加載頁面，除了用戶體驗差，還給記錄步驟的狀態增加了開發難度。由于這個功能沒有 SEO 的需求，不需要搜索引擎索引，所以采用 Web App 的形式進行開發。
InfoQ：能否介紹一下你們開發微信 Web App 使用的工具以及工作流？
江劍鋒：主要使用 webpack 來做依賴管理和代碼打包，用 gulp 來做模擬數據注入和本地 demo 服務啟動相關的東西。目前的工作流程是使用模擬數據和模擬微信 JSAPI 在本地開發，然后再更新到測試環境的。這樣的工作流程使前端開發可以脫離實際的環境限制來完成大部分工作。
InfoQ：能否介紹一下你們對于微信Web App有哪些質量標準？
江劍鋒：質量一般可以從幾個方面來衡量，功能完整性、兼容性、安全性、用戶友好。
功能完整性，這個是最基礎的，方案中設計到的功能，需要實現。這個開發自測、測試人員都可以測出來。
兼容性，指的是不同平臺/系統版本/微信客戶端版本/設備屏幕尺寸的適配能力，保證兼容到主流設備。平臺、系統版本、設配屏幕尺寸都比較好理 解，就是要保證這些條件表現良好，或者平滑退化。而不同的微信客戶端版本是指，如果 Web App 調用的 JSAPI，只在較新的微信版本才支持，那么當用戶使用較低版本微信時，需要給出友好的提示。
安全性，除了開發自測外，需要經過測試人員、安全人員的檢測。檢測范圍通常包括，方案本身是否存在邏輯漏洞、常見的 Web 漏洞如 XSS 等、壓力測試、接口調用頻率限制等。
至于用戶友好，我們會從產品、交互、視覺、技術多方面來衡量。用戶打開頁面是否夠快，看到的界面是否美觀、大方得體，操作起來是否簡單、流暢等，都是衡量的因素。
InfoQ：從您的經驗出發，目前移動 Web 主要的坑有哪些？
江劍鋒：從開發者的角度來看，移動端 Web 開發抱怨比較多的是來自 Android 平臺不同版本差異。有些功能/樣式，在 iOS 或者新版本的 Android 手機表現正常，但是到了某些 Android 手機，就出現奇怪的 bug ，這些很難提前應對，得靠經驗總結。
此外，Android 流暢程度普遍比 iOS 的低，在 iOS 下表現良好的動畫效果，在 Android 下可能就會出現卡頓的情況，這種情況下除了對代碼進行優化之外，可能需要做些妥協，減少動畫效果。
InfoQ：您對微信 Web App 開發者有什么建議？
江劍鋒：我的建議是，Web App開發需要注重用戶體驗，開發者可以從下面幾個方面來提升。
首先是傳輸性能。因為是移動端的緣故，網速是一個不可忽視的問題，頁面加載時間過長，用戶體驗就顯著下降。在弱網絡環境下，頁面加載時間不宜超過3秒。可以通過對靜態文件進行壓縮（尤其是圖片）、合并、設置緩存、使用流行的 CDN 服務等，來加快頁面加載速度。
另外，美觀的界面、流暢的操作，能夠有效地提升用戶體驗。可以使用流行的開源 UI 庫或者框架，這些庫或者框架通常有專業的設計。對于開發者來說，可以快速構建出應用的界面，提升效率；對于用戶而言，用起來也更加舒心。
</div> </div>
來自： http://www.infoq.com/cn/news/2016/02/jiangjianfeng-interview