很多人平時(shí)用小程序，可能會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象：同一個(gè)小程序，既能在手機(jī)端的各類(lèi)應(yīng)用里打開(kāi)，也能在電腦端、平板端甚至智能設(shè)備上使用，而且操作體驗(yàn)差別不大。這背后，就是跨平臺(tái)小程序框架在發(fā)揮作用。簡(jiǎn)單說(shuō)，跨平臺(tái)框架的核心價(jià)值，就是讓開(kāi)發(fā)者寫(xiě)一套代碼，就能適配多個(gè)不同的設(shè)備和運(yùn)行環(huán)境，不用為每個(gè)平臺(tái)單獨(dú)開(kāi)發(fā)，既節(jié)省時(shí)間又降低成本。今天就用大白話，拆解這種框架的底層原理，不用復(fù)雜的技術(shù)術(shù)語(yǔ)，普通人也能看懂，搞明白“一套代碼多端通用”到底是怎么實(shí)現(xiàn)的。
先搞懂一個(gè)基礎(chǔ)問(wèn)題：為啥需要跨平臺(tái)框架？在沒(méi)有跨平臺(tái)框架之前，開(kāi)發(fā)者要做一個(gè)能適配多個(gè)平臺(tái)的小程序，得針對(duì)每個(gè)平臺(tái)單獨(dú)寫(xiě)代碼——比如適配A平臺(tái)寫(xiě)一套，適配B平臺(tái)再寫(xiě)一套，甚至還要兼顧電腦端、手機(jī)端的不同屏幕尺寸。這樣一來(lái)，不僅開(kāi)發(fā)工作量翻倍，后續(xù)維護(hù)也特別麻煩，改一個(gè)小功能，所有平臺(tái)的代碼都要同步修改，容易出錯(cuò)還效率低下。而跨平臺(tái)框架，就是為了解決這個(gè)痛點(diǎn)，搭建一個(gè)“中間橋梁”，連接開(kāi)發(fā)者寫(xiě)的代碼和不同的運(yùn)行平臺(tái)，實(shí)現(xiàn)“一次開(kāi)發(fā)、多端復(fù)用”。
跨平臺(tái)小程序框架的底層核心邏輯，本質(zhì)是“中間層適配 + 原生能力調(diào)用”，可以通俗理解為“翻譯官 + 能力中介”：中間層負(fù)責(zé)把開(kāi)發(fā)者寫(xiě)的統(tǒng)一代碼，翻譯成各個(gè)平臺(tái)能看懂的語(yǔ)言；同時(shí)，中間層還會(huì)對(duì)接各個(gè)平臺(tái)的原生能力，讓小程序能實(shí)現(xiàn)諸如獲取手機(jī)相冊(cè)、定位、支付等功能，不用單獨(dú)適配。這兩個(gè)部分相互配合，就實(shí)現(xiàn)了跨平臺(tái)運(yùn)行。
第一個(gè)核心部分：中間層的“翻譯”工作，這是跨平臺(tái)的基礎(chǔ)。開(kāi)發(fā)者在框架中寫(xiě)的代碼，并不是直接交給各個(gè)平臺(tái)運(yùn)行的，而是先交給中間層處理。中間層會(huì)把這套統(tǒng)一的代碼，轉(zhuǎn)換成對(duì)應(yīng)平臺(tái)能識(shí)別的原生代碼——比如把框架代碼翻譯成A平臺(tái)的專屬代碼、B平臺(tái)的專屬代碼，相當(dāng)于一個(gè)全能翻譯官，能搞定多個(gè)平臺(tái)的“語(yǔ)言”差異。
這里要說(shuō)明的是，不同跨平臺(tái)框架的“翻譯”方式略有不同，主要分為兩種常見(jiàn)類(lèi)型，原理都很容易理解。第一種是“靜態(tài)翻譯”，就是在開(kāi)發(fā)者寫(xiě)完代碼、打包發(fā)布的時(shí)候，中間層就一次性把統(tǒng)一代碼翻譯成各個(gè)平臺(tái)的原生代碼，生成多個(gè)平臺(tái)的安裝包，后續(xù)運(yùn)行的時(shí)候，直接調(diào)用對(duì)應(yīng)平臺(tái)的原生代碼，運(yùn)行速度比較快，相當(dāng)于提前把所有“翻譯稿”準(zhǔn)備好，用到的時(shí)候直接拿。
第二種是“動(dòng)態(tài)翻譯”，就是小程序運(yùn)行的時(shí)候，中間層才實(shí)時(shí)把統(tǒng)一代碼翻譯成當(dāng)前平臺(tái)的原生代碼，再交給平臺(tái)運(yùn)行。這種方式不用提前生成多個(gè)平臺(tái)的安裝包，打包后的文件體積更小，更新也更方便——開(kāi)發(fā)者只要更新一套統(tǒng)一代碼，所有平臺(tái)的小程序就能同步更新，不用逐個(gè)平臺(tái)更新。不過(guò)缺點(diǎn)是，實(shí)時(shí)翻譯需要消耗一點(diǎn)運(yùn)行資源，運(yùn)行速度可能比靜態(tài)翻譯略慢，但隨著技術(shù)優(yōu)化，這種速度差距已經(jīng)越來(lái)越小，大部分場(chǎng)景下都能滿足使用需求。
不管是哪種翻譯方式，核心目的都是解決“代碼不兼容”的問(wèn)題，讓開(kāi)發(fā)者不用糾結(jié)各個(gè)平臺(tái)的技術(shù)差異，專注于寫(xiě)一套代碼，大大降低開(kāi)發(fā)難度。而且中間層還會(huì)做“兼容性處理”，比如不同平臺(tái)的按鈕樣式、頁(yè)面布局規(guī)則不一樣，中間層會(huì)自動(dòng)適配，確保小程序在不同平臺(tái)上顯示效果、操作邏輯基本一致，不用開(kāi)發(fā)者單獨(dú)調(diào)整。
第二個(gè)核心部分：對(duì)接原生能力，讓小程序能實(shí)現(xiàn)各類(lèi)功能。小程序要想正常使用，離不開(kāi)各種原生能力的支持——比如獲取用戶信息、調(diào)用攝像頭、發(fā)送消息、支付、定位等等，這些功能都需要依托對(duì)應(yīng)平臺(tái)的原生接口才能實(shí)現(xiàn)。而跨平臺(tái)框架的中間層，就相當(dāng)于“能力中介”，負(fù)責(zé)打通開(kāi)發(fā)者代碼和平臺(tái)原生接口的連接，讓統(tǒng)一代碼能調(diào)用到各個(gè)平臺(tái)的原生能力。
具體來(lái)說(shuō)，中間層會(huì)提前封裝好一套統(tǒng)一的“能力調(diào)用接口”，開(kāi)發(fā)者在寫(xiě)代碼的時(shí)候，只要調(diào)用這套統(tǒng)一接口，就能實(shí)現(xiàn)對(duì)應(yīng)功能，不用關(guān)心不同平臺(tái)的原生接口差異。比如開(kāi)發(fā)者想調(diào)用攝像頭，只要寫(xiě)一句調(diào)用框架統(tǒng)一接口的代碼，中間層就會(huì)自動(dòng)識(shí)別當(dāng)前運(yùn)行的平臺(tái)，再調(diào)用這個(gè)平臺(tái)的原生攝像頭接口，完成功能實(shí)現(xiàn)——相當(dāng)于開(kāi)發(fā)者不用單獨(dú)記住各個(gè)平臺(tái)的“能力入口”，只要找中間層對(duì)接，就能搞定所有平臺(tái)的能力調(diào)用。
舉個(gè)通俗的例子，就像你想聯(lián)系多個(gè)不同地域的人辦事，不用記住每個(gè)人的聯(lián)系方式、溝通方式，只要找一個(gè)中介，中介會(huì)幫你對(duì)接每個(gè)人，你只要跟中介說(shuō)一句話，中介就會(huì)轉(zhuǎn)達(dá)給對(duì)應(yīng)的人，幫你完成辦事流程。中間層的作用就是這樣，幫開(kāi)發(fā)者對(duì)接各個(gè)平臺(tái)的原生能力，屏蔽平臺(tái)差異。
這里要注意的是，中間層封裝的統(tǒng)一接口，會(huì)覆蓋大部分常用的原生能力，但如果是一些比較特殊的、平臺(tái)專屬的原生能力，可能需要開(kāi)發(fā)者做少量額外適配——比如某個(gè)平臺(tái)有專屬的功能接口，框架的統(tǒng)一接口沒(méi)有覆蓋，這時(shí)候開(kāi)發(fā)者可以在統(tǒng)一代碼中，單獨(dú)添加針對(duì)這個(gè)平臺(tái)的適配代碼，兼顧通用性和特殊性。
除了“翻譯”和“對(duì)接原生能力”這兩個(gè)核心部分，跨平臺(tái)小程序框架還有一個(gè)重要的底層設(shè)計(jì)：渲染引擎，負(fù)責(zé)小程序頁(yè)面的顯示。渲染引擎也是中間層的一部分，主要作用是把開(kāi)發(fā)者寫(xiě)的頁(yè)面代碼，轉(zhuǎn)換成用戶能看到的頁(yè)面樣式，同時(shí)處理頁(yè)面的交互邏輯——比如點(diǎn)擊按鈕、滑動(dòng)頁(yè)面、跳轉(zhuǎn)頁(yè)面等。
渲染引擎也分為兩種適配方式，對(duì)應(yīng)不同的使用場(chǎng)景。第一種是“原生渲染”，就是中間層把頁(yè)面代碼翻譯成對(duì)應(yīng)平臺(tái)的原生頁(yè)面代碼，由平臺(tái)的原生渲染引擎負(fù)責(zé)顯示，頁(yè)面的流暢度、交互體驗(yàn)和原生小程序基本一致，適合對(duì)體驗(yàn)要求比較高的場(chǎng)景。第二種是“web渲染”，就是把頁(yè)面代碼轉(zhuǎn)換成網(wǎng)頁(yè)形式，由網(wǎng)頁(yè)渲染引擎負(fù)責(zé)顯示，這種方式的優(yōu)勢(shì)是開(kāi)發(fā)速度快、適配性強(qiáng)，適合內(nèi)容展示類(lèi)的小程序，比如資訊、文檔展示等場(chǎng)景。
很多人可能會(huì)擔(dān)心，跨平臺(tái)框架“一套代碼多端用”，會(huì)不會(huì)導(dǎo)致小程序運(yùn)行卡頓、體驗(yàn)變差？其實(shí)不會(huì)，因?yàn)榭蚣艿牡讓訒?huì)做很多優(yōu)化。比如中間層會(huì)緩存已經(jīng)翻譯好的代碼，下次運(yùn)行的時(shí)候不用重新翻譯；渲染引擎會(huì)優(yōu)化頁(yè)面加載速度，減少卡頓；對(duì)接原生能力的時(shí)候，會(huì)優(yōu)化調(diào)用效率，確保功能響應(yīng)流暢。而且隨著技術(shù)的不斷發(fā)展，跨平臺(tái)框架的性能已經(jīng)越來(lái)越接近原生開(kāi)發(fā)，能滿足絕大多數(shù)小程序的使用需求。
總結(jié)一下，跨平臺(tái)小程序框架的底層原理并不復(fù)雜，核心就是通過(guò)中間層的“翻譯”工作，解決不同平臺(tái)的代碼兼容性問(wèn)題，實(shí)現(xiàn)一套代碼多端復(fù)用；同時(shí)通過(guò)對(duì)接各個(gè)平臺(tái)的原生能力，讓小程序能實(shí)現(xiàn)各類(lèi)功能；再配合渲染引擎，確保頁(yè)面正常顯示和流暢交互。這種底層設(shè)計(jì)，既降低了開(kāi)發(fā)者的開(kāi)發(fā)和維護(hù)成本，又能讓小程序快速適配多個(gè)平臺(tái)，兼顧效率和實(shí)用性。未來(lái)，隨著技術(shù)的持續(xù)優(yōu)化，跨平臺(tái)框架會(huì)越來(lái)越完善，不僅能適配更多設(shè)備和平臺(tái)，還能進(jìn)一步提升運(yùn)行性能和用戶體驗(yàn)，成為小程序開(kāi)發(fā)的主流方式。
聯(lián)系電話題-1.jpg)