微信小程序是什么
『微信小程序』是微信即公眾號之后推出的一項服務团秽。
我們提供了一種新的開放能力易核,開發(fā)者可以快速地開發(fā)一個小程序。小程序可以在微信內被便捷地獲取和傳播米碰,同時具有出色的使用體驗谷丸。
<p align = 'right' >—— 微信內測界面</p>
</br>
核心理念:
小程序是一種不需要下載安裝即可使用的應用堡掏,它實現(xiàn)了應用『觸手可及』的夢想,用戶掃一掃或搜一搜即可打開應用刨疼。也體現(xiàn)了『用完即走』的理念泉唁,用戶不關心是否安裝太多應用的問題。應用將無處不在揩慕,隨時可用亭畜,但又無需安裝卸載。
<p align = 'right' > —— 張小龍</p>
『微信小程序』 和 『小程序』 :我們需要這樣的一個小程序迎卤,它能滿足 『即搜即用拴鸵,用完即走』 的需求,而微信小程序提供的就是這樣的服務蜗搔。
如何開發(fā)
在設計方面劲藐,微信提供了詳細的設計規(guī)范,通用控件等樟凄,為設計人員提供了設計參考聘芜。
![微信小程序設計指南_·_小程序-w180](https://ws4.sinaimg.cn/large/9ac1c132jw1f89ht7ir1pj205p0itaag.jpg)
微信小程序設計指南以及 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](https://ws4.sinaimg.cn/large/9ac1c132jw1f89hu16wwwj21kw0tv41u.jpg)
MINA 生命周期:
![mina-lifecycle](https://ws4.sinaimg.cn/large/9ac1c132jw1f89hwlfysmj20ie0s6acv.jpg)
響應式單向數(shù)據(jù)流医吊。
目錄結構
項目根目錄全局文件
- app.js:小程序邏輯(生命周期、全局變量逮京、全局方法)
- app.json:小程序全局設置
- app.wxss:小程序公共樣式表
頁面目錄文件
- .js:頁面邏輯
- .wxml:頁面機構
- .wxss:頁面樣式
- .json:頁面配置
![微信小程序開發(fā)目錄結構-w758](https://ws2.sinaimg.cn/large/9ac1c132jw1f89ht2sqa0j21640p0q8y.jpg)
除了上述基本目錄結構外卿堂,開發(fā)者可以添加其它目錄,比如資源目錄懒棉,項目說明文件等草描,還可以根據(jù)頁面層級創(chuàng)建頁面子目錄,做好配置即可漓藕。
全局配置文件
![小程序全局配置](https://ws3.sinaimg.cn/large/9ac1c132jw1f89htxlj2wj20rb09sjs4.jpg)
詳細每個參見官方文檔陶珠。
邏輯層
邏輯層將數(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ù)投入挎峦,微信也許會進一步釋放它的能力香追,潛力較高。小程序如果在技術上可以獲得強大的支持坦胶,對于低頻應用(日歷等小工具類以及其它形形色色的應用)或者應用使用場景(消費類淺層級應用使用場景)的補充翅阵,還是大有可為。
具體限制:
- 不支持 HTML迁央。WXML 語法與 HTML 有差異,CSS 選擇器不支持級聯(lián)滥崩♂Γ框架并非運行在瀏覽器中,所以 JavaScript 在 web 中一些能力都無法使用钙皮,如 document蜂科,window 等。
- 源碼包大小不能超過 1M短条,單次request 傳輸數(shù)據(jù)最大 1M导匣。
- MINA 實現(xiàn)的 TabBar 最多 5 個 tab,wx.navigateTo 可推入后臺的頁面最多 5 層茸时,超過則不能打開新界面贡定。
- 沒有 WebView ,自帶 View 暫不支持圖文混排可都。
- 不支持 A 標簽缓待,無法打開普通網(wǎng)頁。
某些細節(jié)可參考官方文檔 Q&A 部分渠牲。