微信在 2016 年 1 月 20 號(hào)正式發(fā)布“微信網(wǎng)頁設(shè)計(jì)樣式庫”（WeUI），向“微信應(yīng)用號(hào)”又邁進(jìn)一步。本文分為兩部分，前半部分簡明扼要提一下 WeUI 使用方法和第三方庫；后半部分分析 WeUI 發(fā)布的目的，以及對(duì)不久的將來的三個(gè)預(yù)見。
微信網(wǎng)頁設(shè)計(jì)樣式庫（WeUI）使用扼要
微信網(wǎng)頁設(shè)計(jì)樣式庫的目的：
為幫助網(wǎng)頁開發(fā)者實(shí)現(xiàn)與微信客戶端一致的視覺體驗(yàn)，并降低設(shè)計(jì)和開發(fā)成本，微信團(tuán)隊(duì)推出了網(wǎng)頁設(shè)計(jì)樣式庫：WeUI。
包含的內(nèi)容：
該樣式庫目前包含 button (按鈕)、cell (單元格)、toast (浮層提示)、dialog (對(duì)話框)等網(wǎng)頁常用的各式元素，并已在 GitHub 上開源。
點(diǎn)擊查看：
簡單的說，WeUI 的核心是一套樣式表（weui.css），目的是規(guī)范微信 webapp （可以擴(kuò)大一點(diǎn)說是網(wǎng)站）的 UI 組件設(shè)計(jì)，方便前端工程師快速開發(fā)，以此為即將到來的微信 webapp （應(yīng)用號(hào)？）打基礎(chǔ)。
使用方法只要三步：
- 根據(jù)文檔說明，下載 WeUI 庫。
- 在頁面中引入 weui.min.css 文件。
- 從官方 demo 中拷貝需要的功能組件代碼到自己頁面即可。
對(duì)前端工程師來說應(yīng)該沒有難度，對(duì)前端工程師之外的人群只需要知道 WeUI 是干什么的就可以。
示意圖較長，為不影響文字閱讀放在文章末尾。:)
WeUI 擴(kuò)展和第三方庫
sketch uikit：ZTfer/weui-sketch
ui library：Eric-Guo/weui-rails(Using kevyu/weui-sass)
sass：kevyu/weui-sass
jquery：lihongxun945/jquery-weui
未來 - 1：前端工程師的春天
微信應(yīng)用號(hào)即將到來，開發(fā)應(yīng)用號(hào)將會(huì)是一塊大蛋糕，隨之而來的是職場(chǎng)對(duì)前端工程師的需求增加，未來一段時(shí)間前端可能會(huì)變成更熱門的職業(yè)。
為春天做準(zhǔn)備：開發(fā) webapp，學(xué)習(xí)后臺(tái)知識(shí)。
隨著移動(dòng)端設(shè)備使用量逐漸上升，前端逐漸向移動(dòng)端轉(zhuǎn)移，從微信官方率先開發(fā) react-weui 看，微信最看好的移動(dòng)前端框架很可能是 react。前端工程師可以針對(duì)性地學(xué)習(xí)一些熱門移動(dòng)前端框架，如 react，ionic，bootstrap... 移動(dòng)前端入門可以看以前寫的一篇文章：移動(dòng)前端基礎(chǔ)
前端會(huì)后臺(tái)已經(jīng)逐漸變成硬需求，前年 BAT 前端的招聘需求還只是要求熟悉后臺(tái)，去年的招聘面試就開始考查后臺(tái)知識(shí)了。
未來 - 2：webapp 的春天
微信的最終目的應(yīng)該是想打造一個(gè) webapp 平臺(tái)，估計(jì)許多家互聯(lián)網(wǎng)公司也在競(jìng)爭(zhēng)吧，webapp 平臺(tái)最終的贏家是誰還很難說。
但是有一個(gè)點(diǎn)是可以肯定的：webapp 迎來了春天。想比起原生 app，webapp 的優(yōu)勢(shì)很早就被挖掘出來，但是由于接口、安全性、耗電、用戶體驗(yàn)方面的缺陷，有人看好有人看壞。具體討論看知乎。
個(gè)人的看法是一些涉及安全性的原生 app 將會(huì)被保留（如支付寶），大部分現(xiàn)有的原生 app 將會(huì)向 webapp 轉(zhuǎn)移。因 webapp 占用空間遠(yuǎn)小于原生 app，將來的手機(jī)存儲(chǔ)分級(jí)（16G, 64G, 128G...）可能失去意義。
未來 - 3：微信應(yīng)用號(hào)應(yīng)該快來了，但是不會(huì)完全按照微信的預(yù)期走
從最早的微信 JS-SDK 到后來張小龍說的“應(yīng)用號(hào)”，再到剛發(fā)布的 WeUI，都能看到微信一統(tǒng)江湖的決心。但是事情可能不會(huì)這么順利，Google 很早就開始開發(fā) polymer，不僅想要搭建 web app 平臺(tái)，還有將 web 做成系統(tǒng)的野心。
除了競(jìng)爭(zhēng)對(duì)手之外，還有技術(shù)問題，一個(gè)比較簡單的問題就很難解決：移動(dòng)端瀏覽器提供了“安裝到桌面”選項(xiàng)，這樣安裝的 webapp 可以直接從移動(dòng)端桌面直接啟動(dòng)；而微信中的應(yīng)用號(hào)需要多一個(gè)層級(jí)，先進(jìn)入微信才能進(jìn)入。當(dāng)然啦，這么粗淺的問題微信 PM 肯定能考慮到，至于怎么綁定用戶到微信應(yīng)用號(hào)上，我們拭目以待吧。:)
轉(zhuǎn)載請(qǐng)加原文鏈接及署名作者為Hongyang Wang。歡迎關(guān)注微信公眾號(hào) MRWHY，聊 WEB，聊 AI。
附：WeUI 設(shè)計(jì)稿，來自ZTfer/weui-sketch，侵刪。
2016-02-13 13:07
10
分享本文：
喜歡
最新最早最熱
0條評(píng)論
還沒有評(píng)論，沙發(fā)等你來搶
帳號(hào)管理
why先森王洪陽
發(fā)布
Hongyang 的朋友們： 曾晨/龍方正/呆兄/茂盛/冰濤/蓓蕾醬/騷盆/子怡/樂高*/ *孫俊
theme by Cola Chan - powered by farbox
