【前端问题】—18个混合开发问题(附答案)曾经“多点”几乎颠覆了整个互联网行业。 前端开发的项目可以在浏览器(PC端和移动端)、服务器、iOS、Android系统上运行，但是随着项目的实战，与原生App相比，混合开发技术本身的不足逐渐显现出来。
目前，工程师们也正在逐步攻克这些难关。 因此，混合开发部分的面试问题主要考察考生对混合开发的认识。 如何实现混合开发，如何组合环境，以及混合开发中的一些常见问题值得开发者关注。
1、如何确保 InAppBrowser能被完整调用？
调用外部资源并将其添加到HTML文档中的标记
type=' text/JavaScript ' charset=' utf-8 ' src=' Cordova.js '验证是否已完全调用InAppBrowser插件。 如果没有完全调用，底部的后退按钮可能不会显示。
2、如何利用 InAppBrowser插件调用外部资源？
通过将href='*'/添加到config. xml文件中，可以使用InAppBrowser插件调用外部资源。
3、在混合开发中，如何实现上拉刷新。下拉刷新和加载？你遇到过什么问题？
用iscroll实现上拉刷新、下拉刷新、加载效果很差，在页面上只能上下滑动，不能左右滑动。 在客户端选项卡下嵌入页面会阻止客户端的左右滑动。 要实现左右切换，请单击iscroll插件的
onbeforescrollstart : function (e ) { e.preventDefault )； 改为}
onBeforeScrollStart:null的缺点：虽然实现了上拉刷新、下拉刷新，但效果不太好，有时也会“弹”不回去，和本地人有点差距。
4、HTML5和 Native的交互如何实现？
WebView最初支持JavaScript和Java的相互调用，打开WebView的JavaScript脚本执行功能，输入代码mweb view.addjavascriptinterface (newjsbript
5、微信是用 Hybrid开发做得最好的App之一，它是如何做交互的？
在微信开发者的文档中，微信js-SDK封装了微信的各种功能，包括朋友圈、图片接口、音频接口、支付接口、地理位置接口等
开发者只需调用微信js-SDK中的函数，从js-SDK统一调用微信中的功能，其优点是开发者只需编写HTML5的APP或网页，并同时编写安卓和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接口，在WebVie上
w中进行展示。权限可以在 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。