微信小程序分析

微信小程序是什么

『微信小程序』是微信即公眾號之后推出的一項服務团秽。

我們提供了一種新的開放能力易核,開發(fā)者可以快速地開發(fā)一個小程序。小程序可以在微信內被便捷地獲取和傳播米碰,同時具有出色的使用體驗谷丸。
<p align = 'right' >—— 微信內測界面</p>

</br>

核心理念:
小程序是一種不需要下載安裝即可使用的應用堡掏,它實現(xiàn)了應用『觸手可及』的夢想,用戶掃一掃或搜一搜即可打開應用刨疼。也體現(xiàn)了『用完即走』的理念泉唁,用戶不關心是否安裝太多應用的問題。應用將無處不在揩慕,隨時可用亭畜,但又無需安裝卸載。
<p align = 'right' > —— 張小龍</p>

『微信小程序』『小程序』 :我們需要這樣的一個小程序迎卤,它能滿足 『即搜即用拴鸵,用完即走』 的需求,而微信小程序提供的就是這樣的服務蜗搔。

如何開發(fā)

在設計方面劲藐,微信提供了詳細的設計規(guī)范,通用控件等樟凄,為設計人員提供了設計參考聘芜。

微信小程序設計指南_·_小程序-w180
微信小程序設計指南_·_小程序-w180

微信小程序設計指南以及 UI 參考(見參考2、參考8缝龄、參考9汰现、參考10),整個指南比較簡潔叔壤。

在開發(fā)方面瞎饲,微信為開發(fā)者提供了較為完善的開發(fā)文檔,提供的接口和框架也非常的豐富炼绘。還提供了跨平臺的開發(fā)工具嗅战,使不同平臺都可以開發(fā)小程序。

組件參考:

  • 視圖容器:View俺亮、Scroll-View仗哨、Swiper
  • 基礎內容:Icon、Text铅辞、Progress
  • 表單組件:Button、CheckBox萨醒、form斟珊、Input等
  • 操作反饋:Action-Sheet、Modal、Loading
  • 導航:Navigator
  • 媒體組建:Audio囤踩、Image旨椒、Video
  • 地圖:Map
  • 畫布:Canvas

API 參考

  • 網(wǎng)絡:常規(guī)請求、上傳下載堵漱、WebSocket
  • 媒體:圖片综慎、錄音、音頻/音樂播放控制勤庐、文件操作示惊、視頻播放
  • 數(shù)據(jù):數(shù)據(jù)緩存能力
  • 位置:獲取位置、查看位置
  • 設備:網(wǎng)絡狀態(tài)愉镰、系統(tǒng)信息米罚、重力感應、羅盤
  • 界面:設置導航條丈探、導航录择、動畫、繪圖碗降、其它
  • 開放接口:登錄(簽名加密)隘竭、用戶信息、微信支付讼渊、模板消息

小程序的開發(fā)偏向組件化动看、結構化。小程序加載包到本地運行精偿,與 Web 模式有很大區(qū)別, 不能操作DOM弧圆,通過 API 與服務器交互,更像 C/S 架構的開發(fā)笔咽。適合邏輯簡單的工具型應用搔预,很強的內容封閉性。

特有格式說明

.wxss 和 .wxml 是 CSS 和 XML 的變體叶组,由微信自己定義和修改擴展的一套語言規(guī)則進行書寫拯田。

微信設計了一套框架:MINA,框架提供了自己的視圖層描述語言 WXML 和 WXSS甩十,以及基于 JavaScript 的邏輯層框架船庇,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上侣监。

框架的核心是一個響應的數(shù)據(jù)綁定系統(tǒng)鸭轮。整個系統(tǒng)分為兩塊視圖層(View)和邏輯層(App Service)
框架可以讓數(shù)據(jù)與視圖非常簡單地保持同步。當做數(shù)據(jù)修改的時候橄霉,只需要在邏輯層修改數(shù)據(jù)窃爷,視圖層就會做相應的更新。

微信的這套運行機制和 Facebook 設計的 Flux 設計模式非常的像(Flux 同 MVC 一樣是一種設計模式),而整個項目的架構和 React + Redux 非常像按厘。( Redux 是對 Flux 架構的一種實現(xiàn))

Flux 示意圖:

Flux 設計模式基礎-w2254
Flux 設計模式基礎-w2254

MINA 生命周期:

mina-lifecycle
mina-lifecycle

響應式單向數(shù)據(jù)流医吊。

目錄結構

項目根目錄全局文件

  • app.js:小程序邏輯(生命周期、全局變量逮京、全局方法)
  • app.json:小程序全局設置
  • app.wxss:小程序公共樣式表

頁面目錄文件

  • .js:頁面邏輯
  • .wxml:頁面機構
  • .wxss:頁面樣式
  • .json:頁面配置
微信小程序開發(fā)目錄結構-w758
微信小程序開發(fā)目錄結構-w758

除了上述基本目錄結構外卿堂,開發(fā)者可以添加其它目錄,比如資源目錄懒棉,項目說明文件等草描,還可以根據(jù)頁面層級創(chuàng)建頁面子目錄,做好配置即可漓藕。

全局配置文件

小程序全局配置
小程序全局配置

詳細每個參見官方文檔陶珠。

邏輯層

邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層,同時接受視圖層的事件反饋享钞。

  • 注冊程序:應用生命周期揍诽、全局變量、全局方法
  • 注冊頁面:頁面生命周期栗竖、初始化數(shù)據(jù)暑脆、事件處理方法
  • 模塊化:邏輯代碼的復用
  • API:API 的調用

詳情請查看官方文檔。

視圖層

框架的視圖層由 WXML 與 WXSS 編寫狐肢,由組件來進行展示添吗。
將邏輯層的數(shù)據(jù)反應成視圖,同時將視圖層的事件發(fā)送給邏輯層份名。
WXML(WeiXin Markup language)用于描述頁面的結構碟联。
WXSS(WeiXin Style Sheet)用于描述頁面的樣式。
組件(Component)是視圖的基本組成單元僵腺。

  • WXML:微信設計的一套標簽語言鲤孵,用于構建頁面。
    • 數(shù)據(jù)綁定:Mustache 語法包裝辰如,支持邏輯判斷和基本運算
    • 條件渲染:依據(jù)條件渲染不同的視圖
    • 列表渲染:重復渲染組件
    • 模板:復用自定義組合的視圖
    • 事件:視圖層到邏輯層的通訊方式
    • 引用:視圖代碼復用
  • WXSS:微信對 CSS 的修改和擴展普监,具有 CSS 的大部分特性。

WXSS 擴展的特性:

  • 尺寸單位
  • 樣式導入

語言細節(jié)參考官方文檔琉兜。

分析

微信在發(fā)布的五年時間中從一個移動端熟人社交軟件開始向著構建微信社交生態(tài)方向發(fā)展凯正。如果說公眾號是內容生產(chǎn)者的狂歡,為信息的分享傳播提供了良好的入口豌蟋,那么小程序就為開發(fā)者人員構建微服務提供了良好的支持廊散,大大的降低了開發(fā)維護推廣成本。依靠微信平臺還可以獲得可觀的流量梧疲,為創(chuàng)業(yè)者減輕了資金壓力奸汇,從而專注于提供優(yōu)秀的服務施符。像教育、醫(yī)療擂找、家政、求職招聘浩销、二手買賣贯涎、旅游、票務慢洋、汽車后市場等塘雳,這些領域有的強調支付場景、有的低頻非剛需普筹,都非常適合在小程序上發(fā)力败明。

現(xiàn)在已經(jīng)出現(xiàn)很多觀點表示小程序具有某種顛覆的能力,但我個人認為依照目前微信小程序的表現(xiàn)太防,談顛覆為時過早妻顶。

從產(chǎn)品角度來說,小程序能力和使用場景的限制蜒车,就意味在設計上要非常謹慎讳嘱,過于復雜的交互和較深的層級都會破壞使用體驗。其實從張小龍所描述的『用完即走』的理念酿愧,我們可以思考沥潭,符合這種情況的恰恰就是那些不需要長時間駐留、層級扁平嬉挡、提供便捷服務的小程序钝鸽,同樣這樣的程序我們隨用隨下。另一方面低成本和低門檻也意味著會產(chǎn)生一大批垃圾應用庞钢,所以嚴格的審查機制是必須的拔恰。但是隨著 APP 市場變大,審核效率就會成為瓶頸焊夸,這和人們認為的快速迭代是相矛盾的仁连。因此,如何做審核是微信需要好好思考的問題阱穗。

從研發(fā)的角度看饭冬,小程序并不存在技術上的創(chuàng)新,Web App 和 Native App 的爭論從沒有停止過揪阶,哪怕現(xiàn)在非巢伲火熱的 RN 也沒有表現(xiàn)出完全取代原生的能力,所以小程序在技術創(chuàng)新上是否能走遠鲁僚,這還值得商榷炊苫。

總結

缺點:
因為一些安全和其它方面的考慮裁厅,小程序的能力被限制,禁錮了小程序的能力侨艾。

  • 目前限制應用包大小為 1024 kb 执虹。
  • 微信開放接口 API 較少。
  • 僅限于小應用的能力唠梨,想要實現(xiàn)復雜應用能力上還不足袋励。
  • 在多層級使用場景以及需要跳轉類的需求上劣勢明顯。

優(yōu)點:

  • 比傳統(tǒng)的 Hybird 應用在操作體驗上当叭,它具有更快茬故、更流暢的應用體驗,擺脫混合應用對瀏覽器性能的依賴且能夠調用系統(tǒng)原生接口蚁鳖,有一定的數(shù)據(jù)緩存能力磺芭。
  • 比 React Native 類應用,更輕量級醉箕。
  • 比 Native App 钾腺,則勝在開發(fā)周期短、投入成本低琅攘、使用便捷垮庐,且依托微信龐大的用戶基礎和粘性,可以迅速引流坞琴,驗證產(chǎn)品模式和用戶需求哨查。

小程序在開發(fā)上不具有太高難度,更要考量的是作為產(chǎn)品或服務的設計和使用場景的優(yōu)化上剧辐,微信小程序的真正優(yōu)勢在于開發(fā)成本低寒亥、更快速的迭代,可以快速測試用戶需求荧关,而不是技術上的顛覆溉奕。對于創(chuàng)業(yè)者和小公司來說,是一個快速啟動的方式忍啤。但對于希望走的更遠的企業(yè)加勤,原生或 RN 類 APP 目前還繞不過去,微信小程序只能作為一個產(chǎn)品填補式的存在同波,當然這些還需要具體產(chǎn)品具體規(guī)劃鳄梅。

通過上述信息我們可以這樣認為,小程序是一個可通過 Web 技術棧開發(fā)未檩,使用微信框架調用原生功能的類 Web 小應用戴尸,小體現(xiàn)在它本身的能力受微信的規(guī)則和框架的限制。這種形式僅僅在操作體驗上優(yōu)于傳統(tǒng) Hybird 開發(fā)的應用冤狡,與 React Native 開發(fā)復雜應用的能力要低太多孙蒙,目前不在一個層次上∠钐模現(xiàn)階段所展現(xiàn)的能力受限,隨著用戶和開發(fā)者的持續(xù)投入挎峦,微信也許會進一步釋放它的能力香追,潛力較高。小程序如果在技術上可以獲得強大的支持坦胶,對于低頻應用(日歷等小工具類以及其它形形色色的應用)或者應用使用場景(消費類淺層級應用使用場景)的補充翅阵,還是大有可為。

具體限制:

  1. 不支持 HTML迁央。WXML 語法與 HTML 有差異,CSS 選擇器不支持級聯(lián)滥崩♂Γ框架并非運行在瀏覽器中,所以 JavaScript 在 web 中一些能力都無法使用钙皮,如 document蜂科,window 等。
  2. 源碼包大小不能超過 1M短条,單次request 傳輸數(shù)據(jù)最大 1M导匣。
  3. MINA 實現(xiàn)的 TabBar 最多 5 個 tab,wx.navigateTo 可推入后臺的頁面最多 5 層茸时,超過則不能打開新界面贡定。
  4. 沒有 WebView ,自帶 View 暫不支持圖文混排可都。
  5. 不支持 A 標簽缓待,無法打開普通網(wǎng)頁。

某些細節(jié)可參考官方文檔 Q&A 部分渠牲。

參考

  1. 微信小程序開發(fā)文檔
  2. 微信小程序設計指南
  3. 微信小程序開發(fā)工具下載
  4. 官方QuickStartDemo
  5. 官方體驗Demo
  6. 微信小程序『官方示例代碼』淺析:上
  7. 微信小程序『官方示例代碼』淺析:下
  8. 微信基礎樣式庫參考
  9. We-UI_Sketch組件庫
  10. We-UI_PS組件庫
  11. 其它
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末旋炒,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子签杈,更是在濱河造成了極大的恐慌瘫镇,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件答姥,死亡現(xiàn)場離奇詭異铣除,居然都是意外死亡,警方通過查閱死者的電腦和手機踢涌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門通孽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人睁壁,你說我怎么就攤上這事背苦』グ疲” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵行剂,是天一觀的道長秕噪。 經(jīng)常有香客問我,道長厚宰,這世上最難降的妖魔是什么腌巾? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮铲觉,結果婚禮上澈蝙,老公的妹妹穿的比我還像新娘。我一直安慰自己撵幽,他們只是感情好灯荧,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盐杂,像睡著了一般逗载。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上链烈,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天厉斟,我揣著相機與錄音,去河邊找鬼强衡。 笑死擦秽,一個胖子當著我的面吹牛,可吹牛的內容都是我干的食侮。 我是一名探鬼主播号涯,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼锯七!你這毒婦竟也來了链快?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤眉尸,失蹤者是張志新(化名)和其女友劉穎域蜗,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體噪猾,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡霉祸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了袱蜡。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丝蹭。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖坪蚁,靈堂內的尸體忽然破棺而出奔穿,到底是詐尸還是另有隱情镜沽,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布贱田,位于F島的核電站缅茉,受9級特大地震影響,放射性物質發(fā)生泄漏男摧。R本人自食惡果不足惜蔬墩,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望耗拓。 院中可真熱鬧拇颅,春花似錦、人聲如沸乔询。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哥谷。三九已至,卻和暖如春麻献,著一層夾襖步出監(jiān)牢的瞬間们妥,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工勉吻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留监婶,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓齿桃,卻偏偏與公主長得像惑惶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子短纵,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內容