专栏首页猪圈子面试官:" 如何判断一个APP页面是原生的还是H5页面 "

面试官:" 如何判断一个APP页面是原生的还是H5页面 "

1. 背景

春招热季,在招聘火热之际,面试了一家主打研发C端产品的企业,在相关面试环节,面试官考了我一个小知识点 : " 如何判断一个APP页面是原生的还是H5页面 " 不知道你工作种是否由留意

在各方面渠道以及群聊咨询各位前辈,得到相关如下的总结,分享给大家, 望大家在后期面试以及工作中,进行复用

注:常见的几种Hybrid(混合)开发的情况

  1. 整个模块都是原生/H5的
  2. 整个页面都是原生/H5的
  3. 标题是H5的,内容是原生的
  4. 标题是原生的,内容是H5的

2. 释义

Hybrid(混合的)APP指的是半原生半Web的混合类App; 需要下载安装, 看上去类似Native App, 但只有很少的UI Web View, 访问的内容是 Web

注:原生是Native APP,H5就是Web App

现在移动端的实现早已不是单纯的原生态开发了,更多的是嵌入H5的实现方式,比如说月亮天使,SFA; 还有部分app是纯H5的, 例如行政服务

3. 主题

在Hybrid(混合的)当中, 如何快速的判断一个APP页面是原生的还是H5页面呢?

a. 看断网的情况

把手机的网络断掉, 然后点开页面, 然后可以正常显示的东西就是原生写的,显示404或则错误页面的是html页面

b. 看布局边界

开发者选项->显示布局边界,页面元素很多的情况下布局是一整块的是h5的,布局密密麻麻的是原生控件。页面有布局的是原生的,否则为h5页面(仅针对安卓手机试用)

c. 页面文本是否可选(适用IOS)

比如是文章资讯页面可以长按页面试试,如果出现文字选择、粘贴功能的是H5页面,否则是native原生的页面

有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等情况。需要通过对目标测试APP进行对比才可知

这个在支付宝APP、蚂蚁聚宝都是可以判断的

d. 看Loading的方式

如果在打开新页面导航栏下面有一条加载的线的话,这个页面就是H5页面,如果没有就是原生的。

微信里面打开我们的H5页面常见的有个绿色的 加载线条

e. 观察App顶部导航栏是否会有关闭的操作

如果APP顶部导航栏当中出现了关闭按钮或者有关闭的图标,那么当前的页面肯定的H5,原生的不会出现(除非设计开发者故意弄的)

美团的、大众点评的APp、微信APP当加载h5过多的时候,左上角会出现关闭2字

f. 通过判断页面下拉刷新

如果界面没有明显刷新现象的是原生的,如果有明显刷新现象(比如闪一下)的是H5页面(ios和android)

比如淘宝的众筹页面

g. 返回按钮的响应

原生在返回按钮中是做了click事件的,即click按钮,会有变灰的效果,而H5是没有做这样的效果的

h. 下拉页面的时候显示网址提供方的一定是H5

例如问卷星等相关产品

总结大概如以上这些点, 都是一些比较简易有效的方法,希望大家学以致用,如果有更多好的方法,请留言补充,支持小编的分享,请点赞、转发,广而告之,谢谢各位一路的支持

PS:部分文章整合于网络资源,转发请备注来源于个人号:软件测试小黑屋

加群/领取Python、测试学习资料加小编微信

本文分享自微信公众号 - 猪圈子(Tester-sc)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何判断一个APP页面是原生的还是H5页面

    刚好是周末,无意之间在收集相关资料的时候,发现有部分童鞋在问《如何判断一个APP页面是不是H5页面》或者是《如何判断app中原生页面和h5页面》等等类似的问题。

    coder_koala
  • 教你判断一个APP页面是原生的还是H5页面

    刚好是周末,无意之间在收集相关资料的时候,发现有部分童鞋在问《如何判断一个APP页面是不是H5页面》或者是《如何判断app中原生页面和h5页面》等等类似的问题。

    winty
  • 宠汪汪多端(H5和小程序)项目实践

    业务需求需要我们同时在 H5 和小程序开发一套,既保证 App 端入口的功能,也要保证小程序端的功能,还要保证 App 端分享的小程序卡片引导用户进行社交分享,...

    胡哥有话说
  • 【面试现场】如何判断一个数是否在40亿个整数中?

    小史是一个应届生,虽然学的是电子专业,但是自己业余时间看了很多互联网与编程方面的书,一心想进BAT。

    帅地
  • webview添加参数与修改请求头的user-agent实例

    最近公司项目需求,在项目中嵌入h5页面,一般原生,看着感觉跟往常一样,一个地址就完全ok了,如果是这样那就没有这个博文的必要了!

    砸漏
  • App内h5页面如何分版本?

    他们司app的一个新版本的开发,新版本中原来h5页面改造成了native页面,需要在h5页面的入口上做版本判断,在新版上需要跳到native页面,否则还是跳转到...

    zz_jesse
  • 搞定H5测试,让你面试不再受虐!

    ◆ 我们以往的APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定。

    测试小兵
  • 【Webpack】507- 基于Tree-shaking的多平台Web代码打包实践

    在业务中,我们常常会遇到一个场景:同一套web业务代码要在多平台下执行其对应的不同职能。这样很容易出现两个问题:代码里“尸横遍野”的环境判断和分支,提高了代码维...

    pingan8787
  • 【DB笔试面试491】如何判断一个存储过程是否正在运行?

    有两种方式可以判断一个存储过程是否正在运行,其查询SQL语句分别如下所示,若有结果返回,则说明存储过程正在运行。

    小麦苗DBA宝典
  • 面试题,如何在千万级的数据中判断一个值是否存在?

    当你看到这个标题的时候,你也许会想我可以使用hashmap之类的来存储值,然后get就是了。又或者把数据存在数据库里然后去判断就可以了。

    ImportSource
  • H5 打开 App 并跳转指定页(Android/iOS)最 low 实现

    个人工作主要偏向于 Android,所以此篇内容主要以 Android 为例,毕竟鸡老大也曾经说过,不对没涉及的领域做太多评价。

    HLQ_Struggle
  • 小程序开发框架对比(wepy/mpvue/uni-app/taro)

    uni-app 团队投入两周完成了这个深度评测,下面我们就分享下,实际开发不同框架的测试例时遇到的问题,以及在各端的兼容测试结果。在本文里,我们团队基于真实测...

    码客张
  • 【DB笔试面试457】如何判断一个字符串是否含有中文汉字?

    答案部分 可以利用LENGTH、LENGTHB和TO_SINGLE_BYTE函数来解决这个问题。

    小麦苗DBA宝典
  • h5页面适配iPhone X的方法

    项目接近尾声,测试时突然想起还有iphoneX需要适配,虽然页面都是自适应,但是由于iPhone X的特殊性,还是需要特殊对待。因为这个h5项目嵌入在原生项目中...

    honey缘木鱼
  • h5调用底层接口的一些知识

    王小婷
  • h5调用底层接口的一些知识

          之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天...

    王小婷
  • 小程序webview应用实践

    大家好,我是转转开放业务部前端负责人张所勇,今天主要来跟大家分享小程序 webview 方面的问题,但我并不会讲小程序的 webview 原理,而我主要想讲的是...

    Fundebug
  • iOS APP添加桌面快捷方式

    新接到一个需求,需要APP内的某些功能,能够把入口添加到桌面,点击桌面到入口可以直接跳转APP对应界面(类似于下面这张示例图),于是就做了一番调研。

    莫空9081
  • uni-app: 引导页功能如何实现?

    1、Uni-App 启动页和引导页介绍 2、Uni-App 简单引导页示例 3、Uni-App 视频引导页示例

    Javanx

扫码关注云+社区

领取腾讯云代金券