微信小程序：原生熱佈局終將改變世界

關於本文的全部觀點都是網上收集，與做者本人沒有任何關係！

 

       最近朋友圈已經被微信小程序刷屏了，這也難怪，騰訊的產品擁有普遍的影響力，誰便推出個東西，都會有不少人認爲會改變世界，這不，張小龍剛一發布微信小程序的消息，不少人（技術的和非技術的）就跟打了雞血似的，估計如今已經雞血告急了！

我也看了網上的一些關於微信小程序的文章，估計那幫傢伙連微信小程序是什麼都沒搞清楚，就在那裏一本正經地胡說八道。好吧，我就經過本文讓你們瞭解一些什麼是微信小程序，以及微信小程序到底能爲咱們帶來什麼。

關於微信小程序的誤解和討論已經太多了。這裏就說一些主要的。

1.  微信小程序與Web（B/S）的關係

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

3.  騰訊要作一個AppStore，和蘋果、Google對掐

4.  因爲微信小程序入口太深，對於高頻應用不適合

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

 

1. 微信小程序與Web（B/S）的關係

     因爲以前有微信公衆號，而公衆號裏面的程序其實就是將移動Web（主要是HTML五、CSS、JavaScript等技術）嵌入到微信中，固然，會調用一些微信提供的API。因此不少人天然而然會想到，微信小程序用的也是HTML5。不過說實話，微信小程序和HTML五、甚至和Web，一毛錢關係都沒用。由於Web就是性能低下的代名詞，尤爲對於那些最求完美、有強迫症的傢伙，在手機上使用Web簡直不能忍受。千萬別說，等之後手機性能會和如今的PC同樣牛叉就行了，哈哈，等到那時候，就會出現比手機更牛叉，更小巧，固然，性能也更差的設備，若是手機成爲了PC，那麼這些新出現的設備將會取代如今手機的位置。就像永遠等待新產品降價再買，真的降價了，又會有更好的產品問世，既享受新產品，又享受低價的時候將永遠不會到來。

既然說微信小程序和Web一點關係都沒有，那麼有什麼證據呢？這一點從官方文檔的描述就能夠看出。感興趣的讀者能夠經過下面的地址查看微信小程序官方文檔。

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

    微信小程序分爲工程和頁面兩部分，工程由三個文件組成：app.js、app.json和app.wxss。其中app.js是JavaScript文件，用於編寫全局的事件，如微信小程序啓動時要執行的代碼，有點像iOS工程中AppDelegate.m文件的做用。app.json用於配置微信小程序，如由哪些頁面組成，有點像Android工程中AndroidManifest.xml文件的做用。app.wxss是公共樣式表，用於設置整個工程均可以使用的樣式，有點像Android中theme或style資源，全局均可以使用。

可能有人會問，微信小程序不是使用了JavaScript嗎？難道和Web沒有關係。誰告訴你JavaScript和Web有關係了，JavaScript只是一種語言，未必用在Web上，JavaScript一樣能夠用在服務端，如Node.js。

    微信小程序的頁面部分由4個文件組成。這裏的頁面實際上就是窗口。假設頁面名字爲index，那麼該頁面由index.js、index.wxml、index.wxss和index.json組成。index.js用於編寫頁面的邏輯代碼、index.wxml是騰訊本身設計的一種標記語言，能夠稱爲微信標記語言，用於描述UI的、index.wxss是針對該頁面的樣式表，私有的。index.json是針對頁面的配置文件。

    這裏關鍵點是index.wxss。這東西似曾相識，用過React Native的讀者應該很熟悉JSX，一種描述UI的類XML語言。其基本原理是經過XML文件描述UI，並動態建立原生的UI。例如，React Native用View來描述頂層視圖，用Text來描述文本輸出控件，那麼咱們可使用下面的代碼來模擬這一動態建立過程。

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];
}

　　

      上面描述的是基本的動態建立組件的過程，固然，實際實現要比這個複雜的多，這裏只作了原理上的描述。很顯然，系統會根據不一樣平臺，以及在JSX中的描述，生成不一樣的原生組件。

微信小程序的原理相似，對於React Native來講，使用的是JSX，而微信小程序用的是wxml（微信標記語言），一種騰訊本身設計的類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'}}>我是主佈局內容</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很是相似，只是具體的組件名稱和命名風格不一樣，例如，JSX全部組件名稱首字母都大寫（如Text），而wxml全部組件名稱首字母都小寫（如text），其餘的還有組件屬性有必定的差別。

無論JSX和wxml的代碼風格是否同樣，系統處理他們的原理都是同樣的，就是根據這些代碼自動生成原生的組件，就像前面描述的動態建立原生組件的過程同樣。

原生和熱佈局混合開發

      儘管本文的主標題是微信小程序，不過核心要點則是原生和熱佈局混合開發。這裏只是用微信小程序作一個引子。因爲目前移動平臺主要有Android和iOS。這兩個平臺使用的開發技術徹底不一樣（前者主要使用Java，後者主要使用OC或Swift），因此就須要有一種能夠同時開發兩種平臺的技術，這樣理論上開發成本能夠節省一半。

之前比較流行的技術是混合開發（Hybird）,這種技術很簡單，就是HTML5+CSS+JavaScript的結合。就和木桶原理同樣，木桶裝多少水，是由最短那個模板決定的，而這三個組合，HTML5就成爲那個短板，從而拖慢了Hybird的總體性能。

     其實對於Hybird技術，咱們只須要其中的兩個優點：跨平臺和熱更新。跨平臺很好理解，各個平臺都會有Web瀏覽器，而熱更新主要是邏輯代碼和UI佈局的熱更新。邏輯代碼這個不用操心，熱更新就用JavaScript好了，這裏主要討論UI佈局的熱更新。在Hybird時代，使用的是HTML5和CSS。這東西熱更新沒問題，但性能有問題，若是把HTML5組件和原生的組件放到同一個窗口，是能夠感受到他們的不一樣的。因此如今的主要焦點集中在UI佈局既能夠實現熱更新，性能達到或接近原生組件。HTML5達到了前者的要求，但沒有達到後者的要求。咱們知道，Android佈局使用了Layout，iOS佈局使用了storyboard，不論是那種技術，都不支持熱更新，都是固化到apk和ipa文件中的。不過這兩種技術都支持動態建立組件，因此React Native率先推出了利用JSX描述組件的位置、尺寸以及其餘屬性，而後再根據這些屬性動態建立本地組件的技術。其實JSX會生成一種中間狀態，咱們能夠稱爲虛擬DOM（Virtual DOM），其實就是一種中間組件而已，而後系統會根據運行平臺的不一樣（Android和iOS），將其動態生成不一樣平臺的原生組件，這樣很容易實現熱更新，由於JSX就是個普通的文本文件，能夠誰便從網絡上下載，這一點和HTML5相同。因爲組件都是動態建立的原生的，因此和在Layout、storyboard中定義的靜態原生組件的性能相同，所以，很容易解決前面描述的問題。咱們也能夠把這種利用XML或其餘格式描述UI佈局，並實現動態生成原生組件的技術稱爲原生熱佈局。

    微信小程序借鑑了React Native的原理。所不一樣的是，React Native是通用的，並且能夠任意擴展。而微信小程序必須運行在微信提供的架構上，是一種寄生的原生熱佈局。

    其實，除了React Native和微信小程序，還有阿里巴巴的Weex（http://alibaba.github.io/weex）,這是阿里巴巴前端團隊發佈的一個開源框架，有興趣的讀者能夠到這個地址研究下這些框架。也是用了相似Virtual DOM的技術，能夠三位一體（Android/iOS/HTML5），這一點，React Native對應的React.js能夠生產HTML5，微信小程序理論上也能夠。但願之後能推出相似的技術，開發微信小程序的同時，也能夠同時開發基於HTML5的微信公衆號。

   經過原生熱佈局的應用，App的性能徹底能夠和原生媲美（其實就是動態生成的原生組件），目前已經有不少相似的框架問世，相信之後會更多。相信這些原生熱佈局的方式之後會在很長一段時間成爲跨平臺開發的主流，由於她的顏值實在過高了！

 

組件與變量綁定

     微信小程序有一個比較有意思的特性，就是能夠將組件和變量進行綁定，當更新組件時（如text），只需修改變量的值，組件就會作相應的更新，這一點區別於傳統更新組件的方式：經過id或name引用組件，而後使用組件中相關方式或屬性進行更新。例如，下面的代碼

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

    其中motto是一個變量，在index.js文件中定義，代碼以下：

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

　　

如今只須要修改data中的motto變量的值，text組件就會自動顯示該變量的值。

其實React Native也一樣採用了這種方式，只不過React Native也能夠採用直接引用組件的方式來更新組件。

 

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

這個問題前面已經回答了，小程序採用了動態生成原生組件的方式。無論裏面具體是如何作的，總之，要想讓性能達到原生App的程度，除了使用原生組件外，沒有其餘方式。HTML5再怎麼優化，也不可能有原生App的性能。就和汽車速度再快，也不可能超過飛機的速度，由於運動介子不一樣，也就決定了他的極限。

3.  騰訊要作一個AppStore，和蘋果、Google對掐

好吧，持這種觀點的同窗應該比較富有想象力。固然，小程序須要運行在微信中，這是毫無疑問的，從表面上看，確實和AppStore比較像。不過騰訊可能只想作個小程序（大家想多了），由於微信在國內的用戶增加量已經到了極限，不可能有大的飛躍了。騰訊繼續另外一個東西來刺激增加，也許是來自投資人的壓力，或來自盈利的壓力，騰訊在隔一段時間必須作點什麼，從QQ到微信，再從微信到小程序，就是這樣，若是不出所料，在若干年後，若是騰訊還存在的話，可能會推出其餘什麼東西，估計到時應該會有不少人說，這東西必將取代微信小程序，_^_。

固然，還有人說，騰訊是要作個OS，其實這就扯遠了，騰訊是互聯網公司，不是軟件公司，作OS不是他的強項。再說，小程序和OS差着十萬八千里呢。其實微信小程序就是借用了React Native的原理（在RN出現的同時，騰訊一直在研究這種技術，估計是爲微信小程序作技術上的儲備），將原始熱佈局嵌入到了微信，並提供了一些公開的接口的微信擴展。我以爲將微信小程序定義爲微信擴展更合適。

4.  因爲微信小程序入口太深，對於高頻應用不適合

入口太深，弄淺就行了。Android和iOS很容易直接將App中的功能做爲單獨的App安裝在系統上，做爲第一層的圖標，這只是技術問題而已，對於騰訊都不是問題。 

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

    都說了，小程序是微信的擴展，並且因爲其封閉性，沒法讓程序員自由擴展（微信是不可能開源的），因此小程序不能像React Native同樣能夠開發各類App，只是做爲微信的一種補充而已。因此原生App在將來仍然將做爲主流。固然，也會帶來一些不一樣，可憐的技術哥又有多了一個活，就是除了原生App、微信公衆號外，還要開發微信小程序！好吧，祝技術哥好運！

微信小程序的開發

  騰訊本身作了一款小程序開發工具，讀者能夠從下面的地址下載。

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

下面是截圖

     看樣子還不錯，不過必需要有App ID才能進行開發。目前小程序在內側階段，只有受到邀請才能本身生產App ID。不過你們能夠看一下官方的文檔，基本能夠了解開發的過程。在該頁也包含了小程序中的API和組件列表，和React Native至關接近。 

學習微信小程序的前導技術

       小程序邏輯代碼使用的JavaScript，因此要想編寫小程序，必須學會JavaScript，除了JavaScript外，讀者能夠先研究一下React Native技術，由於這種技術和小程序很是相似，基本上RN學會後，開發小程序就會變得很是輕鬆。爲了讓讀者儘快進入微信小程序的世界，我特地開發了JavaScript和React Native的視頻課程：（JavaScript）http://edu.csdn.net/course/detail/2910   （React Native）http://edu.csdn.net/course/detail/2883   經過這些課程，讀者能夠爲學習小程序作充分的準備。