技术文章

前端混合开发面试题

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