你知道小程序最后上線的代碼是什么樣子嗎？

小程序的一般寫法

我們知道小程序最開始出來的時候，包括到現在；官方給出的寫法是js對應邏輯層，wxml也自己嘗試了一套DSL自定義視圖的模板語法，寫法雷同vue的template語法：

• 數據綁定

<view wx:for="{{array}}"> {{item}} </view>

• 列表渲染

<view wx:for="{{array}}"> {{item}} </view>

• 條件渲染

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

這幾種語法，當然還包括了wxss來定義樣式文件的語法，基本上與css相同。到目前的類vue、類react的小程序框架逐漸使用廣泛，從而基本上沒有怎么使用，不過微信小程序官方一開始定義這一套語法之初的目的是什么呢？這反而給我們留下了一個疑問？包括后面誕生的支付寶小程序、抖音小程序等一系列小程序都是雷同的；

語法定義的背后

我們類比以上幾種語法，可以發現和在web端開發h5的時候基本的語法規范大致一樣：

• 小程序js—web js
• 小程序wxml—web html
• 小程序wxss—web css

所以就可以明白定義的語法類同web 編程的三大基本技能，而這也是比較容易入門的；

最后究竟是什么

然而我們知道，任何一門語言都有它執行的地方，那么這幾種微信獨特定義的語法是有自己的解析器來專門執行嗎？對于邏輯層面語法是js，可以猜測是運行的js引擎來執行的；那么wxml和wxss呢，是否微信自己定義了一套渲染器來解析這兩種語法，如同flutter內部提供了一套渲染引擎來解析dart的Widget渲染視圖，或者說最后編譯成為了其他的語言運行；

對于第二種編譯成為其他語言的這種情況，由于雷同html及css，我們猜測最后編譯成為這兩種語言，那么如何驗證？

• 我們首先定義一個簡單的模板

<!--index.wxml-->
<view class="container">
  <View>這里是一燈</View>
</view>

• 既然猜測編譯成為html，那么我們就加入HTML的代碼，混合執行，看最后顯示的結果如何：

<!--index.wxml-->
<view class="container">
  <View>這里是一燈</View>
  <div>
    <h4>我們是未來的掌舵人</h4>
    <p>為天地立心</p>
    <p>為生民立命</p>
    <p>為往圣繼絕學</p>
    <p>為萬世開太平</p>
  </div>
</view>

如上執行的結果如同直接在瀏覽器中運行一般；對于小程序官方是不支持div、h4等標簽的，既然可以在其中運行，并且解析，那么我們就可以基本認為最后小程序打包上線運行的代碼，就是編譯成為html及css的代碼；最后在微信提供的webview中運行；

而編譯出來的html及css怎么組織、與邏輯js如何交互，他為什么比我們平時的html性能交互體驗更好；js的執行是否還會阻塞html及css解析的過程，這些過程自然就更需要去研究了，最后借鑒到web端來優化我們的整體代碼，這是我們為什么研究其他東西的原因；