曾几何时“多端适配”简直要颠覆整个互联网行业。前端开发的项目，可以运行在浏览器（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。
相关文章
