曾幾何時“多端適配”簡直要顛覆整個互聯(lián)網(wǎng)行業(yè)。前端開發(fā)的項目，可以運(yùn)行在瀏覽器（PC端和移動端）、服務(wù)器、iOS和 Android系統(tǒng)中，但隨著項目實戰(zhàn)，與原生App相比，混合開發(fā)技術(shù)本身的不足逐漸體現(xiàn)出來。
目前，工程師們也在逐步地攻克這些難關(guān)。因此，混合開發(fā)部分的面試題主要考察應(yīng)試者對混合開發(fā)的認(rèn)知。如何實現(xiàn)混合開發(fā)、如何搭配環(huán)境，以及混合開發(fā)中的一些常見問題都是值得開發(fā)者關(guān)注的。1、如何確保 InAppBrowser能被完整調(diào)用？在調(diào)用外部資源的HTML文件中的標(biāo)簽中要加入type=" text/javascript" charset="utf-8" src="cordova. js">
以確保 InAppBrowser插件能夠被完整調(diào)用，否則會出現(xiàn)底部返回按鈕無法出現(xiàn)的情況。2、如何利用 InAppBrowser插件調(diào)用外部資源？在 config. xml文件中加入href="*"/>（即將任何外部資源放入白名單中），就可以利用 InAppBrowser插件調(diào)用外部資源了。3、在混合開發(fā)中，如何實現(xiàn)上拉刷新。下拉刷新和加載？你遇到過什么問題？用 iscroll實現(xiàn)上拉刷新、下拉刷新和加載，效果比較差，在頁面上只能上下滑動，不能左右滑動。如果把頁面嵌入到客戶端的tab底下，就會阻止客戶端的左右滑動。如果要實現(xiàn)左右切換，就要把 iscroll插件中的onBeforeScrollStart:function（e）{ e.preventDefault ( )；}
缺點(diǎn)：雖然實現(xiàn)了上拉刷新、下拉刷新，但是效果不是很好，有時候會“彈”不回去，和原生的有一些差距。4、HTML5和 Native的交互如何實現(xiàn)？WebView本來就支持 JavaScript和Java相互調(diào)用，只需要開啟 WebView的 JavaScript腳本執(zhí)行功能，并通過代碼 mWebView. addJavascriptInterface（new JsBridge( )，" bxbxbai"）向HTML5頁面中注入一個Java對象，然后就可以在HTML5頁面中調(diào)用 Native的功能了。5、微信是用 Hybrid開發(fā)做得最好的App之一，它是如何做交互的？在微信開發(fā)者文檔中可以看到，微信JS-SDK封裝了微信的各種功能，比如分享到朋友圈、圖像接口、音頻接口、支付接口、地理位置接口等。開發(fā)者只需要調(diào)用微信JS-SDK中的函數(shù)，然后統(tǒng)一由JS-SDK調(diào)用微信中的功能這樣的好處就是，開發(fā)者寫了一個HTML5的應(yīng)用或網(wǎng)頁，在 Android和iOS版本的微信中都可以正常運(yùn)行。Hybrid開發(fā)就是在 Native客戶端中嵌入了 HTML App的功能，這方面微信應(yīng)該是做得最好的。由于HTML5的效率以及耗電問題，可能用戶對 Web App的體驗不滿意，Hybrid App也只適用于某些場景。把一些基礎(chǔ)的功能（比如調(diào)用手機(jī)的攝像頭、獲取地理位置、登錄注冊等）做成 Native的功能，讓HTML5來調(diào)用更好，這樣的體驗也更好。如果把一個登錄和注冊功能也做成HTML5版本的App，在弱網(wǎng)絡(luò)環(huán)境下，這個體驗應(yīng)該會非常差，或許用戶等半天還沒加載出頁面。一些活動頁面（比如“秒殺”、團(tuán)購等）適合采用HTML5開發(fā)，因為這些頁面可能設(shè)計得非常炫而且復(fù)雜。HTML5開發(fā)非常簡單，并且這些頁面時效性短，更新更快，因為一個活動說不定就一周時間，下周就下線了。而如果用 Native開發(fā)，成本是很高的。7、Web App和混合App的區(qū)別是什么？（1） Web App指采用HTML5語言寫的App，需要安裝觸屏版網(wǎng)頁應(yīng)用。優(yōu)點(diǎn)包括：開發(fā)成本低，迭代速度快，能夠跨平臺終端。缺點(diǎn)包括：入口臨時，獲取系統(tǒng)級別的通知和提醒效率低，用戶留存率低，設(shè)計受限制，體驗較差。（2）混合App指半原生半Web的混合App，需要安裝它才能訪問Web內(nèi)容。例如新聞類App、視頻類App普遍采取Native框架web內(nèi)容，混合App極力打造類似于原生App的體驗，但仍受限于技術(shù)和網(wǎng)速等諸多因素。8、什么是 Android混合開發(fā)？如何申請權(quán)限？Android混合開發(fā)使用Java和H5共同開發(fā)界面，通過 JsBridge進(jìn)行通信，一部分界面首先在本地寫好，然后通過網(wǎng)絡(luò)請求獲取數(shù)據(jù)，進(jìn)行展示。當(dāng)然，也可以完全是H5界面，在 WebView中進(jìn)行展示。權(quán)限可以在 Manifest.xml中申請， Android 6.0以上版本可以通過代碼動態(tài)申請。混合開發(fā)（HTML5開發(fā)）相當(dāng)于一種框架開發(fā)。該模式通常由“HTML5云網(wǎng)站+App應(yīng)用客戶端”兩部分構(gòu)成，App應(yīng)用客戶端只須安裝應(yīng)用的框架部分，而在每次打開App的時候，從云端取數(shù)據(jù)并呈現(xiàn)給手機(jī)用戶混合開發(fā)的另一種形式是套殼App。套殼App就是用H5的網(wǎng)頁打包成App。雖然App能安裝到手機(jī)上，但是每個界面都是通過HTML5開發(fā)的網(wǎng)頁。這種App數(shù)據(jù)都保存在云端，用戶每次訪問都需要從云端調(diào)取全部內(nèi)容，這樣就容易導(dǎo)致反應(yīng)慢，每打開個網(wǎng)頁或單擊一個按鈕，加載網(wǎng)頁都需要等很長時間。10、混合App開發(fā)的優(yōu)勢是什么？時間短?；径际侵苯忧短啄０寤虼虬葾pp，這會節(jié)省很大一部分時間。價格便宜。代碼不需要重新寫，界面不用重新設(shè)計，這些都是固定的，可替換的地方很少，所以價格相對便宜。（1）功能、界面無法自定義。所有內(nèi)容都是固定的，所以要換一個界面，或增加個功能，都是不可以的。（2）加載緩慢、網(wǎng)絡(luò)要求高?；旌螦pp數(shù)據(jù)全部需要從服務(wù)器調(diào)取，每個頁面都需要重新下載，所以打開速度慢，占用的網(wǎng)絡(luò)帶寬高，緩沖時間長，容易讓用戶反感。（3）安全性比較低。代碼都是以前的代碼，不能很好地兼容最新的手機(jī)系統(tǒng)，且安全性較低。網(wǎng)絡(luò)發(fā)展快，病毒多，如果不實時更新，定期檢查，容易產(chǎn)生漏洞，造成經(jīng)濟(jì)損失。12、開發(fā)原生App還是混合App，你是如何選擇的？（1）根據(jù)預(yù)算選擇：現(xiàn)在預(yù)算有多少？在應(yīng)用轉(zhuǎn)型上打算花多少金錢、時間、精力？如果預(yù)算在幾千元到一萬元之間，建議選擇混合App。混合App有它存在的道理，并非一文不值，很多混合App發(fā)展好了再轉(zhuǎn)型成原生App。（2）根據(jù)需要選擇：如果只是簡單地賣個小商品，那么可以選擇混合App；如果想做類似淘寶的大型店鋪，有很多用戶、很多店、很多現(xiàn)金流，可以選擇原生App。13、如何判斷一個App是原生App、混合App還是 Web App？通過斷開網(wǎng)絡(luò)，刷新頁面，觀察內(nèi)容緩存情況，可以有一個大致的判斷，可以正常顯示的就是原生App，顯示404或者錯誤頁面的就是 Web App。如果頁面布局比較簡單，可能是原生App；如果頁面布局很復(fù)雜，頁面動畫很多，可能是 Web App。（3）看復(fù)制文章的提示，需要通過對比才能得出結(jié)果。比如，長按文章信息頁面，如果出現(xiàn)文字選擇、粘貼功能的是 Web App，否則是原生App。有些原生App開放了復(fù)制、粘貼功能或者關(guān)閉了這些功能，而 Web App中HTML5中的CSS屏蔽了復(fù)制、選擇功能等，需要通過對目標(biāo)測試App進(jìn)行對比才能分辨。如果在打開新頁面的導(dǎo)航欄下面有一條加載線，這個頁面就是 Web App；如果沒有，就是原生的App。（5）看App頂部導(dǎo)航欄是否會關(guān)閉按鈕。
如果App頂部導(dǎo)航欄中出現(xiàn)了關(guān)閉按鈕或者關(guān)閉圖標(biāo)，那么當(dāng)前App是 Web App，原生App中不會出現(xiàn)（除非設(shè)計開發(fā)者特意設(shè)計）、美團(tuán)、大眾點(diǎn)評、微信的App。當(dāng)加載H5頁面過多的時候，左上角會出現(xiàn)“關(guān)閉”兩個字。
（6）看頁面刷新情況。
如果頁面沒有明顯刷新現(xiàn)象就是原生App，如果有明顯刷新現(xiàn)象（比如閃一下）就是 Web App，比如淘寶的眾籌頁面等。
在下拉頁面的時候顯示網(wǎng)址提供方的一定是 Web App。
（7）利用系統(tǒng)開發(fā)人員工具。
在手機(jī)的“設(shè)置”中，選擇“開發(fā)者選項”→“顯示布局邊界”，選擇開啟后再次查看App整體布局邊界，這樣所有應(yīng)用控件的布局就會一目了然。
14、混合應(yīng)用程序的實現(xiàn)原理是什么？
在本地應(yīng)用程序中添加 Web View來顯示HTML5（CSS、 JavaScript）部分的內(nèi)容，集中在 JavaScript和本地代碼中實現(xiàn)邏輯操作。通過 JavaScript來實現(xiàn)本地代碼和HTML5之間的交互操作。
15、談?wù)?React與 ReactNative的區(qū)別。
ReactNative和 React共用一些抽象層，但具體有很多差異，且目標(biāo)平臺不同。
React用于開發(fā)web頁面，為了使前端的視圖層組件化，并能更好地得以復(fù)用，它能夠使用簡單的HTML標(biāo)簽創(chuàng)建許多自定義組件標(biāo)簽。
在組件內(nèi)部綁定事件，只需要操作數(shù)據(jù)就會改變相應(yīng)的DOM渲染結(jié)果。
ReactNative目前只能開發(fā)iOS/Android App，它是程序員能夠使用前端的技術(shù)去開發(fā)運(yùn)行在不同平臺（如iOS、 Android等）上的項目框架。
ReactNative在 JavaScript中用 React抽象 Android、iOS原生的UI組件，代替DOM元素來渲染，比如用<View>取代<div>，用<image>替代<img>等。
16、ReactNative中，如何動態(tài)設(shè)置 TextInput的高度，以便適配響應(yīng)式頁面布局？
使用<TextInput style={ [ { height:Math. max（40, this .state. height ) }]}/>。
17、ReactNative與原生 Android常用的通信方式有幾種？
常用的通信方式如下。
（1）通過 RCTDeviceEventEmitter事件通信。
（2）通過回調(diào)函數(shù)異步通信。
（3）通過 Promise規(guī)范實現(xiàn)通信。
（4）通過原生 Android直接向 ReactNative傳遞常量數(shù)據(jù)。
18、從 ReactNative中數(shù)據(jù)發(fā)生變化到把新的數(shù)據(jù)渲染到頁面中， ReactNative生命周期函數(shù)按照什么順序執(zhí)行？
當(dāng)組件數(shù)據(jù)發(fā)生改變時，會進(jìn)入存在期，從而執(zhí)行組件生命周期方法，屬性的改變與狀態(tài)的改變相差一個階段。
如果屬性改變，會依次執(zhí)行 componentWillRecivePros、 shouldComponentUpdate、 componentWillUpdate, render, componentDidUpdate.
如果狀態(tài)改變，會依次執(zhí)行 shouldComponentUpdate、componentWillUpdate、 render、 componentDidUpdate。
相關(guān)推薦
【前端面試題】01—42道常見的HTML5面試題(附答案)
【前端面試題】02—59道CSS面試題(附答案)
【前端面試題】03—200+道常見JavaScript基礎(chǔ)面試題上（附答案）
【前端面試題】04—33道基礎(chǔ)CSS3面試題(附答案)
【前端面試題】05—17道面向?qū)ο蟮拿嬖囶}(附答案)
【前端面試題】06—16道設(shè)計模式面試題（附答案）
【前端面試題】07—47道基礎(chǔ)的VueJS面試題(附答案)
