To C产品应该要懂的app与h5交互

你有没有遇到过这种情况：

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实现。