一、问题场景

1、当想在app中增加一个功能时，不知道是提给客户端开发还是H5开发？
2、当前端界面出现一些bug时，不知道是客户端的问题还是H5的问题？
3、当想让app和H5之间同步一些信息时，不知道是否能实现？
4、原生与H5的各自的优点

二、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官网查看支持的控件。

三、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之间只要沟通好协议，都可以互相传递信息。

四、用native还是H5

在混合型开发模式中，当产品经理提一个需求时，怎么知道是用native合适还是h5合适？
native：

  • 需要调起硬件设备功能，必须用原生页面来实现
  • 需要缓存数据，可以进行离线操作时要用原生实现
  • 需要大量的前后台数据交互，且需要保持稳定时需要APP实现
  • 页面和功能比较固定，变动频率较低，且注重用户体验时可以选APP实现
  • 主流程下比较重要的页面，需要APP实现良好的体验和保持稳定性

H5：

  • 经常会有变动和更新的页面可以选择用h5页面，更新页面的时候不需要将整个APP进行发布更新
  • 处在尝试阶段的业务，如临时的活动页面，使用h5开发成本低且可以及时更新
  • 不影响主流程的辅助性页面（如说明介绍页），可选择h5实现
  • 更注重节约成本可以选择h5实现

所以最好在正式进入开发阶段之前能够跟相关的开发人员做好评估，怎样实现是最优的方法，有问题尽早解决，不然一旦投入开发出现问题时迫于进度压力可能就需要改需求或设计，有可能失去较好的用户体验，甚至无法满足原始需求。