• 咨询热线 : 18581882801
  • 24小时服务热线 : 028-85239825
  • 微信咨询
  • QQ咨询
  • 留言/需求提交
APP新增页面用H5,还是原生?

千联信息

2018-09-21

浏览量 : 568

app开发,网站开发,微信开发,小程序开发,微信小程序开发,软件定制,网站建设


有很多项目,在选择H5还是原生上面纠结了好一阵,用原生的话,老版本无法兼容;用H5的话,功能及页面过于粗糙,开发出来的效果无法满足需求。

 

在这种情况下,产品该如何决策,某个功能用H5还是原生来实现呢?

本文通过对H5和原生异同点的梳理,希望能够对以后产品决策提供帮助。分为以下三部分:

 

如何区分一个页面是H5还是原生

H5和原生可实现功能列举

如何确定一个项目用H5和原生

5种方法区分页面是H5还是原生


1.看断网的情况

把手机的网络断掉,再点开页面。

可以正常显示页面内容或是有网络诊断引导就是原生;

显示404或错误页面的是H5页面。


2.看加载的方式

新打开一个页面,看导航栏下面是否有一条加载线。

如果没有,就是原生的。

如有,这个页面就是H5页面;比如微信里面打开我们的H5页面常见的有个绿色的 加载线条。


3.看下拉刷新的情况

前提是APP有下拉刷新,此时下拉页面:

如果没有明显页面变化,或是有动态下拉刷新loading图,是原生;

如果页面闪了一下,或是显示该网页由XXX提供,是H5页面。

注:有的APP并没有下拉刷新,此时即使用H5,下拉也没有任何反应。

 

4.看复制文章的提示

如果页面有大段文字,长按页面后:

如果出现文字选择、粘贴功能的,是H5

长按无反应,或是出现APP独有的复制按钮的,是原生。

注:有些原生APP自身也开发了复制粘贴功能,有的H5css屏蔽了复制选择功能等等。此种判断依据误差较大。

 

5.看布局边界(限安卓)

可以在设置中打开【开发者选项】中的显示布局边界。

在页面元素很多的情况下布局是一整块的,是h5

布局密密麻麻的是原生。

有什么是H5或是原生的独有功能

随着前端技术的发展,H5可以实现的功能及效果已经越来越接近原生APP

但仍然有些技术壁垒由于平台性能等无法攻克,下表列出了H5和原生能实现的常见功能及推荐,在遇到面临包括此种功能的需求时,可以直接据此判断用何种技术来实现。

 

总结上方H5优缺点后,可以得出以下方便产品快速决策的结论:

如果项目核心需求中,包含富文本、动画、大量格式,且无其他需求(如电商的商品图文详情、文章咨询等)——使用H5,可以更好更快地实现功能。

如果项目核心需求中,需要调起本机硬件功能、离线操作(如电商评价页面需要上传图片)。——必须使用原生,H5无法实现。(随着H5技术发展,已经可以逐渐实现调取相册、相机功能,其他功能相信也会陆续实现。但短期内,原生实现调起底层硬件的成本和体验都要大幅度占优。)

如果项目需要较高的用户体验(如游戏或是模型操作),且项目时间较宽裕 ——使用原生,流畅性和体验更好。

如果项目需要大量的前后台数据交互,且需要保持稳定(如电商购物车、订单页面)。——使用原生,原生的API更加稳定,对于弱网状态的兼容也更好。

如果项目处在初期试错阶段,不确定是否要长期运营,或是暂时的活动页面。——使用H5,成本低,开发周期短;可以保证用户更新及时性,且无新老版本兼容问题(原生APP一定要发版才能实现新功能,且旧版本用户不升级就无法体验)。

另:

在多篇他人文章中都提到过,H5和原生各有长短,单独的html APP或是原生 APP均有所局限,所以现在常态的互联网APP均采取Hybrid形式,即部分功能原生,部分功能H5

 

最后附上一个小贴士:

Hybrid APPH5内嵌APP页面),建议头部使用原生的,名称读取H5document title,常驻back按钮。这样在加载过程中,用户体验较好。且如果网速差,也可以快速返回,不浪费用户的流量及时间。


标签:app开发 网站开发 微信开发 小程序开发 微信小程序开发 软件定制 网站建设
相关阅读:
如何打造一个高效适配的H5?
以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一遍分辨率测试和微调,这时想屎的心都有了。而且这些适配都是建立在已知的分辨率尺寸库上,如果市面新出来一款分辨率尺寸机型,呵呵,又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口,那么就不会再有上面 这些烦恼,且开发效率快和维护成本会降低很多。
微信小程序开发和H5网页开发有什么区别
在移动互联网的时代,越来越的企业将营销的重点放在了移动端用户,因此不少专门针对移动端用户的产品就出现了,例如APP、微信小程序、H5网页等等,它们占据了我们大量的休闲时间。
一个成功的H5,要击中用户要害,达到运营目的
暂先不说“成功”如何定义,你能告诉我什么是H5吗?我们都知道,H5是HTML5的缩写。但HTML5只是一个页面实现方式的技术名词,难道我们平日所指的就是这个技术名词吗?显然不是。
APP新增页面用H5,还是原生?
有很多项目,在选择H5还是原生上面纠结了好一阵,用原生的话,老版本无法兼容;用H5的话,功能及页面过于粗糙,开发出来的效果无法满足需求。
H5开发的介绍以及的各种应用
HTML5 受包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等国外主流浏览器的支持;国内的傲游浏览器(Maxthon), 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。
Html5开发学院
微信小程序开发和H5网页开发有什么区别
在移动互联网的时代,越来越的企业将营销的重点放在了移动端用户,因此不少专门针对移动端用户的产品就出现了,例如APP、微信小程序、H5网页等等,它们占据了我们大量的休闲时间。
如何打造一个高效适配的H5?
以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一遍分辨率测试和微调,这时想屎的心都有了。而且这些适配都是建立在已知的分辨率尺寸库上,如果市面新出来一款分辨率尺寸机型,呵呵,又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口,那么就不会再有上面 这些烦恼,且开发效率快和维护成本会降低很多。
APP新增页面用H5,还是原生?
有很多项目,在选择H5还是原生上面纠结了好一阵,用原生的话,老版本无法兼容;用H5的话,功能及页面过于粗糙,开发出来的效果无法满足需求。
一个成功的H5,要击中用户要害,达到运营目的
暂先不说“成功”如何定义,你能告诉我什么是H5吗?我们都知道,H5是HTML5的缩写。但HTML5只是一个页面实现方式的技术名词,难道我们平日所指的就是这个技术名词吗?显然不是。
H5开发的介绍以及的各种应用
HTML5 受包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等国外主流浏览器的支持;国内的傲游浏览器(Maxthon), 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。
获取报价方案

扫一扫,关注微信公众号

来微博关注我@千联信息

Copyright@2015-2019 成都千联信息技术有限公司 蜀ICP备17010330号-1 网站地图