本篇內(nèi)容介紹了“web前端跨平臺(tái)的解決方案有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了雨山免費(fèi)建站歡迎大家使用！

　　H5+原生混合開(kāi)發(fā)

　　這種模式又稱(chēng)為Hybrid開(kāi)發(fā)，現(xiàn)在很多App都用這種模式去開(kāi)發(fā)，常見(jiàn)的有微信、淘寶、美團(tuán)、愛(ài)奇藝等知名移動(dòng)應(yīng)用等。國(guó)內(nèi)也有很多公司使用Hybrid模式去開(kāi)發(fā)平臺(tái)，供開(kāi)發(fā)者使用，像Dcloud、AppCan、Inoic等，基本上都是參考Cordova衍生出的混合開(kāi)發(fā)框架。
　　這類(lèi)框架主要原理就是將APP的一部分需要?jiǎng)討B(tài)變動(dòng)的內(nèi)容通過(guò)H5來(lái)實(shí)現(xiàn)，通過(guò)原生的網(wǎng)頁(yè)加載控件WebView (Android)或WKWebView（ios）來(lái)加載，H5部分是可以隨時(shí)改變而不用發(fā)版，這樣就解決了動(dòng)態(tài)化的需求，同時(shí)，由于h6代碼只需要一次開(kāi)發(fā)，就能同時(shí)在Android和iOS兩個(gè)平臺(tái)運(yùn)行，這也可以減小開(kāi)發(fā)成本，我們稱(chēng)這種h6+原生的開(kāi)發(fā)模式為混合開(kāi)發(fā)。
　　混合應(yīng)用的優(yōu)點(diǎn)是動(dòng)態(tài)內(nèi)容是H5，使用web技術(shù)棧就可以開(kāi)發(fā)，社區(qū)及資源豐富，缺點(diǎn)是性能不好，對(duì)于復(fù)雜用戶(hù)界面或動(dòng)畫(huà)，webview不堪重任。

　　JavaScript開(kāi)發(fā)+原生渲染

　　這類(lèi)開(kāi)源框架的代表主要是Facebook的React Native、阿里的Weex，當(dāng)然也有未開(kāi)源的美團(tuán)的Picasso，以及最新推出的快應(yīng)用。
　　JavaScript開(kāi)發(fā)+原生渲染的方式主要優(yōu)點(diǎn)如下：采用Web開(kāi)發(fā)技術(shù)棧，社區(qū)龐大、上手快、開(kāi)發(fā)成本相對(duì)較低；原生渲染，性能相比H5提高很多；動(dòng)態(tài)化較好，支持熱更新。
　　當(dāng)然也有缺點(diǎn)如下：渲染時(shí)需要JavaScript和原生之間通信，在有些場(chǎng)景如拖動(dòng)可能會(huì)因?yàn)橥ㄐ蓬l繁導(dǎo)致卡頓；JavaScript為腳本語(yǔ)言，執(zhí)行時(shí)需要JIT，執(zhí)行效率和AOT代碼仍有差距；由于渲染依賴(lài)原生控件，不同平臺(tái)的控件需要單獨(dú)維護(hù)，并且當(dāng)系統(tǒng)更新時(shí)，社區(qū)控件可能會(huì)滯后；除此之外，其控件系統(tǒng)也會(huì)受到原生UI系統(tǒng)限制，例如，在Android中，手勢(shì)沖突消歧規(guī)則是固定的，這在使用不同人寫(xiě)的控件嵌套時(shí)，手勢(shì)沖突問(wèn)題將會(huì)變得非常棘手。
　　React Native
　　React Native (簡(jiǎn)稱(chēng)RN)是Facebook于2015年4月開(kāi)源的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架，是Facebook早先開(kāi)源的JS框架 React 在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物，目前支持iOS和Android兩個(gè)平臺(tái)。RN使用Javascript語(yǔ)言，類(lèi)似于HTML的JSX，以及CSS來(lái)開(kāi)發(fā)移動(dòng)應(yīng)用，因此熟悉Web前端開(kāi)發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就可以進(jìn)入移動(dòng)應(yīng)用開(kāi)發(fā)領(lǐng)域。
　　Weex
　　Weex是阿里巴巴于2016年發(fā)布的跨平臺(tái)移動(dòng)端開(kāi)發(fā)框架，思想及原理和React Native類(lèi)似，大的不同是語(yǔ)法層面，React Native使用React.js作為開(kāi)發(fā)框架，而Weex則使用Vue.js作為開(kāi)發(fā)框架。Vue和React堪稱(chēng)前端領(lǐng)域最火的JavaScript框架，它們的易用性和功能性都非常強(qiáng)大，Weex在淘寶上也有廣泛的應(yīng)用。
　　快應(yīng)用
　　快應(yīng)用是華為、小米、OPPO、魅族等國(guó)內(nèi)9大主流手機(jī)廠(chǎng)商共同制定的輕量級(jí)應(yīng)用標(biāo)準(zhǔn)，目標(biāo)直指微信小程序。它也是采用JavaScript語(yǔ)言開(kāi)發(fā)，原生控件渲染。

　　自繪UI+原生

　　通過(guò)在不同平臺(tái)實(shí)現(xiàn)一個(gè)統(tǒng)一接口的渲染引擎來(lái)繪制UI，而不依賴(lài)系統(tǒng)原生控件，所以可以做到不同平臺(tái)UI的一致性。注意，自繪引擎解決的是UI的跨平臺(tái)問(wèn)題，如果涉及其它系統(tǒng)能力調(diào)用，依然要涉及原生開(kāi)發(fā)。這種平臺(tái)技術(shù)的優(yōu)點(diǎn)：性能高，性能和原生控件接近；靈活、組件庫(kù)易維護(hù)、UI外觀保真度和一致性高；不足之處：動(dòng)態(tài)性不足。
　　Flutter
　　Flutter 是 Google推出并開(kāi)源的移動(dòng)應(yīng)用開(kāi)發(fā)框架，主打跨平臺(tái)、高保真、高性能。開(kāi)發(fā)者可以通過(guò) Dart語(yǔ)言開(kāi)發(fā) App，一套代碼同時(shí)運(yùn)行在 iOS 和 Android平臺(tái)。 Flutter提供了豐富的組件、接口，開(kāi)發(fā)者可以很快地為 Flutter添加原生擴(kuò)展。
　　Flutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。 相反，F(xiàn)lutter使用自己的高性能渲染引擎來(lái)繪制widget。這樣不僅可以保證在Android和iOS上UI的一致性，而且也可以避免對(duì)原生控件依賴(lài)而帶來(lái)的限制及高昂的維護(hù)成本。但是Flutter也有不足之處，不支持動(dòng)態(tài)下發(fā)代碼和熱更新。

“web前端跨平臺(tái)的解決方案有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前標(biāo)題：web前端跨平臺(tái)的解決方案有哪些-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article42/dehpec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)