扣丁書屋

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

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

小程序的一般寫法

我們知道小程序最開始出來的時候,包括到現在;官方給出的寫法是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端來優化我們的整體代碼,這是我們為什么研究其他東西的原因;

最多閱讀

為Electron程序添加運行時日志 3年以前  |  14739次閱讀
Node.js下通過配置host訪問URL 3年以前  |  4754次閱讀
js動態創建類和實例化 3年以前  |  3892次閱讀
wordpress標簽頁的制作 3年以前  |  3725次閱讀
初探 React 組件 3年以前  |  3704次閱讀
用 esbuild 讓你的構建壓縮性能翻倍 2年以前  |  3682次閱讀
500行PHP代碼搞定富文本安全過濾 3年以前  |  3595次閱讀
10 種跨域解決方案(附終極方案) 2年以前  |  3479次閱讀
22個HTML5的初級技巧 3年以前  |  3474次閱讀
MBTI免費在線測試 3年以前  |  3423次閱讀
使用 SRI 增強 localStorage 代碼安全 3年以前  |  3353次閱讀
淺談瀏覽器的原生拖拽事件 3年以前  |  3348次閱讀
CSS清除浮動 3年以前  |  3338次閱讀
第三版主題上線 3年以前  |  3275次閱讀
利用服務器返回header來傳輸數據 3年以前  |  3250次閱讀

手機掃碼閱讀
18禁止午夜福利体验区,人与动人物xxxx毛片人与狍,色男人窝网站聚色窝
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>