[[173754]]

Hello！大家好，我是51CTO學(xué)院講師李寧，在學(xué)院11.11（全民IT學(xué)習(xí)節(jié)）到來之際，寫了這篇技術(shù)文章，和大家分享一下。正文來啦~~~

最近朋友圈已經(jīng)被微信小程序刷屏了，這也難怪，騰訊的產(chǎn)品擁有廣泛的影響力，隨便推出個(gè)東西，都會(huì)有很多人認(rèn)為會(huì)改變世界，這不，張小龍剛一發(fā)布微信小程序的消息，很多人(技術(shù)的和非技術(shù)的)就跟打了雞血似的，估計(jì)現(xiàn)在已經(jīng)雞血告急了!

我也看了網(wǎng)上的一些關(guān)于微信小程序的文章，估計(jì)那幫家伙連微信小程序是什么都沒搞清楚，就在那里一本正經(jīng)地胡說八道。好吧!我就通過本文讓大家了解一些什么是微信小程序，以及微信小程序到底能為我們帶來什么。

關(guān)于微信小程序的誤解和討論已經(jīng)太多了。這里就說一些主要的。

1. 微信小程序與Web(B/S)的關(guān)系

2. 小程序的性能可能不如原生App

3. 騰訊要做一個(gè)AppStore，和蘋果、Google對(duì)掐

4. 由于微信小程序入口太深，對(duì)于高頻應(yīng)用不適合

5. 微信小程序會(huì)逐漸取代原生App，原生App必將沒落

1. 微信小程序與Web(B/S)的關(guān)系

由于之前有微信公眾號(hào)，而公眾號(hào)里面的程序其實(shí)就是將移動(dòng)Web(主要是HTML5、CSS、JavaScript等技術(shù))嵌入到微信中，當(dāng)然，會(huì)調(diào)用一些微信提供的API。所以，很多人自然而然會(huì)想到，微信小程序用的也是HTML5。不過說實(shí)話，微信小程序和HTML5、甚至和Web，一毛錢關(guān)系都沒用。因?yàn)閃eb就是性能低下的代名詞，尤其對(duì)于那些追求***、有強(qiáng)迫癥的家伙，在手機(jī)上使用Web簡(jiǎn)直不能忍受。千萬別說，等以后手機(jī)性能會(huì)和現(xiàn)在的PC一樣牛叉就好了，哈哈，等到那時(shí)候，就會(huì)出現(xiàn)比手機(jī)更牛叉，更小巧，當(dāng)然，性能也更差的設(shè)備，如果手機(jī)成為了PC，那么這些新出現(xiàn)的設(shè)備將會(huì)取代現(xiàn)在手機(jī)的位置。就像永遠(yuǎn)等待新產(chǎn)品降價(jià)再買，真的降價(jià)了，又會(huì)有更好的產(chǎn)品問世，既享受新產(chǎn)品，又享受低價(jià)的時(shí)候永遠(yuǎn)不會(huì)到來。

既然說微信小程序和Web一點(diǎn)關(guān)系都沒有，那么有什么證據(jù)呢?這一點(diǎn)從官方文檔的描述就可以看出。感興趣的讀者可以通過下面的地址查看微信小程序官方文檔。

https://mp.weixin.qq.com/wiki

微信小程序分為工程和頁面兩部分，工程由三個(gè)文件組成：app.js、app.json和app.wxss。其中app.js是JavaScript文件，用于編寫全局的事件，如微信小程序啟動(dòng)時(shí)要執(zhí)行的代碼，有點(diǎn)像iOS工程中AppDelegate.m文件的作用。app.json用于配置微信小程序，如由哪些頁面組成，有點(diǎn)像Android工程中AndroidManifest.xml文件的作用。app.wxss是公共樣式表，用于設(shè)置整個(gè)工程都可以使用的樣式，有點(diǎn)像Android中theme或style資源，全局都可以使用。

可能有人會(huì)問，微信小程序不是使用了JavaScript嗎?難道和Web沒有關(guān)系。誰告訴你JavaScript和Web有關(guān)系了，JavaScript只是一種語言，未必用在Web上，JavaScript同樣可以用在服務(wù)端，如Node.js。

微信小程序的頁面部分由4個(gè)文件組成。這里的頁面實(shí)際上就是窗口。假設(shè)頁面名字為index，那么該頁面由index.js、index.wxml、index.wxss和index.json組成。index.js用于編寫頁面的邏輯代碼。index.wxml是騰訊自己設(shè)計(jì)的一種標(biāo)記語言，可以稱為微信標(biāo)記語言，用于描述UI的。index.wxss是針對(duì)該頁面的樣式表，私有的。index.json是針對(duì)頁面的配置文件。

這里關(guān)鍵點(diǎn)是index.wxss。這東西似曾相識(shí)，用過React Native的讀者應(yīng)該很熟悉JSX，一種描述UI的類XML語言。它的基本原理是通過XML文件描述UI，并動(dòng)態(tài)創(chuàng)建原生的UI。例如，React Native用View來描述頂層視圖，用Text來描述文本輸出控件，那么，我們可以使用下面的代碼來模擬這一動(dòng)態(tài)創(chuàng)建過程。

Android：

View component = null;  
if(tag == “View”)  
{  
component = new ViewGroup(…);  
}  
else if(tag == “Text”)  
{  
component = new TextView(…);  
} 

iOS：

UIView *component;  
if(tag == “View”)  
{  
component = [UIView new];  
}  
else if(tag == “Text”)  
{  
component = [UILabel new];  
} 

上面描述的是基本的動(dòng)態(tài)創(chuàng)建組件的過程，當(dāng)然，實(shí)際實(shí)現(xiàn)要比這個(gè)復(fù)雜的多，這里只做了原理上的描述。很顯然，系統(tǒng)會(huì)根據(jù)不同平臺(tái)，以及在JSX中的描述，生成不同的原生組件。

微信小程序的原理類似，對(duì)于React Native來說，使用的是JSX，而微信小程序用的是wxml(微信標(biāo)記語言)，一種騰訊自己設(shè)計(jì)的類JSX的語言，下面是wxml的代碼示例。

<view class="container"> 
<view bindtap="bindViewTap" class="userinfo"> 
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> 
<text class="userinfo-nickname">{{userInfo.nickName}}</text> 
</view> 
<view class="usermotto"> 
<text class="user-motto">{{motto}}</text> 
</view> 
</view> 

下面則是JSX的代碼示例。

<View style={{flex:1}}>  
<DrawerLayoutAndroid  
ref={drawerLayoutAndroid => { this.drawerLayoutAndroid = drawerLayoutAndroid; }}drawerWidth={150}  
drawerPosition={DrawerLayoutAndroid.positions.left}  
renderNavigationView={() =>navigationView}>  
<View style={{flex: 1, alignItems:'center'}}>  
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>我是主布局內(nèi)容</Text>  
</View>  
</DrawerLayoutAndroid>  
<View style={{flexDirection:'row'}}>  
<Text style={{flex:1}} onPress={this.onPress.bind(this)}>Open</Text>  
<Text style={{flex:1}}  
onPress={()=>this.drawerLayoutAndroid.closeDrawer(0)}>Close</Text>  
</View>  
</View> 

從上面兩段代碼可以看出，JSX和wxml非常類似，只是具體的組件名稱和命名風(fēng)格不同，例如，JSX所有組件名稱首字母都大寫(如Text)，而wxml所有組件名稱首字母都小寫(如text)，其他的還有組件屬性有一定的差異。

不管JSX和wxml的代碼風(fēng)格是否一樣，系統(tǒng)處理他們的原理都是一樣的，就是根據(jù)這些代碼自動(dòng)生成原生的組件，就像前面描述的動(dòng)態(tài)創(chuàng)建原生組件的過程一樣。

原生和熱布局混合開發(fā)

盡管本文的主標(biāo)題是微信小程序，不過核心要點(diǎn)則是原生和熱布局混合開發(fā)。這里只是用微信小程序做一個(gè)引子。由于目前移動(dòng)平臺(tái)主要有Android和iOS。這兩個(gè)平臺(tái)使用的開發(fā)技術(shù)完全不同(前者主要使用Java，后者主要使用OC或Swift)，所以就需要有一種可以同時(shí)開發(fā)兩種平臺(tái)的技術(shù)，這樣理論上開發(fā)成本可以節(jié)省一半。

以前比較流行的技術(shù)是混合開發(fā)(Hybird),這種技術(shù)很簡(jiǎn)單，就是HTML5+CSS+JavaScript的結(jié)合。它和木桶原理一樣，木桶裝多少水，是由最短那個(gè)模板決定的，而這三個(gè)組合，HTML5就成為那個(gè)短板，從而拖慢了Hybird的整體性能。

其實(shí)對(duì)于Hybird技術(shù)，我們只需要其中的兩個(gè)優(yōu)勢(shì)：跨平臺(tái)和熱更新?？缙脚_(tái)很好理解，各個(gè)平臺(tái)都會(huì)有Web瀏覽器，而熱更新主要是邏輯代碼和UI布局的熱更新。邏輯代碼這個(gè)不用操心，熱更新就用JavaScript好了，這里主要討論UI布局的熱更新。在Hybird時(shí)代，使用的是HTML5和CSS。這個(gè)組合的熱更新沒問題，但性能有問題，如果把HTML5組件和原生的組件放到同一個(gè)窗口，是可以感覺到他們的不同的。所以現(xiàn)在的主要焦點(diǎn)集中在UI布局既可以實(shí)現(xiàn)熱更新，性能達(dá)到或接近原生組件。HTML5達(dá)到了前者的要求，但沒有達(dá)到后者的要求。我們知道，Android布局使用了Layout，iOS布局使用了storyboard，不管是那種技術(shù)，都不支持熱更新，都是固化到apk和ipa文件中的。不過，這兩種技術(shù)都支持動(dòng)態(tài)創(chuàng)建組件，所以React Native率先推出了利用JSX描述組件的位置、尺寸以及其他屬性，然后再根據(jù)這些屬性動(dòng)態(tài)創(chuàng)建本地組件的技術(shù)。其實(shí)JSX會(huì)生成一種中間狀態(tài)，我們可以稱為虛擬DOM(Virtual DOM)，其實(shí)就是一種中間組件而已，然后系統(tǒng)會(huì)根據(jù)運(yùn)行平臺(tái)的不同(Android和iOS)，將其動(dòng)態(tài)生成不同平臺(tái)的原生組件，這樣很容易實(shí)現(xiàn)熱更新，因?yàn)镴SX就是個(gè)普通的文本文件，誰都可以從網(wǎng)絡(luò)上下載，這一點(diǎn)和HTML5相同。由于組件都是動(dòng)態(tài)創(chuàng)建的原生程序，所以和在Layout、storyboard中定義的靜態(tài)原生組件的性能相同，因此，很容易解決前面描述的問題。我們也可以把這種利用XML或其他格式描述UI布局，并實(shí)現(xiàn)動(dòng)態(tài)生成原生組件的技術(shù)稱為原生熱布局。

微信小程序借鑒了React Native的原理。所不同的是，React Native是通用的，而且可以任意擴(kuò)展。而微信小程序必須運(yùn)行在微信提供的架構(gòu)上，是一種寄生的原生熱布局。

其實(shí)，除了React Native和微信小程序，還有阿里巴巴的Weex(http://alibaba.github.io/weex),這是阿里巴巴前端團(tuán)隊(duì)發(fā)布的一個(gè)開源框架，有興趣的讀者可以到這個(gè)地址研究下這些框架。也是用了類似Virtual DOM的技術(shù)，可以三位一體(Android/iOS/HTML5)，這一點(diǎn)，React Native對(duì)應(yīng)的React.js可以生產(chǎn)HTML5，微信小程序理論上也可以。希望以后能推出類似的技術(shù)，開發(fā)微信小程序的同時(shí)，也可以同時(shí)開發(fā)基于HTML5的微信公眾號(hào)。

通過原生熱布局的應(yīng)用，App的性能完全可以和原生媲美(其實(shí)就是動(dòng)態(tài)生成的原生組件)，目前已經(jīng)有很多類似的框架問世，相信以后會(huì)更多。相信這些原生熱布局的方式以后會(huì)在很長(zhǎng)一段時(shí)間成為跨平臺(tái)開發(fā)的主流，因?yàn)樗念佒祵?shí)在太高了!

組件與變量綁定

微信小程序有一個(gè)比較有意思的特性，就是可以將組件和變量進(jìn)行綁定，當(dāng)更新組件時(shí)(如text)，只需修改變量的值，組件就會(huì)做相應(yīng)的更新，這一點(diǎn)區(qū)別于傳統(tǒng)更新組件的方式：通過id或name引用組件，然后使用組件中相關(guān)方式或?qū)傩赃M(jìn)行更新。例如，下面的代碼：

<text class="user-motto">{{motto}}</text>  

其中motto是一個(gè)變量，在index.js文件中定義，代碼如下：

var app = getApp() 
Page({ 
data: { 
motto: 'Hello World', 
userInfo: {} 
}, 
…… 
}) 

現(xiàn)在只需要修改data中的motto變量的值，text組件就會(huì)自動(dòng)顯示該變量的值。

其實(shí)React Native也同樣采用了這種方式，只不過React Native也可以采用直接引用組件的方式來更新組件。

2. 小程序的性能可能不如原生App

這個(gè)問題前面已經(jīng)回答了，小程序采用了動(dòng)態(tài)生成原生組件的方式。不管里面具體是如何做的，總之，要想讓性能達(dá)到原生App的程度，除了使用原生組件外，沒有其他方式。HTML5再怎么優(yōu)化，也不可能有原生App的性能。就和汽車速度再快，也不可能超過飛機(jī)的速度，因?yàn)檫\(yùn)動(dòng)介子不同，也就決定了他的極限。

3. 騰訊要做一個(gè)AppStore，和蘋果、Google對(duì)掐

好吧！持這種觀點(diǎn)的同學(xué)應(yīng)該比較富有想象力。當(dāng)然，小程序需要運(yùn)行在微信中，這是毫無疑問的，從表面上看，確實(shí)和AppStore比較像。不過騰訊可能只想做個(gè)小程序(你們想多了)，因?yàn)槲⑿旁趪?guó)內(nèi)的用戶增長(zhǎng)量已經(jīng)到了極限，不可能有大的飛躍了。騰訊繼續(xù)另一個(gè)東西來刺激增長(zhǎng)，也許是來自投資人的壓力，或來自盈利的壓力，騰訊每隔一段時(shí)間必須做點(diǎn)什么，從QQ到微信，再從微信到小程序，就是這樣，如果不出所料，在若干年后，如果騰訊還存在的話，可能會(huì)推出其他什么東西，估計(jì)到時(shí)應(yīng)該會(huì)有很多人說，這東西必將取代微信小程序，_^_。

當(dāng)然，還有人說，騰訊是要做個(gè)OS，其實(shí)這就扯遠(yuǎn)了，騰訊是互聯(lián)網(wǎng)公司，不是軟件公司，做OS不是他的強(qiáng)項(xiàng)。再說，小程序和OS差著十萬八千里呢!其實(shí)微信小程序就是借用了React Native的原理(在RN出現(xiàn)的同時(shí)，騰訊一直在研究這種技術(shù)，估計(jì)是為微信小程序做技術(shù)上的儲(chǔ)備)，將原始熱布局嵌入到了微信，并提供了一些公開的接口的微信擴(kuò)展。我覺得將微信小程序定義為微信擴(kuò)展更合適。

4. 由于微信小程序入口太深，對(duì)于高頻應(yīng)用不適合

入口太深，弄淺就好了。Android和iOS很容易直接將App中的功能作為單獨(dú)的App安裝在系統(tǒng)上，作為***層的圖標(biāo)，這只是技術(shù)問題而已，對(duì)于騰訊都不是問題。

5. 微信小程序會(huì)逐漸取代原生App，原生App必將沒落

都說了，小程序是微信的擴(kuò)展，而且由于其封閉性，無法讓程序員自由擴(kuò)展(微信是不可能開源的)，所以小程序不能像React Native一樣可以開發(fā)各種App，只是作為微信的一種補(bǔ)充而已。所以原生App在未來仍然將作為主流。當(dāng)然，也會(huì)帶來一些不同，可憐的技術(shù)哥又多了一個(gè)活，就是除了原生App、微信公眾號(hào)外，還要開發(fā)微信小程序!好吧，祝技術(shù)哥好運(yùn)！

微信小程序的開發(fā)

騰訊自己做了一款小程序開發(fā)工具，讀者可以從下面的地址下載。

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=1475052047016

下面是截圖

看樣子還不錯(cuò)，不過必須要有App ID才能進(jìn)行開發(fā)。目前小程序在內(nèi)測(cè)階段，只有受到邀請(qǐng)才能自己生產(chǎn)App ID。不過大家可以看一下官方的文檔，基本可以了解開發(fā)的過程。在該頁面也包含了小程序中的API和組件列表，和React Native相當(dāng)接近。

學(xué)習(xí)微信小程序的前導(dǎo)技術(shù)

小程序邏輯代碼使用的JavaScript，所以要想編寫小程序，必須學(xué)會(huì)JavaScript，除了JavaScript外，讀者可以先研究一下React Native技術(shù)，因?yàn)檫@種技術(shù)和小程序非常類似，基本上RN學(xué)會(huì)后，開發(fā)小程序就會(huì)變得非常輕松。為了讓讀者盡快進(jìn)入微信小程序的世界，我特意開發(fā)了JavaScript和React Native的視頻課程套餐：http://edu.51cto.com/pack/view/id-714.html通過該套餐，讀者可以為學(xué)習(xí)小程序做充分的準(zhǔn)備。

李寧老師簡(jiǎn)介：

東北大學(xué)計(jì)算機(jī)專業(yè)碩士，51CTO專家博主。曾任沈陽東軟股份項(xiàng)目經(jīng)理，從事軟件研究和開發(fā)十余年。長(zhǎng)久以來一直從事Java、Android(應(yīng)用和底層)、C++、Objective-C以及跨平臺(tái)游戲引擎(Cocos2d-x、Unity3D等)的開發(fā)和技術(shù)指導(dǎo)工作。對(duì)國(guó)內(nèi)外相關(guān)領(lǐng)域的技術(shù)、理論和實(shí)踐有很深的理解和研究。

主要著作包括《Android開發(fā)權(quán)威指南(第二版)》、《Android開發(fā)完全講義(第二版)》、《Android高新之路面試寶典》、《Android深度探索(卷1)：HAL與驅(qū)動(dòng)開發(fā)》、《Android應(yīng)用開發(fā)實(shí)戰(zhàn)(第二版)》、《Java Web開發(fā)技術(shù)大全：JSP+Servlet+Struts+Hibernate+Spring》等暢銷書。