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

Posted 2023-05-06

参考技术A 如今最火的APP开发模式是Hybrid APP开发（即混合模式，半原生半H5页面）。

把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。

显示404或者错误页面的是html页面。

可以打开 开发者选项中的显示布局边界，页面元素很多的情况下布局是一整块的是h5的，布局密密麻麻的是原生控件。页面有布局的是原生的否则为h5页面。（仅针对安卓手机适用）如下图所示：

这个需要你通过对比才能得出结果，比如是文章资讯页面可以长按页面试试，如果出现文字选择、粘贴功能的是H5页面，否则是native原生的页面。

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

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

如果在打开新页面导航栏下面有一条加载的线的话，这个页面就是H5页面，如果没有就是原生的。微信里面打开我们的H5页面常见的有个绿色的 加载线条。如下图红框里面所示：

如下图所示：

希望可以帮到大家，以便更加容易区分原生APP页面和H5页面。

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

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 混排的界面，如下图红色线框是各控件的绘制边界，中间那一大块布局丰富的界面没有显示出很多边界红线，就是网页实现的。如下图的京东：

   

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