混合开发

随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求。原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝、美团等。下面,结合我本人的开发经验,简单谈一下对混合开发的认识以及实现方式。

混合开发的优点

优点显而易见,由前端工程师写一个页面,多个平台都可以运行,省了AndroidiOS工程师不少事,无形中提高了开发效率,节约了开发成本。

缺点

凡是使用过的人都知道,H5的界面显示在手机上,对点击、触摸、滑动等事件的响应并不如原生控件那样流畅,甚至还会出现卡顿。这样也很正常,如果体验跟原生控件一样好的话,也就没android(ios)工程师什么事了。

App中使用H5页面的原因

App里之所以用到H5页面,多是因为这个页面上的内容和结构都是属于高频变化的,使用Native App页面来实现的话则需要不断发布新版本才能实现,这一点不现实。而App都是可以调用原生系统浏览器或者集成到App里的浏览服务,因

此属于高频变化的内容和结构通过web页面来表现,再通过App来调用H5页面就可以轻松解决这个问题了。而且,经过优化专门适配移动端的H5界面已经很接近Native App的页面了,很多时候我都压根没有感受出来,也因此H5页面在

App上被广泛应用。

属于高频变化的内容和结构的页面多来自产品运营,一般包含:运营活动页面/广告/应用内推送消息等。

应用场景

一、App推送消息

App的推送消息从打开方式上来说可以分为两类,第一类是点击推送消息直接打开指定App页面,比如多数资讯类App(知乎、澎湃新闻等);第二类是点击推送消息打开一个H5页面,再通过点击web页面里的内容模块打开指定的App页面。

第二类推送消息在电商类/生活服务类等重运营的App里应用很多。比如图例中的大众点评对KTV商户的一次推送消息,这个推送消息里包含了多家的KTV商户,用户根据自己的喜好点击自己喜欢的KTV商户,进入该KTV商户的店铺详情

页面(指定App页面)

大众点评的一条KTV推荐的推送消息,打开后可以看到KTV商户列表

高德地图里的推送通知消息

二、App内运营活动/广告Banner

这种web在App上的使用方式同上文的推送消息有异曲同工之妙,主要也是应用在重运营的App上,对电商类App的一次营销活动,对音乐类App的一个音乐精选集/音乐人的推荐,通过首页的推荐Banner位引导打开丰富的内容页面都是一个

很好的方式。

虾米音乐首页我是歌手的Banner位

三、作为过渡的Native App页面的替代品

这一种使用方式不太常见,但是可以作为App早期开发中过程中的一种替代手段。由于web的开发效率相对App来说会高一些,在App开发的初期为了抢占用户和市场先机而不得不在规定的时间内发布一款功能完整的App时,可以使用这种

方式来进行操作,基础的核心功能使用Native App页面来实现,一些非核心功能/使用App页面实现起来耗费工时的页面可以使用web页面来实现,这一点在早期的钉钉App版本里应用很多。

钉钉里的签到功能,点击打开后是web页面

四、App调用第三方服务时

调用第三方服务并且涉及到复杂的数据验证处理又必须由第三方来完成时,这种方式是一个比较不错的解决方案,事实上,大量的第三方服务公司也是通过web来提供自己的产品和服务的。支付服务属于这一类范畴的最常见应用领域,例

如Paypal支付服务,Braintree支付服务,支付宝支付服务等。

集成到楚楚街上的中国银联支付

中国银联支付页面

在App里使用web页面时需要注意哪些事项呢?

  • 仅作为辅助功能,核心功能尽量不使用web来进行代替

  • web页面的导航层级不宜超过两级

    从 Native App页面进入web页面上时一般都是App的二级或者三级导航的深度了,进入到web页面后会脱离掉App的导航体系,用户心理会变得有一些疑惑或者不确定。如果web页面的层级又比较复杂比较深,会造成用户很难理解

    这个页面下一步又是什么页面,怎么回去上一个页面,在这种疑惑和恐慌中很有可能的情况是用户会关闭这个web页面回到Native App上相对熟悉的页面,导致web页面的流失率很高。

  • 注意对各种机型的适配

   这一点主要是考虑到开发出来的web页面响应式布局实现上,尽量使web页面表现的像Native App页面,同时解决多机型适配的问题,因为在A机型上展示良好的页面在B机型上可能完全展示不了。我在为Getone App接入Paypal支

   付时,开始时没有留意,后来发现我们选择使用的新版Paypal支付页面在大量的机型上都无法显示(Paypal提供的支付页面本身存在的适配问题),后来通过及时调整回旧版支付页面才解决这个问题。

  • 对于长期高频使用的Web页面要提供管理后台,方便运营人员编辑

    对于产品运营中要频繁使用的web页面最好开发出来管理后台,提供几个模板,运营人员每一次只需要编辑和添加内容即可实现需要的web页面,可以极大提高运营的效率。

参考

怎么在App里正确使用H5页面,你造吗?

客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项的更多相关文章

  1. 客户端相关知识学习(十二)之iOS H5交互Webview实现localStorage数据存储

    前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...

  2. 客户端相关知识学习(十一)之Android H5交互Webview实现localStorage数据存储

    前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...

  3. 客户端相关知识学习(六)之deeplink技术

    Deeplink应用描述 Deeplink,简单讲,就是你在手机上点击一个链接之后,可以直接链接到app内部的某个页面,而不是app正常打开时显示的首页.不似web,一个链接就可以直接打开web的内页 ...

  4. 客户端相关知识学习(三)之Android原生与H5交互的实现

    Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...

  5. 客户端相关知识学习(十)之app给h5传递数据

    方法一: app可以把参数传到h5的链接里,用类似?xx=xx&xx=xx的形式拼接,js解析参数即可. 方法二: 情况一:app调用h5 原生app都可以对js的function进行触发,前 ...

  6. 客户端相关知识学习(九)之h5给app传递数据

    方法一: 情况一: if (window.JdAndroid){          window.JdAndroid.setPayCompleted();          window.JdAndr ...

  7. 客户端相关知识学习(八)之Android“.9.png”

    参考 Android中.9图片的含义及制作教程 .9.png Android .9.png 的介绍

  8. 客户端相关知识学习(五)之什么是webView

    webview是什么?作用是什么?和浏览器有什么关系? Android系统中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件也就是说WebView是一个基 ...

  9. 客户端相关知识学习(四)之H5页面如何嵌套到APP中

    Android原生如何渲染H5页面 Android与 H5 的交互方式大概有以下 1 种: 利用WebView进行交互(系统API) iOS原生如何渲染H5页面 iOS 与 H5 的交互方式大概有以下 ...

随机推荐

  1. Go 结构体与初始化

    Go 通过类型别名(alias types)和结构体的形式支持用户自定义类型. 结构体是复合类型,当需要定义类型,它由一系列属性组成,每个属性都有自己的类型和值的时候,就应该使用结构体,它把数据聚集在 ...

  2. Maximum upload size exceede上传文件大小超出解决

    在这里记录三种方法, 努力提高自己的姿势水平 application.yml配置 spring: servlet: multipart: enabled: true max-file-size: 10 ...

  3. Linux 相关系统日志查看

    1. 登录日志 cat /var/log/secure 涉及到账号登录的日志信息都会记录在此文件中. 2. Unit 的启动日志 journalctl 可以查看所有 unit 的启动日志,日志的配置文 ...

  4. LVS配置

    今天面试时,突然被面试官问到怎样用shell命令搞定某个文件夹下java代码行数的统计. 想了一下,基本思路就是找到这个文件夹下面的所有java文件,然后每个文件统计一下代码,外层套个for循环,叠加 ...

  5. python:科学计数法转化为浮点型数据

    def as_num(x): y='{:.5f}'.format(x) # 5f表示保留5位小数点的float型 return(y) 实验一下 as_num(1.2e-4) In [3]:as_num ...

  6. LoadRunner脚本编写之二

    LoadRunner脚本编写之二 编程基本语法必须要记牢.程序的思想也很重要. 下面来回顾一下嵌套循环例子. Action() {     int  i,j;   //生命两个变量     for ( ...

  7. Maven打包时出现无法下载org.apache.maven.plugins插件

    解决方式: 方式1:使用 mvn clean package -U 打包即可(注意:出于性能原因,Maven缓存插件无法下载的信息.根据您的设置,您可能需要通过将标志添加-U到命令行来清除此缓存,以使 ...

  8. frei0r-1.7.0 20191207-0d4b342 DLLs

    https://files.cnblogs.com/files/nlsoft/frei0r-20191207-0d4b342-bin.7z

  9. Python:Base4(map,reduce,filter,自定义排序函数(sorted),返回函数,闭包,匿名函数(lambda) )

    1.python把函数作为参数: 在2.1小节中,我们讲了高阶函数的概念,并编写了一个简单的高阶函数: def add(x, y, f): return f(x) + f(y) 如果传入abs作为参数 ...

  10. (2)网络基础之IP

    IP分为IPV4和IPV6. 以下只讲IPV4,IPV6后期会重新分出来 (以下均为个人理解,如果有误,欢迎提出.也希望如果转载,能通知我并注明转载信息,毕竟字也是我一个个码出来的.谢谢) IPV4地 ...