幾個月之前張小龍的一次公開演講第一次提到應(yīng)用號，今天終于以小程序的名字正式對外小范圍公測，只有200個邀請名額，我知道你肯定沒有被翻牌子，我也沒有。

不管是朋友圈、訂閱號、服務(wù)號，只要是搶先專注機(jī)會的人都嘗到了不小的甜頭，那么如今的小程序也一樣，很多創(chuàng)業(yè)者、開發(fā)者都躍躍欲試。

微信小程序請公測以來已經(jīng)一周了，有三類同學(xué)對詞比較關(guān)注。一是創(chuàng)業(yè)者，二是App開發(fā)者，三是前端開發(fā)者。

基于此，創(chuàng)業(yè)者可能思考更多的是能否減少成本，能否把產(chǎn)品做的更好，其中能有哪里價值和可為的事。App開發(fā)者在思考小程序?qū)pp開發(fā)的沖擊有多大？是不是像傳言一樣，小程序會搶占App的開發(fā)市場，導(dǎo)致App開發(fā)者會失業(yè)？前端開發(fā)者也許嘴角上揚(yáng)了一下，近幾年微信訂閱號、服務(wù)號、企業(yè)號已經(jīng)在帶動著H5的發(fā)展，這下小程序絕對是一個重磅炸彈。那么事實(shí)究竟是怎么樣的呢？且聽我慢慢道來。

小程序究竟能做什么

要想搞清楚這個問題，我們必須徹底的了解微信小程序是什么、它的開發(fā)流程、它的能力、它的優(yōu)點(diǎn)、它的局限性，了解了這些我們才能把它對于企業(yè)的作用發(fā)揮到最大。

首先來看看厘訊網(wǎng)是怎么說的：

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題。應(yīng)用將無處不在，隨時可用，但又無需安裝卸載。

看了這句話的人可能大概明白了“小程序”這個產(chǎn)品要做什么，它提供的能力是什么。那么它對于企業(yè)來說究竟能做什么呢？

小程序的發(fā)布與如何打開

看到張小龍的圈下面有人評論到“App Store不讓叫應(yīng)用號、蘋果想霸占App這個詞”，也許你已經(jīng)想到了，微信的小程序發(fā)布也需要微信的審核，但是時間遠(yuǎn)遠(yuǎn)沒有App Store那么長。

打開已經(jīng)發(fā)布了的微信小程序有兩種方式，一是掃二維碼、二是微信搜索，掃碼已經(jīng)可以掃了，但是目前是小范圍公測階段，所以很多人沒有體驗(yàn)的權(quán)限。微信搜索目前還沒開放出來，所以在客戶端看不到響應(yīng)的入口。在搜索出結(jié)果后點(diǎn)擊確認(rèn)后會進(jìn)入小程序的歡迎頁，歡迎頁在下面會講到。

如何把握現(xiàn)有App和小程序的度

企業(yè)主和App開發(fā)者都會思考這個問題，小程序的的出現(xiàn)對App有什么影響呢？

我認(rèn)為我們應(yīng)該保持現(xiàn)在App的迭代更新，將小程序作為一個lite版去做一些產(chǎn)品、功能性實(shí)驗(yàn)，畢竟小程序的開發(fā)成本、發(fā)布上線時間等都是相對比較低的。

有人說我們應(yīng)該把選擇權(quán)交給用戶。粗略考慮這話沒錯，我們也確實(shí)應(yīng)該在更多的渠道去抓用戶，但是我認(rèn)為我們始終應(yīng)該把握住App這個陣營，說不定微信哪天就沒落了，我們絕不能沒有自己的產(chǎn)品線。

同樣的道理，微信、支付寶很早就為淘寶、口碑、滴滴、餓了么、京東等App開了專門的用戶通道，但是用戶還是用原生App的占絕絕絕大多數(shù)。

小程序和公眾號內(nèi)嵌H5有什么區(qū)別

為什么沒有直接說小程序和公眾號的區(qū)別呢？因?yàn)樾〕绦蛟袘?yīng)用號，它也是公眾號的一種，所以我這里把它和傳統(tǒng)的公眾號內(nèi)嵌H5來做對比。

從產(chǎn)品的角度來講

之前做公眾號時，微信底部會提供菜單作為功能引導(dǎo)入口，最終的結(jié)果還是引導(dǎo)用戶到H5頁面，其實(shí)H5的體驗(yàn)和Native App的差距還是比較大的。而微信小程序吸引人的地方在于它提供了豐富的框架組件和API接口供開發(fā)者調(diào)用，具體包含：界面、視圖、內(nèi)容、按鈕、導(dǎo)航、多媒體、位置、數(shù)據(jù)、網(wǎng)絡(luò)、重力感應(yīng)等。在這些組件和接口的幫助下，運(yùn)行在微信上的小程序基本保持和Native APP一樣的流暢度，極大的提高了用戶的體驗(yàn)。

從開發(fā)的角度來講

由于不論是App、H5，它們的Server端都一樣，所以這里不討論。

之前的開發(fā)就是我們講的傳統(tǒng)的前端：html、js、css，加上微信用js提供的一些原生能力，最終的展現(xiàn)形式也是用手機(jī)內(nèi)置瀏覽器（WebView）打開我們的頁面，但是歸根結(jié)底都是H5，這種方式我們應(yīng)該熟悉的不能再熟悉了。

小程序我們可以簡單粗暴的理解為RN（React Native），用大白話來講就是用H5寫的程序，最后以Native App的方式來運(yùn)行，他們的原理都是用JS調(diào)用底層Native組件。

在寫這篇文章之前，我也親自去寫了一個Demo體驗(yàn)了一把，配置文件用.json，頁面的結(jié)構(gòu)文件用.wxml，事件與邏輯處理用.js，頁面樣式用.wxss，

小程序開發(fā)工具圖

可以把wxml理解為html、wxss理解為css，稍微有點(diǎn)變化，但是語法還是一樣的。

小程序的能力有哪些

這里說的能力除了界面、視圖、內(nèi)容、按鈕、導(dǎo)航、多媒體、位置、數(shù)據(jù)、網(wǎng)絡(luò)、重力感應(yīng)這些api大家腳后跟都能想到的能力外，介紹一些之前公眾號H5不能實(shí)現(xiàn)的功能。

一、微信導(dǎo)航欄

在傳統(tǒng)的公眾號開發(fā)時，我們不能對導(dǎo)航欄做任何的樣式定制，現(xiàn)在在小程序中我們可以定義導(dǎo)航欄的背景顏色（background-color）。但開發(fā)者需要規(guī)定小程序各個頁面的跳轉(zhuǎn)關(guān)系，讓導(dǎo)航系統(tǒng)能夠以合理的方式工作。

微信導(dǎo)航欄分為導(dǎo)航區(qū)域、標(biāo)題區(qū)域以及操作區(qū)域。其中導(dǎo)航區(qū)控制程序頁面進(jìn)程。目前導(dǎo)航欄分深淺兩種基本配色。

導(dǎo)航區(qū)（iOS、Android）：導(dǎo)航區(qū)通常只有一個操作，即返回上一級界面，而點(diǎn)擊安卓手機(jī)自帶的硬件返回鍵也起到相同作用。

導(dǎo)航欄操作演示

微信導(dǎo)航欄自定義顏色規(guī)則（iOS、Android）:小程序?qū)Ш綑谥С只镜谋尘邦伾远x功能，選擇的顏色需要在滿足可用性前提下，和諧搭配微信提供的兩套主導(dǎo)航欄圖標(biāo)。建議參考以下選色效果：

導(dǎo)航欄配色演示

二、頁面內(nèi)標(biāo)簽分頁導(dǎo)航

我們可以根據(jù)需要在頁面添加標(biāo)簽（Tab）分頁導(dǎo)航，若僅為一般線性瀏覽的頁面建議僅使用微信導(dǎo)航欄即可。

標(biāo)簽分頁欄可固定在頁面頂部或者底部，標(biāo)簽數(shù)量不得少于2個，最多不得超過5個，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過4項(xiàng)。一個頁面也不應(yīng)出現(xiàn)一組以上的標(biāo)簽分頁欄。

其中小程序首頁可使用微信提供的原生底部標(biāo)簽分頁樣式，該樣式僅供小程序首頁使用。開發(fā)時可自定義圖標(biāo)樣式、標(biāo)簽文案以及文案顏色等；小程序首頁原生底部標(biāo)簽分頁。同樣的，我們在設(shè)計的時候也注意風(fēng)格選色。

三、小程序App啟動頁

小程序啟動頁是小程序在微信內(nèi)容一定程度上展現(xiàn)品牌特征的頁面之一。本頁面將突出展示小程序品牌特征和加載狀態(tài)。啟動頁除品牌標(biāo)志（Logo）展示外，頁面上的其他所有元素如加載進(jìn)度指示，全部由微信統(tǒng)一提供，我們不用開發(fā)也不能開發(fā)。

四、小程序頁面下拉刷新與加載

在微信小程序內(nèi)，微信提供標(biāo)準(zhǔn)的頁面下拉刷新加載能力和樣式。在樣式上，微信提供了深色、淺色兩套方案，并且刷新圖標(biāo)與下拉標(biāo)示配色已捆綁，我們在開發(fā)時應(yīng)注意下拉標(biāo)識與刷新圖標(biāo)的和諧統(tǒng)一，這些下拉的交互和動畫等由微信統(tǒng)一提供，我們不需要開發(fā)。

為了防止造假與作弊，微信小程序提供了下拉刷新時的標(biāo)志，此處標(biāo)示提供深淺兩套方案，文字顏色不可自定義，我們在開發(fā)時應(yīng)注意配色要和標(biāo)志顏色明確區(qū)分。

無論在什么頁面我們都應(yīng)該告訴用戶目前的加載狀態(tài)，以免讓用戶誤以為App卡死。對于此，微信也提供了兩種頁面加載樣式。第一種可以明確的告訴用戶目前的加載狀態(tài)、進(jìn)度等；第二種由于覆蓋整個頁面無法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感，因此我們要慎用第二種。

微信小程序設(shè)計指導(dǎo)提示我們：

* 若載入時間較長，應(yīng)提供取消操作，并使用進(jìn)度條顯示載入的進(jìn)度。

* 載入過程中，應(yīng)保持動畫效果，以免用戶產(chǎn)生App卡死的錯覺。

* 不要在同一個頁面同時使用超過1個加載動畫。

注意：這里只例舉了最重要的四點(diǎn)，當(dāng)時它的能力不僅僅是這些，更多的待你去挖掘。

小程序的優(yōu)點(diǎn)和缺點(diǎn)

我始終相信凡事都是有兩面性的，而對于一個產(chǎn)品來說，它肯定有有點(diǎn)和缺點(diǎn)的，如果合理利用了它的優(yōu)點(diǎn)和缺點(diǎn)，那也是事半功倍的。

微信小程序的好處很多，不然就算騰訊推到天上去也絕不可能這么火，我就不一一例舉了，但是目前最明顯的就是不用用戶安裝我們App，就可以讓用戶體驗(yàn)到媲美Native App的流暢度。

它的缺點(diǎn)其一在于在于我們不能使用dom、window等對象了，可能限制了一些功能，但是看了微信的封裝后我覺得這也并不是壞事。

缺點(diǎn)其二是微信小程序發(fā)布時的代碼限制大小為1024kb，也許正是因?yàn)樗?，所以叫小程序吧?/p>

我們最最關(guān)心的有兩點(diǎn)：

如何獲取用戶關(guān)注度。

如何在眾多的小程序中脫穎而出博得存在感。

這兩個問題可不是精準(zhǔn)的關(guān)鍵字和美觀的UI能解決的問題，等微信小程序開放全面公測后，以目前微信小程序的熱度，到時候不知道要冒出來多少應(yīng)用呢，這是個難點(diǎn)。

微信小程序會干掉App嗎

終于回到主題了，我的觀點(diǎn)超級無敵的明確：絕對不會。js可能