提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录
前言
一、什么是混合app？
二、混合app开发优缺点
1.优点：
2.缺点：
三、混合APP开发(原生+H5)
总结


前言



一、什么是混合app？
通俗来讲，就是将h5我们写好的移动端页面，放到ios设备以及安卓设备中

在里面我们可以享受ios和安卓给我们的所有支持，通过方法调用，回调函数进行使用 给我们提供的方法
其实就是方法调用方法

我们H5不好写的功能或者无法写的就交给原生写，通过函数的形式返还回来，我们在使用事件调用即可，就是用我们的方法调用他们的方法。
二、混合app开发优缺点
1.优点：
1、开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；

2、更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核；

3、代码维护方便、版本更新快，节省产品成本；

4、比web版实现功能多；

5、可离线运行。
2.缺点：
1、功能/界面无法自定：所有内容都是固定的，不能换界面或增加功能；

2、加载缓慢/网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感；

3、安全性比较低：代码都是以前的老代码，不能很好地兼容新手机系统，且安全性较低，网络发展这么快，病毒这么多，如果不实时更新，定期检查，容易产生漏洞，造成直接经济损失；

4、既懂原生开发又懂H5开发的高端人才难找。

以上就是原生开发、H5开发和混合开发各自的优缺点。相比之下，由于现代人的个性化需求越来越明显，所以原生APP开发也越来越多，定制化的服务更能满足消费者的需求。

三、混合APP开发(原生+H5)
混合开发（Hybrid App开发），是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，通常由“HTML5云网站+APP应用客户端”两部份构成。
混合开发是一种取长补短的开发模式

原生代码部分利用Web View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。

总结
我们H5不好写的功能或者无法写的就交给原生写，通过函数的形式返还回来，我们在使用事件调用即可，就是用我们的方法吊用他们的方法。

最近做项目，遇到H5和Android交互的模块，具体就是H5主要提供页面，android用webView显示出来，部分topBar和bottomBar用原生android写。
做了一个实验，页面用H5写，android负责解析和显示并进行一定的登录逻辑判断。
特别注意的是android需要用WebView这个类实例化一个对象，通过设置允许和javaScript交互并添加javaScript实例才可以进行混合开发。

	webView = (WebView) findViewById(R.id.webview);
		WebSettings ws = webView.getSettings(); // 获取WebView配置
		ws.setJavaScriptEnabled(true); // 启用JavaScript


webView.addJavascriptInterface(new JavaScriptInterface(), "android");
		webView.loadUrl("file:///sdcard/Local/webHome/h5test.html"); // 加载本地的H5页面
		webView.loadUrl("javascript:btnClick()");
		webView.loadUrl("javascript:btnOpenXinlangPage()");
		webView.loadUrl("javascript:btnC()");
		webView.loadUrl("javascript:btnNextPage()");


并且定义一个JavaScriptInterface用于处理从H5返回的数据，每个接口之前都要加@JavaScriptInterface,不然android无法响应H5的页面元素。

public class JavaScriptInterface {
		@JavascriptInterface
		public void toActivity(String usernameFromH5, String passwordFromH5) {
			// 此处应该定义常量对应，同时提供给web页面编写者
			DialogTest(usernameFromH5, passwordFromH5);
		}

		@JavascriptInterface
		public void toAndroidToastC(String strFromH5) {
			ToastC(strFromH5);
		}

		@JavascriptInterface
		public void toBActivity() {
			Intent intent = new Intent();
			intent.setClass(MainActivity.this, BActivity.class);// forward为当前activity，forwardTarget为新的activity
			startActivity(intent);
			System.out.println("解析H5页面参数失败...");

		}

	}

这里是工程代码
http://download.csdn.net/detail/u014102727/9604085

混合APP开发流程
文章目录
混合APP开发流程
一、什么是混合APP？
二、搭建框架
1.搭建vue基础框架
2.rem自适应屏幕配置
rem和em的区别
三、HBuilder打包



一、什么是混合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下载下来放到服务器上，然后通过手写一个接口实现下载功能，就可以无限下载啦

移动端与原生APP的交互 WebViewJavascriptBridge             直接拿过来用就好了

Hybrid App 混合app 开发