移动端混合开发面试题汇总

面试题 1. 前端点击事件在移动端会有300毫秒延迟,为什么,怎么解决?

参考回答:

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="targetDiv" style="width: 200px; height: 200px; background-color: gray"></div>
    <script>
        const Div = document.getElementById("targetDiv");
        Div.addEventListener("touchstart", function () {
            console.log("触发了touchstart事件");
        });
        Div.addEventListener("click", (e) => {
            console.log("触发了click事件");
        });
    </script>
</body> 
</html>

300ms延迟的产生缘由 #
移动端浏览器的默认显示宽度是980px(不同机型各异,但相差不大),而不是屏幕的宽度(320px或其他)。为了对早期普通网页更好的体验,iphone设计了双击放大显示的功能–这就是300ms延迟的来源:如果用户一次点击后300ms内没有其他操作,则认为是个单击行为;否则为双击放大行为

解决方法 #
设置不能缩放:user-scalable=no。 不能缩放就不会有双击缩放操作,因此click事件也就没了300ms延迟,这个是Chrome首先在Android中提出的。
设置显示宽度:width=device-width。Chrome 开发团队不久前宣布,在 Chrome 32 这一版中,他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然,没有双击缩放就没有 300毫秒点击延迟。
IE的指针事件 (Pointer Events):设置touch-action:none,根据规范,touch-action 属性决定 “是否触摸操作会触发用户代理的默认行为。这包括但不限于双指缩放等行为”。从实际应用的角度来看,touch-action决定了用户在点击了目标元素之后,是否能够进行双指缩放或者双击缩放。因此,这也相当完美地解决了300 毫秒点击延迟的问题 鉴于上述的3种解决方案,现在较为通用的meta设置为: "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
使用插件 fastclick(react项目中使用的就是fastclick插件)
1. 安装 npm i fastclick --save
2. 全局引入 import fastclick from 'fastclick'
3. 配置 fastClick.attach(document.body);
面试题 2. 在旋转屏幕时,如何解决字体大小自动调整的问题?

参考回答:

通过以下代码设置样式
html, body, form, fieldset, p, div, hl, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
面试题 3. 如何解决移动端 click事件有300ms延迟的问题?

参考回答:

移动端click事件会有300ms延时,原因是移动端屏幕双击会缩放页面。
三种解决方案如下:
1.禁用缩放,浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟
<meta name="viewport" content="user-scalable=no">
2.利用 touch 事件自己封装这个事件解决 300ms 延迟。
原理就是:
当我们手指触摸屏幕,记录当前触摸时间
当我们手指离开屏幕,用离开的时间减去触摸的时间
如果时间小于 150ms,并且没有滑动过屏幕,那么我们就定义为点击
//封装tap,解决click300ms延时
function tap(obj, callback) {
	var isMove = false;
	var startTime = 0;
	obj.addEventListener("touchstart", function (e) {
		startTime = Date.now();
		//记录触摸时间
	}
	);
	obj.addEventListener("touchmove", function (e) {
		isMove = true;
		//看是否有滑动,有滑动算拖拽,不算点击
	}
	);
	obj.addEventListener('touchend',function(e) {
		if(!isMove&&(Date.now()=startTime)<150) {
			//如果手指触摸和离开时间小于150ms 算点击
			callback&&callback();
			//执行回调函数
		}
		isMove=false;
		//取反 重置
		startTime=0;
	}
	);
}
//调用
tap(div,function() {
}
)
3.使用插件,fastclick 插件解决 300m 延迟
js 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用,如轮播图和瀑布流插件。 特点:它一般为了解决某个问题而专门存在,其功能单一,并且比较小。
fastclick 插件解决 300ms 延迟,使用延时。
Github 官网地址:https://github.com/ftlabs/fastclick
使用方法:
引入 fastclick 插件文件:
<script src="fastclick.js"></script>
在 HTML 中使用:
 <script>
        if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function () {
		FastClick.attach(document.body);
	}
	, false);
}
var div = document.querySelector('div');
div.addEventListener('click', function () {
	alert(11);
}
)
    </script>
面试题 4. 如何解决移动端HTML5中date类型的input标签不支持 placeholder属性的问题?

参考回答:

代码如下。
< input placeholder = "请输入日期 " type="text" onfocus="(this .type='date')" name="date">
面试题 5. 如何通过HTML5调用 Android或iOS的拨号功能?

参考回答:

HTML5提供了自动调用拨号的标签,只要在a标签的href中添加tel:协议就可以了。
拨打固定电话的代码如下
< a href="te1:021-12345678">单击拨打021-12345678
拨打手机号码的代码如下
< a href="te1:12345678901">单击拨打12345678901
面试题 6. 如何解决上下拖动滚动条时的卡顿问题?

参考回答:

通过以下代码设置样式。
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
Android3+和iOS5+支持CSS3的新属性 overflow- scrolling,该属性也可以解决上述问题。
面试题 7. 如何确保 InAppBrowser能被完整调用?

参考回答:

在调用外部资源的HTML文件中的标签中要加入
type=" text/javascript" charset="utf-8" src="cordova. js">
以确保 InAppBrowser插件能够被完整调用,否则会出现底部返回按钮无法出现的情况
面试题 8. 如何利用 InAppBrowser插件调用外部资源?

参考回答:

在 config. xml文件中加入href="*"/>(即将任何外部资源放入白名单中),就可以利用 InAppBrowser插件调用外部资源了
面试题 9. 在混合开发中,如何实现上拉刷新。下拉刷新和加载?你遇到过什么问题?

参考回答:

用 iscroll实现上拉刷新、下拉刷新和加载,效果比较差,在页面上只能上下滑动,不能左右滑动。如果把页面嵌入到客户端的tab底下,就会阻止客户端的左右滑动。如果要实现左右切换,就要把 iscroll插件中的
onBeforeScrollStart:function(e){ e.preventDefault ( );}
改为
onBeforeScrollStart:null
缺点:虽然实现了上拉刷新、下拉刷新,但是效果不是很好,有时候会“弹”不回去,和原生的有一些差距。
面试题 10. HTML5和 Native的交互如何实现?

参考回答:

WebView本来就支持 JavaScript和Java相互调用,只需要开启 WebView的 JavaScript脚本执行功能,并通过代码 mWebView. addJavascriptInterface(new JsBridge( )," bxbxbai")向HTML5页面中注入一个Java对象,然后就可以在HTML5页面中调用 Native的功能了
面试题 11. 微信是用 Hybrid开发做得最好的App,它是如何做交互的?

参考回答:

在微信开发者文档中可以看到,微信JS-SDK封装了微信的各种功能,比如分享到朋友圈、图像接口、音频接口、支付接口、地理位置接口等。
开发者只需要调用微信JS-SDK中的函数,然后统一由JS-SDK调用微信中的功能这样的好处就是,开发者写了一个HTML5的应用或网页,在 Android和iOS版本的微信中都可以正常运行
面试题 12. 简述Hybrid开发适用于哪些功能 ?

参考回答:

Hybrid开发就是在 Native客户端中嵌入了 HTML App的功能,这方面微信应该是做得最好的。
由于HTML5的效率以及耗电问题,可能用户对 Web App的体验不满意,Hybrid App也只适用于某些场景。
把一些基础的功能(比如调用手机的摄像头、获取地理位置、登录注册等)做成 Native的功能,让HTML5来调用更好,这样的体验也更好。
如果把一个登录和注册功能也做成HTML5版本的App,在弱网络环境下,这个体验应该会非常差,或许用户等半天还没加载出页面。
一些活动页面(比如“秒杀”、团购等)适合采用HTML5开发,因为这些页面可能设计得非常炫而且复杂。HTML5开发非常简单,并且这些页面时效性短,更新更快,因为一个活动说不定就一周时间,下周就下线了。而如果用 Native开发,成本是很高的
面试题 13. 简述Web App和混合App的区别 ?

参考回答:

区别如下。
(1) Web App指采用HTML5语言写的App,需要安装触屏版网页应用。
优点包括:开发成本低,迭代速度快,能够跨平台终端。
缺点包括:入口临时,获取系统级别的通知和提醒效率低,用户留存率低,设计受限制,体验较差。
(2)混合App指半原生半Web的混合App,需要安装它才能访问Web内容。
例如新闻类App、视频类App普遍采取Native框架web内容,混合App极力打造类似于原生App的体验,但仍受限于技术和网速等诸多因素
面试题 14. 简述什么是 Android混合开发?如何申请权限?

参考回答:

Android混合开发使用Java和H5共同开发界面,通过 JsBridge进行通信,一部分界面首先在本地写好,然后通过网络请求获取数据,进行展示。当然,也可以完全是H5界面,在 WebView中进行展示。
权限可以在 Manifest.xml中申请, Android 6.0以上版本可以通过代码动态申请。
面试题 15. 简述移动端混合开发的概念和理解 ?

参考回答:

混合开发(HTML5开发)相当于一种框架开发。该模式通常由“HTML5云网站+App应用客户端”两部分构成,App应用客户端只须安装应用的框架部分,而在每次打开App的时候,从云端取数据并呈现给手机用户混合开发的另一种形式是套壳App。
套壳App就是用H5的网页打包成App。
虽然App能安装到手机上,但是每个界面都是通过HTML5开发的网页。这种App数据都保存在云端,用户每次访问都需要从云端调取全部内容,这样就容易导致反应慢,每打开个网页或单击一个按钮,加载网页都需要等很长时间
面试题 16. 简述混合App开发的优势 ?

参考回答:

优势如下。
时间短。基本都是直接嵌套模板或打包成App,这会节省很大一部分时间。
价格便宜。代码不需要重新写,界面不用重新设计,这些都是固定的,可替换的地方很少,所以价格相对便宜。
面试题 17. 简述混合App开发的劣势缺陷 ?

参考回答:

(1)功能、界面无法自定义。所有内容都是固定的,所以要换一个界面,或增加个功能,都是不可以的。
(2)加载缓慢、网络要求高。混合App数据全部需要从服务器调取,每个页面都需要重新下载,所以打开速度慢,占用的网络带宽高,缓冲时间长,容易让用户反感。
(3)安全性比较低。代码都是以前的代码,不能很好地兼容最新的手机系统,且安全性较低。网络发展快,病毒多,如果不实时更新,定期检查,容易产生漏洞,造成经济损失
面试题 18. 简述开发原生App还是混合App选择因素 ?

参考回答:

选择方法如下。
(1)根据预算选择:现在预算有多少?在应用转型上打算花多少金钱、时间、精力?
如果预算在几千元到一万元之间,建议选择混合App。混合App有它存在的道理,并非一文不值,很多混合App发展好了再转型成原生App。
(2)根据需要选择:如果只是简单地卖个小商品,那么可以选择混合App;如果想做类似淘宝的大型店铺,有很多用户、很多店、很多现金流,可以选择原生App
面试题 19. 如何判断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整体布局边界,这样所有应用控件的布局就会一目了然。
面试题 20. 简述混合应用程序的实现原理?

参考回答:

在本地应用程序中添加 Web View来显示HTML5(CSS、 JavaScript)部分的内容,集中在 JavaScript和本地代码中实现逻辑操作。通过 JavaScript来实现本地代码和HTML5之间的交互操作
面试题 21. 简述React与 ReactNative的区别?

参考回答:

ReactNative和 React共用一些抽象层,但具体有很多差异,且目标平台不同。

React用于开发web页面,为了使前端的视图层组件化,并能更好地得以复用,它能够使用简单的HTML标签创建许多自定义组件标签。

在组件内部绑定事件,只需要操作数据就会改变相应的DOM渲染结果。

ReactNative目前只能开发iOS/Android App,它是程序员能够使用前端的技术去开发运行在不同平台(如iOS、 Android等)上的项目框架。

ReactNative在 JavaScript中用 React抽象 Android、iOS原生的UI组件,代替DOM元素来渲染,比如用取代

,用替代等
面试题 22. ReactNative中,如何动态设置 TextInput的高度,以便适配响应式页面布局?

参考回答:

使用
面试题 23. 简述ReactNative与原生 Android常用的通信方式有几种?

参考回答:

常用的通信方式如下。
(1)通过 RCTDeviceEventEmitter事件通信。
(2)通过回调函数异步通信。
(3)通过 Promise规范实现通信。
(4)通过原生 Android直接向 ReactNative传递常量数据
面试题 24. 怎样处理 移动端 1px 被 渲染成 2px 问题 ?

参考回答:

meta 标签中的 viewport 属性 ,initial-scale 设置为 1
rem 按照设计稿标准走,外加利用 transfrome 的 scale(0.5) 缩小一倍即可; 2 全局处理
meta 标签中的 viewport 属性 ,initial-scale 设置为 0.5
rem 按照设计稿标准走即可

解释
UI 设计师设计的时候,画的 1px(真实像素)实际上是 0.5px(css) 的线或者边框。但是他不这么认为,他认为他画的就是 1px 的线,因为他画的稿的尺寸本身就是屏幕尺寸的 2 倍。假设手机视网膜屏的宽度是 320x480 宽,但实际尺寸是 640x960 宽,设计师设计图的时候一定是按照 640x960 设计的。但是前端工程师写代码的时候,所有 css 都是按照 320x480 写的,写 1px(css),浏览器自动变成 2px(真实像素)。
那么前端工程师为什么不能直接写 0.5px(css) 呢?因为在老版本的系统里写 0.5px(css) 的话,会被浏览器解读为 0px(css),就没有边框了。所以只能写成 1px(css),实际在屏幕上显示出来就是设计师画的1px(真实像素)的 2 倍那么宽,所以设计师会觉得这个线太粗了,和他的设计稿不一样。在新版的系统里,已经开始逐渐支持 0.5px(css) 这种写法。所以如果设计师在大图上设计了一个 1px(真实像素)的线的话,前端工程师直接除以 2,写 0.5px(css) 就好了。

另外一种解释
事实就是它并没有变粗,就是 css 单位中的 1px,对于 dpr 为 2 的设备,它实际能显示的最小值是0.5px。
设计师口中说的 1px 是针对设备物理像素的,换算成 css 像素就是 0.5px。
一句话总结,background:1px solid black 在任何屏幕上都是一样粗的,但是 retina 屏可以显示比这更细的边框,然后设计师就不乐意了,让你改。
面试题 25. 简述如何解决移动端 Retina 屏 1px 像素问题 ?

参考回答:

1. 伪元素 + transform scaleY(.5)
2. border-image
3. background-image
4. box-shadow
面试题 26. 简述如何把一个字符串的大小写取反(大写变小写小写 变大写),例如 ’AbC’ 变成 ‘aBc’ ?

参考回答:

function processString (s) {
var arr = s.split('');
var new_arr = arr.map((item) => {
return item === item.toUpperCase() ? item.toLowerCase() :
item.toUpperCase();
});
Return
new_arr.join('');}console.log(processString('AbC'));function
swapString(str) {
var result = ''
for (var i = 0; i < str.length; i++) {
var c = str[i]
if (c === c.toUpperCase()) {
result += c.toLowerCase()
} else {
result += c.toUpperCase()
}
}
return result}swapString('ADasfads123!@$!@#') // =>
'adASFADS123!@$!@#'
面试题 27. 简述移动设备中的适配⽅案 ?

参考回答:

在移动设备开发中,为了确保⻚⾯在不同设备上显示良好,我们需要考虑设备的DPR和P P I,以及设备独⽴像素。以下是⼀些常⽤的适配⽅案:
1. 使⽤r e m单位:r e m单位是相对于根元素(h t m l元素)的字体⼤⼩进⾏计算的⻓度单位。通过动态设置根元素的字体⼤⼩,可以根据不同设备的DPR进⾏适配。
2. 使⽤v i ewp o rt标签:通过设置v i ewp o rt标签,可以控制⻚⾯的缩放和布局。设置 < m e t a n a m e = " v i e w p o rt" c o n t e n t= " w i d t h = d e v i c e - w i d t h , i n i t i a l- s c a l e = 1 . 0 " > 可以让⻚⾯宽度等于
设备宽度,并且不进⾏缩放。
3. 使⽤媒体查询:媒体查询可以根据不同设备的宽度、⾼度、DPR等条件来应⽤不同的CS S样式,从⽽实现⻚⾯的适配。
4. 使⽤fl e x b o x和g ri d布局:fl e x b o x和g ri d布局可以更加灵活地进⾏⻚⾯布局,适应不同设备的屏幕尺⼨和分辨率。
5. 使⽤图⽚的@2 x和@3 x版本:对于⾼分辨率设备,提供相应的⾼清晰度图⽚,以确保图⽚显示效果清晰。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柯晓楠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值