锐客网

  1. 首页 > 睿知 > it技术 > >

APP中的 H5和原生页面如何分辨（）

IT知识页面原生如何

枕上从妨一夜睡，灯前读尽十年诗。这篇文章主要讲述APP中的 H5和原生页面如何分辨？相关的知识，希望能为你提供帮助。
一、APP内嵌H5和原生的区别1、原生的页面运行速度快，比较流畅。
H5页面相对原生的运行性能低，特别是一些动画效果有明显卡顿。
2、H5页面的很多交互都没有原生的好，比如弹层、输入时候的页面滑动 等。H5的效果相对比较low，没有原生的好看，也没有原生默认的动画等效果。
3、原生APP修改页面要重新发布，等待审核（现在ios的审核速度已经提高到1天到2天）。
H5页面的修改 可以随时上线，不用等待审核。
4、H5跨平台，iOS和android需要各自开发。相对原生，H5开发成本低。
5、原生APP能很好的使用设备底层功能，如摄像头、方向传感器、重力传感器等。H5有所限制。
比如android里的H5对摄像头和方向传感器就需要再多做一些处理。再比如你不想用系统默认的手机相册样式，就要用原生来开发了。
6、H5过度依赖于网络，网络不好的时候卡到不行，并且刚打开看到的都是一个空白页面。
默认的H5页面每次打开都会重新请求页面（可以做缓存，不过基本很少有做的）。
H5比原生更费流量，H5除了加载html还要加载js、css这些资源文件，相比原生网络加载速度慢。
二、APP原生和H5页面如何分辨1、android手机可以修改设置：  设置—》开发者选项—》显示布局边界（Show layout bounds） 。
这样就能看到控件的布局了，如果包含图片、文字等信息的一整块区域只有一个边框，应该就是H5实现的。
iOS在真机上没有这个选项。一般开发人员可以 用mac上的Reveal软件 来查看APP的布局，或者用网络抓包来分析是否为H5页面。
2、新打开页面，如果页面是个空页面，基本就是H5页面。原生的页面一般都会有一些控件提前放在页面中。
如果空页面  上拉还有大块黑色的背景，就是H5页面，不过现在很多开发人员已经做了优化，不会显示黑色的大色斑。
3、关闭网络后，如果是整个的空白页，这个基本就是H5页面。如何页面还有控件基本就是原生的。
4、下拉刷新的时候H5会有一个明显的刷新现象，比如闪现、导航栏标题消失等。
原生的下拉刷新没有明显现象，很平滑。
5、如果开发人员没有禁用掉WebView的长按手势，会弹出一个系统默认的快捷菜单：拷贝、查询、添加、分享。这个页面就是H5页面。
6、如果打开一个页面顶部有个进度条，就是H5页面。当然很多H5页面也没有加进度条。
7、页面的底部导航  在上拉的时候 如果跟着一起滚动，就是H5页面。
8、H5弹框、页面跳转等和原生的效果都不一样，可以仔细看下。
9、H5页面点击 输入框，弹出的键盘上面一般都有“完成”按钮，原生的没有。
三、APP原生和H5什么时候使用1、核心需求 要用原生，比如淘宝里的产品详情页、订单页、支付页等。
非核心需求 可以考虑用H5，遇到功能调整，可以快速发布。比如淘宝首页的特色好货、热门市场等栏目 需要经常变动，用H5来做比较灵活。
【APP中的 H5和原生页面如何分辨（）】2、阶段性的营销活动页面，特别是功能、布局等经常需要修改的需求，可以用H5来做。比如节日的有奖活动页面，经常需要调整，用H5做会更灵活。











    推荐阅读


    上一篇：如何在android studio中cordova的混合开发

    下一篇：win8系统关机一段时间后总是自动开机如何处理