曾几何时“多端适配”简直要颠覆整个互联网行业。前端开发的项目，可以运行在浏览器（PC端和移动端）、服务器、iOS和 Android系统中，但随着项目实战，与原生App相比，混合开发技术本身的不足逐渐体现出来。
目前，工程师们也在逐步地攻克这些难关。因此，混合开发部分的面试题主要考察应试者对混合开发的认知。如何实现混合开发、如何搭配环境，以及混合开发中的一些常见问题都是值得开发者关注的。
1、如何确保 InAppBrowser能被完整调用？
在调用外部资源的HTML文件中的标签中要加入
type=" text/javascript" charset="utf-8" src="cordova. js">
以确保 InAppBrowser插件能够被完整调用，否则会出现底部返回按钮无法出现的情况。
2、如何利用 InAppBrowser插件调用外部资源？
在 config. xml文件中加入href="*"/>（即将任何外部资源放入白名单中），就可以利用 InAppBrowser插件调用外部资源了。
3、在混合开发中，如何实现上拉刷新。下拉刷新和加载？你遇到过什么问题？
用 iscroll实现上拉刷新、下拉刷新和加载，效果比较差，在页面上只能上下滑动，不能左右滑动。如果把页面嵌入到客户端的tab底下，就会阻止客户端的左右滑动。如果要实现左右切换，就要把 iscroll插件中的
onBeforeScrollStart:function（e）{ e.preventDefault ( )；}
改为
onBeforeScrollStart:null
缺点：虽然实现了上拉刷新、下拉刷新，但是效果不是很好，有时候会“弹”不回去，和原生的有一些差距。
4、HTML5和 Native的交互如何实现？
WebView本来就支持 JavaScript和Java相互调用，只需要开启 WebView的 JavaScript脚本执行功能，并通过代码 mWebView. addJavascriptInterface（new JsBridge( )，" bxbxbai"）向HTML5页面中注入一个Java对象，然后就可以在HTML5页面中调用 Native的功能了。
5、微信是用 Hybrid开发做得最好的App之一，它是如何做交互的？
在微信开发者文档中可以看到，微信JS-SDK封装了微信的各种功能，比如分享到朋友圈、图像接口、音频接口、支付接口、地理位置接口等。
开发者只需要调用微信JS-SDK中的函数，然后统一由JS-SDK调用微信中的功能这样的好处就是，开发者写了一个HTML5的应用或网页，在 Android和iOS版本的微信中都可以正常运行。
6、Hybrid开发适用于哪些功能？
Hybrid开发就是在 Native客户端中嵌入了 HTML App的功能，这方面微信应该是做得最好的。
由于HTML5的效率以及耗电问题，可能用户对 Web App的体验不满意，Hybrid App也只适用于某些场景。
把一些基础的功能（比如调用手机的摄像头、获取地理位置、登录注册等）做成 Native的功能，让HTML5来调用更好，这样的体验也更好。
如果把一个登录和注册功能也做成HTML5版本的App，在弱网络环境下，这个体验应该会非常差，或许用户等半天还没加载出页面。
一些活动页面（比如“秒杀”、团购等）适合采用HTML5开发，因为这些页面可能设计得非常炫而且复杂。HTML5开发非常简单，并且这些页面时效性短，更新更快，因为一个活动说不定就一周时间，下周就下线了。而如果用 Native开发，成本是很高的。
7、Web App和混合App的区别是什么？
区别如下。
（1） Web App指采用HTML5语言写的App，需要安装触屏版网页应用。
优点包括：开发成本低，迭代速度快，能够跨平台终端。
缺点包括：入口临时，获取系统级别的通知和提醒效率低，用户留存率低，设计受限制，体验较差。
（2）混合App指半原生半Web的混合App，需要安装它才能访问Web内容。
例如新闻类App、视频类App普遍采取Native框架web内容，混合App极力打造类似于原生App的体验，但仍受限于技术和网速等诸多因素。
8、什么是 Android混合开发？如何申请权限？
Android混合开发使用Java和H5共同开发界面，通过 JsBridge进行通信，一部分界面首先在本地写好，然后通过网络请求获取数据，进行展示。当然，也可以完全是H5界面，在 WebView中进行展示。
权限可以在 Manifest.xml中申请， Android 6.0以上版本可以通过代码动态申请。
9、什么是混合开发？
混合开发（HTML5开发）相当于一种框架开发。该模式通常由“HTML5云网站+App应用客户端”两部分构成，App应用客户端只须安装应用的框架部分，而在每次打开App的时候，从云端取数据并呈现给手机用户混合开发的另一种形式是套壳App。
套壳App就是用H5的网页打包成App。
虽然App能安装到手机上，但是每个界面都是通过HTML5开发的网页。这种App数据都保存在云端，用户每次访问都需要从云端调取全部内容，这样就容易导致反应慢，每打开个网页或单击一个按钮，加载网页都需要等很长时间。
10、混合App开发的优势是什么？
优势如下。
时间短。基本都是直接嵌套模板或打包成App，这会节省很大一部分时间。
价格便宜。代码不需要重新写，界面不用重新设计，这些都是固定的，可替换的地方很少，所以价格相对便宜。
11、混合App开发的劣势是什么？
劣势如下。
（1）功能、界面无法自定义。所有内容都是固定的，所以要换一个界面，或增加个功能，都是不可以的。
（2）加载缓慢、网络要求高。混合App数据全部需要从服务器调取，每个页面都需要重新下载，所以打开速度慢，占用的网络带宽高，缓冲时间长，容易让用户反感。
（3）安全性比较低。代码都是以前的代码，不能很好地兼容最新的手机系统，且安全性较低。网络发展快，病毒多，如果不实时更新，定期检查，容易产生漏洞，造成经济损失。
12、开发原生App还是混合App，你是如何选择的？
选择方法如下。
（1）根据预算选择：现在预算有多少？在应用转型上打算花多少金钱、时间、精力？
如果预算在几千元到一万元之间，建议选择混合App。混合App有它存在的道理，并非一文不值，很多混合App发展好了再转型成原生App。
（2）根据需要选择：如果只是简单地卖个小商品，那么可以选择混合App；如果想做类似淘宝的大型店铺，有很多用户、很多店、很多现金流，可以选择原生App。
13、如何判断一个App是原生App、混合App还是 Web App？
从以下方面进行判断。
（1）看断网情况。
通过断开网络，刷新页面，观察内容缓存情况，可以有一个大致的判断，可以正常显示的就是原生App，显示404或者错误页面的就是 Web App。
（2）看页面布局编辑。
如果页面布局比较简单，可能是原生App；如果页面布局很复杂，页面动画很多，可能是 Web App。
（3）看复制文章的提示，需要通过对比才能得出结果。
比如，长按文章信息页面，如果出现文字选择、粘贴功能的是 Web App，否则是原生App。
有些原生App开放了复制、粘贴功能或者关闭了这些功能，而 Web App中HTML5中的CSS屏蔽了复制、选择功能等，需要通过对目标测试App进行对比才能分辨。
（4）看加载方式。
如果在打开新页面的导航栏下面有一条加载线，这个页面就是 Web App；如果没有，就是原生的App。
（5）看App顶部导航栏是否会关闭按钮。
如果App顶部导航栏中出现了关闭按钮或者关闭图标，那么当前App是 Web App，原生App中不会出现（除非设计开发者特意设计）、美团、大众点评、微信的App。当加载H5页面过多的时候，左上角会出现“关闭”两个字。
（6）看页面刷新情况。
如果页面没有明显刷新现象就是原生App，如果有明显刷新现象（比如闪一下）就是 Web App，比如淘宝的众筹页面等。
在下拉页面的时候显示网址提供方的一定是 Web App。
（7）利用系统开发人员工具。
在手机的“设置”中，选择“开发者选项”→“显示布局边界”，选择开启后再次查看App整体布局边界，这样所有应用控件的布局就会一目了然。
14、混合应用程序的实现原理是什么？
在本地应用程序中添加 Web View来显示HTML5（CSS、 JavaScript）部分的内容，集中在 JavaScript和本地代码中实现逻辑操作。通过 JavaScript来实现本地代码和HTML5之间的交互操作。
15、谈谈 React与 ReactNative的区别。
ReactNative和 React共用一些抽象层，但具体有很多差异，且目标平台不同。
React用于开发web页面，为了使前端的视图层组件化，并能更好地得以复用，它能够使用简单的HTML标签创建许多自定义组件标签。
在组件内部绑定事件，只需要操作数据就会改变相应的DOM渲染结果。
ReactNative目前只能开发iOS/Android App，它是程序员能够使用前端的技术去开发运行在不同平台（如iOS、 Android等）上的项目框架。
ReactNative在 JavaScript中用 React抽象 Android、iOS原生的UI组件，代替DOM元素来渲染，比如用<View>取代<div>，用<image>替代<img>等。
16、ReactNative中，如何动态设置 TextInput的高度，以便适配响应式页面布局？
使用<TextInput style={ [ { height:Math. max（40, this .state. height ) }]}/>。
17、ReactNative与原生 Android常用的通信方式有几种？
常用的通信方式如下。
（1）通过 RCTDeviceEventEmitter事件通信。
（2）通过回调函数异步通信。
（3）通过 Promise规范实现通信。
（4）通过原生 Android直接向 ReactNative传递常量数据。
18、从 ReactNative中数据发生变化到把新的数据渲染到页面中， ReactNative生命周期函数按照什么顺序执行？
当组件数据发生改变时，会进入存在期，从而执行组件生命周期方法，属性的改变与状态的改变相差一个阶段。
如果属性改变，会依次执行 componentWillRecivePros、 shouldComponentUpdate、 componentWillUpdate, render, componentDidUpdate.
如果状态改变，会依次执行 shouldComponentUpdate、componentWillUpdate、 render、 componentDidUpdate。
推荐阅读
【前端面试题】—26道HTTP和HTTPS的面试题(附答案)
【前端面试题】09—44道常见Augluar基础面试题（附答案）
本文完〜
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
