• APP中的 H5和原生页面如何分辨、何时使用


     转自:https://www.cnblogs.com/dahe007/p/6420090.html

    一、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来做比较灵活。

    2、阶段性的营销活动页面,特别是功能、布局等经常需要修改的需求,可以用H5来做。比如节日的有奖活动页面,经常需要调整,用H5做会更灵活。

    四、现在常用的方案

    1、有四种方式来做APP:Web App(纯Web页面)、Hybrid App(web和原生混合开发)、 Native App(原生APP)、Weex和React Native(用类似js、html来写原生效果的页面)。
    2、现在没有全部用H5来做APP的,交互体验太差。
    3、Hybrid App 前几年火过,其努力去打造类似于Native App 的体验,但仍受限于技术,网速,等等很多因素。并不是很完美。
    4、现在很多大公司在尝试用Weex和React Native或者DeviceOne 来实现一些经常改动的页面或者活动营销页面,可以随时发布,交互效果还和原生的一样。其中Weex站在了React Native这个巨人的肩膀上,借鉴并做了更好的尝试,我个人更建议用Weex。

     
     
  • 相关阅读:
    iOS textField placeholder 信息上浮
    iOS 用keypath设置一些属性
    iOS 自由拖动的滑块
    iOS 系统字体和导入新字体
    iOS 无法联网
    iOS 视频启动界面
    iOS 动画分享
    Xcode8 打包ios app,上传APPStore,发布流程 以及证书和配置文件遇到的坑
    mac电脑怎么打开world文档的目录
    ios添加设备真机测试,以及"Undefined symbols for architecture x86_64:''错误
  • 原文地址:https://www.cnblogs.com/ourLifes/p/9982757.html
Copyright © 2020-2023  润新知