码迷,mamicode.com
首页 > 移动开发 > 详细

怎么判断一个APP是原生APP、混合APP还是WEB APP ?

时间:2017-05-04 23:20:34      阅读:3791      评论:0      收藏:0      [点我收藏+]

标签:大众点评   支付宝   开发者   文章   蚂蚁   

1、看断网情况

   通过断开网络,刷新页面,观察内容缓存情况来有个大致的判断,可以正常显示的就是原生写的,显示404或者错误页面的就是html页面。

2、看布局编辑

3、看复制文章的提示,需要通过对比才能得出结果。

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

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

   在支付宝APP、蚂蚁聚宝是可以判断的。

4、看加载的方式

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

5、看app顶部,导航栏是否会有关闭的操作

   如果APP顶部导航栏当中出现了关闭的按钮或者关闭的图标,那么当前的页面是H5页面,原生的不会出现(除非设计开发者特意设计),美团、大众点评的APP、微信APP当加载H5过多的时候,左上角会出现关闭两个字。

6、判断页面下拉刷新的时候(前提是要有下拉刷新的功能)

   如果页面没有明显刷新现象的是原生的,如果有明显刷新现象(比如闪一下)的是H5页面(Ios和Android)。比如淘宝的众筹页面。

7、下拉页面的时候显示网址提供方的一定是H5页面。

    技术分享


8、利用系统开发人员工具

   找到手机的设置,开发者选项,显示布局边界,选择开启后再去查看APP整体布局边界,这样所有应用控件布局就会一目了然。

   如果是native APP那么每个按钮、文字、图片都是红色的线显示这个控件的布局情况。如下图的微信:

   技术分享

   如果是web APP那么应该就是一个webview去加载网页,webview作为一个控件,只有一个边界框,即只有屏幕边才有红色线,如下图: 

   技术分享 

混合APP 则是native 与 webview 混排的界面,如下图红色线框是各控件的绘制边界,中间那一大块布局丰富的界面没有显示出很多边界红线,就是网页实现的。如下图的京东:

   技术分享

本文出自 “学习改变命运” 博客,谢绝转载!

怎么判断一个APP是原生APP、混合APP还是WEB APP ?

标签:大众点评   支付宝   开发者   文章   蚂蚁   

原文地址:http://itzhongxin.blog.51cto.com/12734415/1922038

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!