今天，我们来聊一聊什么是混合app

目前市场上主流的APP分为三种：原生APP、Web APP（即HTML5）和混合APP三种，相对应的定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢？下面我们就分别从这三者各自的优劣势来区分比较吧！

一、APP原生开发

原生开发（Native App开发），是在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发。比如Android是利用Java、Eclipse、Android studio；IOS是利用Objective-C 和Xcode进行开发。
通俗点来讲，原生开发就像盖房子一样，先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等，都是经过精心的设计。原生APP也一样：通过代码从每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码写出来，一层层，一段段全用代码写出来。
优点：

1、可访问手机所有功能（如GPS、摄像头等）、可实现功能齐全； 2、运行速度快、性能高，绝佳的用户体验；
3、支持大量图形和动画，不卡顿，反应快； 4、兼容性高，每个代码都经过程序员精心设计，一般不会出现闪退的情况，还能防止病毒和漏洞的出现；
5、比较快捷地使用设备端提供的接口，处理速度上有优势。

缺点：

1、开发时间长，快则3个月左右完成，慢则五个月左右； 2、制作费用高昂，成本较高；
3、可移植性比较差，一款原生的App，Android和IOS都要各自开发，同样的逻辑、界面要写两套； 4、内容限制（App
Store限制）； 5、获得新版本时需重新下载应用更新。

二、Web APP (HTML5）开发

HTML5应用开发，是利用Web技术进行的App开发。Web技术本身需要浏览器的支持才能进行展示和用户交互，因此主要用到的技术是HTML5、Javascript、CSS等。
优点：

1、支持设备范围广，可以跨平台，编写的代码可以同时在Android、IOS、Windows上运行； 2、开发成本低、周期短；
3、无内容限制； 4、适合展示有大段文字（如新闻、攻略等），且格式比较丰富（如加粗，字体多样）的页面；
5、用户可以直接使用新版本（自动更新，不需用户手动更新）。

缺点：

1、由于Web技术本身的限制，H5移动应用不能直接访问设备硬件和离线存储，所以在体验和性能上有很大的局限性；
2、对联网要求高，离线不能做任何操作； 3、功能有限； 4、APP反应速度慢，页面切换流畅性较差； 5、图片和动画支持性不高；
6、用户体验感较差； 7、无法调用手机硬件（摄像头、麦克风等）。

三、混合APP开发(原生+H5)

混合开发（Hybrid App开发），是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，通常由“HTML5云网站+APP应用客户端”两部份构成。
混合开发是一种取长补短的开发模式，原生代码部分利用Web View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。

优点：

1、开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；
2、更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核；
3、代码维护方便、版本更新快，节省产品成本； 4、比web版实现功能多； 5、可离线运行。

缺点：

1、功能/界面无法自定：所有内容都是固定的，不能换界面或增加功能；
2、加载缓慢/网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感；
3、安全性比较低：代码都是以前的老代码，不能很好地兼容新手机系统，且安全性较低，网络发展这么快，病毒这么多，如果不实时更新，定期检查，容易产生漏洞，造成直接经济损失；
4、既懂原生开发又懂H5开发的高端人才难找。

三、混合APP开发(原生+H5)

混合开发（Hybrid App开发），是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，通常由“HTML5云网站+APP应用客户端”两部份构成。
混合开发是一种取长补短的开发模式，原生代码部分利用Web View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
优点：

1、开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；
2、更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核；
3、代码维护方便、版本更新快，节省产品成本； 4、比web版实现功能多； 5、可离线运行。

缺点：

1、功能/界面无法自定：所有内容都是固定的，不能换界面或增加功能；
2、加载缓慢/网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感；
3、安全性比较低：代码都是以前的老代码，不能很好地兼容新手机系统，且安全性较低，网络发展这么快，病毒这么多，如果不实时更新，定期检查，容易产生漏洞，造成直接经济损失；
4、既懂原生开发又懂H5开发的高端人才难找。

上面我们了解了三种主流APP，那么我们再来说说怎么进行和安卓 和 ios交换数据

初始化

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

调用方法

// 判断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;
    }

// 我们定义好一个 上传图片方法，放在一个公用的js文件中
function updataImg (obj,callback) {
    if(equipmentType == "android") {
        // 调用android方法,比如是
        android.webviewupdataJs(obj,callback)  // 浏览器不认识的方法，是安卓定义好的方法
    } else {
        ios.webviewupdataJs(obj,callback)
    }
    console.log(obj)
}

最后终极大总结

说一下我对混合开发的理解

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

混合APP开发

移动APP开发的三种方式：

1. native APP
   native APP 是指本地应用程序，也叫原生AP。内部运行的是二进制数据，也就是说原生语言最后是直接转换成二进制数据运行的，可以调用最底层的设备API。如手机摄像头、日历、设备信息等。原生APP是使用相应平台特有的开发工具和语言进行开发的，如android app ,这使得应用程序外观和性能极佳，但是开发成本很高。每一种操作系统都要独立的开发项目。
2. web APP
   web APP是指网页应用APP，也叫移动APP。开发成本低，但是无法调用原生的功能。依赖于MOBILE BROWER(移动设备中的浏览器)运行，内部执行普通的网页代码，也可以理解为是网页在移动设备上执行。移动app使用H5 CSS JS技术即可实现，”一次编译，多个设备运行“。
3. hybrid APP
   混合应用，也叫混合APP，是上面两种方式的混合。结合两者居中的状态，比较适合现代开发。主要是通过web前端技术实现的，在一个原生APP内嵌一个轻量级的浏览器，然后使用h5开发一部分原生的功能，这部分功能可以在不升级APP的情况下动态更新。
   
   三种开发方式的对比：
   
   教科书式的解答。

原生怎么与h5通信

其实通信原理是android原生的方法和h5的方法都挂载在window下面，然后通过事件的触发和回调来实现交互。

混合APP开发流程

一、什么是混合APP？

通俗的介绍一下混合APP（Hybrid App）
混合APP是指web app，就是普通的web网页，外面套了一层原生的壳，相当于一个原生的壳里面有一个WebView网页

二、搭建框架

1.搭建vue基础框架

包括路由，vuex，i18n等
此次省略一万字。。。

2.rem自适应屏幕配置

rem和em的区别

rem是相对html的，而em是相对于使用em单位的元素的字体大小
代码如下（示例）：

p{
	font-size:20px;
	padding:10em;// 这里的10em是相对与20px的，也就是20*10=200px
}

代码如下（示例）：

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
(function(designWidth, maxWidth) {
	var doc = document,
		win = window,
		docEl = doc.documentElement,
		remStyle = document.createElement("style"),
		tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "12px";
	} else {
		doc.addEventListener("DOMContentLoaded", function() {
			doc.body.style.fontSize = "12px";
		}, false);
	}
})(360, 1024);

在main.js中直接引入这个js文件

//引入rem文件
import './assets/public/rem.js';

使用rem单位
在任何css预加载中都可以使用rem作为单位，例如：

font-size:0.18rem;// 只需要按设计稿中的尺寸/100就好，他会自动转换

三、HBuilder打包

我这边使用的是云打包，然后生成下载链接后，因为云打包的下载链接只能下载五次，所以我们直接把app下载下来放到服务器上，然后通过手写一个接口实现下载功能，就可以无限下载啦