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

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

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

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

小程序究竟能做什么

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

首先來(lái)看看厘訊網(wǎng)是怎么說(shuō)的：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

從開(kāi)發(fā)的角度來(lái)講

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

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

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

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

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

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

小程序的能力有哪些

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

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

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

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

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

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

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

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

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

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

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

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

三、小程序App啟動(dòng)頁(yè)

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

四、小程序頁(yè)面下拉刷新與加載

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

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

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

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

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

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

* 不要在同一個(gè)頁(yè)面同時(shí)使用超過(guò)1個(gè)加載動(dòng)畫。

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

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

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

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

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

缺點(diǎn)其二是微信小程序發(fā)布時(shí)的代碼限制大小為1024kb，也許正是因?yàn)樗。越行〕绦虬伞?/p>

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

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

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

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

微信小程序會(huì)干掉App嗎

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