我們知道小程序最開始出來的時候,包括到現在;官方給出的寫法是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端來優化我們的整體代碼,這是我們爲什麼研究其他東西的原因;
所以我們上線了小程序的專題課——【小程序開發框架深度對比與源碼分析】,課程對於小程序的基本架構,打包上線運行的代碼都有講解;同時對當下主流的小程序框架也有深度的架構解析和原理分析,以及如何來優化小程序的執行效率等關鍵問題。
對於學習來說,你最大的成本,永遠是自己的時間,畢竟不是誰都有羅志祥那樣超羣的時間管理能力,能夠花最少的錢買到最優質的課程纔是最重要的。
專題課【小程序開發框架深度對比與源碼分析】從小程序架構講起,深度對比小程序開發框架和源碼分析,只要 3 天就能解鎖一個帶你成爲小程序開發高手的課程,且,只需要 1 元!
現在我們來看一下你將學到哪些內容?????????????
一、小程序架構及性能優化
- 小程序架構詳解
- 瀏覽器端運行小程序代碼原理解析
- 小程序開發性能優化淺析
二、小程序框架橫向對比
- 編譯時框架taro、wepy架構淺析
- 半編譯半運行時框架mpvue框架淺析
- 運行時框架kbone、remax框架淺析
三、taro小程序框架詳解
- 編譯時框架架構詳解
- taro打包流程解析
- taro源碼淺析
- taro進階使用
以上,就是這樣一門包含諸多幹貨內容+實操講解+社羣服務的課程,不要999,也不要99,只要 1 元!
它一定不能解決你的所有問題。但是,它會是你小程序開發實力“超車”的開始。同時1元報名後還將免費送一個98元的面試專題課:【你不知道的Vue.js 性能優化】????這是一個Vue 高級教程,深度講解 Vue.js 性能優化,以及 Vue3.0 那些值得關注的新特性,帶你解鎖你可能不知道的 Vue.js 性能優化,報名即送~
本課程即將於 5 月 12 日(週二)開課,限時 1元購課,趕快長按識別下方二維碼,領券報名吧!????
限時 1 元
掃碼領券購買
????????????