什么是混合开发？前端开发如何调用

首先搞清楚什么是混合APP开发（Hybrid App）

HybridApp（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”

通俗来讲，就是将h5我们写好的移动端页面，放到ios设备以及安卓设备中，在里面
我们可以享受ios和安卓给我们的所有支持，通过方法调用，回调函数进行使用给我们提供的方法

其次搞清楚APP都有哪些类型？

一，原生APP
现在的智能手机操作系统就是主流的ios和Android，所以原生APP就是针对这两种操作系统用原生程序编写的应用程序。原生APP运行时是根据本地的操作系统，所以兼容能力和访问能力好，用户体验和交互界面可以说是最好的。

二，webAPP
WebApp是指基于Web的系统和应用，它的作用是向广大用户发布比较复杂的内容和功能。是针对ios和Android优化后的web站点，不需要下载安装更新，普通的web语言开发，只需要通过手机浏览器运行。

三，混合APP
介于原生APP和WebAPP之间的APP，所以它是综合了两类APP的优点，同时采用网页语言和程序语言进行开发，用户需要下载安装使用，开发成本和难度都大大降低。现在所使用的微信，淘宝都是混合APP。

混合APP原理

混合APP通常由前端负责大部分界面开发和业务逻辑，原生负责封装原生功能供前端调用，二者以 WebView 作为媒介建立通信，从而既拥有 Web 开发的速度优势，又能拥有强大的原生能力。

从一个前端开发者的角度来看，混合应用可以简单地理解为让前端页面跑在一个特殊的浏览器环境里，这个环境除了常规 Web API之外，还额外提供了很多可以直接调用手机原生能力的 API。

从一个原生开发者的角度来看，混合应用其实就是一个原生开发的 App 外壳，这个外壳将原生功能封装成很多 API 并注入到 WebView 里，然后将前端页面打包进 App，App 启动时用 WebView 加载前端页面，剩下的就全交给前端了。

如何进行和安卓和 ios交换数据

简单粗暴一句话，就是方法调用方法

// 初始化方法
function init (obj) {
// 在页面初始化我们可以拿到原生端给我们传来的初始化数据,他们会默认调用一次初始化方法
console.log(obj)
}

进行判断是android还是ios

// 判断h5在ios还是安卓
function detect(){
var equipmentType = “”;
var agent = navigator.userAgent.toLowerCase();
var android = agent.indexOf(“android”);
var iphone = agent.indexOf(“iphone”);
var ipad = agent.indexOf(“ipad”);
if(android != -1){
equipmentType = “android”;
}
if(iphone != -1 || ipad != -1){
equipmentType = “ios”;
}
return equipmentType;
}