打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
产品应该要懂的app与h5交互
PMdiss(pmdiss.com)
    B端垂直的产品经理社区,是京东、阿里、美团等互联网人学习和交流的平台。我们不仅有CRM、ERP、OMS、WMS、TMS、OA等系统的Demo研习;
    还有各种B端产品垂直的弹药库,包含产品说明书、操作手册、白皮书、业务需求说明书、系统说明书;
    以及适合-1~3年产品经理快速成长的各类认知提升案。

你有没有遇到过这种情况:
1、当想在app中增加一个功能时,不知道是提给客户端开发还是h5开发?
2、当前端界面出现一些bug时,不知道是客户端的问题还是h5的问题?
3、当想让app和h5之间同步一些信息时,不知道是否能实现?

如果你存在以上疑惑,那本文章正是你需要的,下面将讲解几种app的类型、app与h5的通信原理、如何区分页面用原生开发还是h5开发。

01
app的基本类型

app大致分为4种类型:

1、native app

定义:指的是本地化应用,纯原生开发的app,简称NA
优点:原生的UI体验比较好,点开app不需要网络请求就可以直接展示UI,有独立的软件入口进入。
缺点:开发周期长,因为不同的手机操作系统需要独立开发,一般分为IOS和安卓两种版本开发。产品迭代慢,ios版本需要提交到app store审核。新版本不能同步更新老版本,解决线上bug周期长,因为解决完后还需要用户重新下载才能看到没有bug的新版本。

2、web app

定义:指的是纯h5开发的应用
优点:比较灵活,开发周期短,更新迭代快,只需要发个版本,线上就能直接看到
缺点:需要兼容较多的浏览器,且没有独立的软件入口,但是随着技术的发展,以后支持也是有可能的。

3、hybird app

定义:指的是native和h5结合起来的混合型app,这是目前用的比较多的一种模式
优点:既能发挥原生体验好的优势,又能发挥h5更新迭代快的优点。
缺点:native和h5之间需要通信

4、js app

定义:指的是js+原生渲染的app,这是近几年流行一种app,js框架代表有:react native,这是一种跨平台开发框架,使用这个框架,只需要开发一份代码,就能兼容ios和安卓系统,js app一般也会内嵌h5。
优点:跨平台,开发周期缩短,只需要维护一份代码就能兼容ios和安卓系统,如果只是改变了js层面的代码,支持代码热更新,不需要走app store审核。
缺点:如果js app里面内嵌了h5,一样需要通信

小结:native app模式现在基本没什么公司在使用了,js app模式有越来越多的公司使用,也是未来的趋势。如果你是负责某个app的产品经理,首先要了解这款app用的是哪种模式:

1)假如是hybird app,并且是要给native提需求,就需要注意ios和安卓的原生控件可能不一样,可以提前到官网看下这2种系统的控件。如果是给h5提需求,那可以先了解下h5的 web 控件,以免造成不支持的情况。

2)假如是js app,react native封装了2个系统共用的核心控件,当然如果想用安卓或者ios独有的控件也是可以的。可到react native官网查看支持的控件。

02
native与h5的通信原理

native与h5的通信模式有好几种,下面介绍最常用的JsBridge模式。
native在启动时,会开启一个叫做webview的组件,可以把它当作是一个内嵌在native中的浏览器(h5页面将会在这里展示),然后执行一个js文件,建立一个native与h5通信的桥梁:JsBridge。native和h5可以在该桥梁下通信。native和h5沟通好接口协议后,互相调用时,直接调用沟通好的通信名就可以了。

举个例子,有一个音乐下载功能,需要native实现下载,用h5展示下载状态和音乐列表,当你点击某个音乐下载时,h5需要传递音乐的信息给native,并且告诉它下载该音乐。

假设native下载功能的通信名定义是:download。当点击音乐下载时,h5将调用JsBridge的通信方法名download,并且传递音乐信息,JsBridge就会通知native,native发现通信名是download,就会执行下载,下载完毕后,返回下载状态给h5,h5收到消息后,就显示下载状态。

小结:native和h5之间只要沟通好协议,都可以互相传递信息。

03

用native还是h5?

在混合型开发模式中,当产品经理提一个需求时,怎么知道是用native合适还是h5合适?native的用户体验比较好,不需要网络请求就可以直接展示出来。一个app的基本框架,比如导航、一级tab页,很少会变化的UI页面,建议用native实现。h5比较灵活,更新快,所以活动页、商品列表页等经常发生变化的建议用h5实现。

❤️❤️❤️~爱心三连击~❤️❤️❤️

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
程序员需要知道的5种App常用开发模式?你知道几种?
Hybrid APP之Native和H5页面交互原理
Android 与 JavaScript 相互调用桥梁 JSBridge
原荐顶去它的h5,我还是用js写原生跨平台app吧
React Native 初探(iOS)
Android跨平台:请收好这份快速入门Flutter的学习指南
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服