1. h5页面和app页面怎么通讯
通讯方法如下：
URL Scheme 是最常见的方法了，它的核心概念是拦截URL。
APP实现了一个webview，H5在其内打开。
它可以拦截到H5发生的跳转信息，如URL。如果以URL作为通信依据，就可以随意约定个URL，如：建立通信：https://__bridge_loaded__ 获取token：https://nativaAPI_getToken
H5就可以通过跳转到该地址被APP拦截，APP识别到了约定的URL触发对应方法。
2. 拦截打印日志
APP的webview有对应的监听，可以拦截到JS的 alert 等。就可通过输出 alert("标识", "方法名", "参数") 等方法进行通信。IOS 由于安全限制，UIWebView 性能原因已弃用不考虑，WKWebView 对 alert 等方法做了拦截，需要做代理处理一下即可。android 通过 WebView.addJavascriptInterface 方法实现。但因 Android 4.2 以前的系统中没有正确限制使用WebView.addJavascriptInterface，导致攻击者可以伪造汪族JS桥接调团陵让用原生方法，存在安全漏洞，因此较少见。Google在Android 4.2 版本中修复了他，通过在Java方法内的最上面声明一句@JavascriptInterface，从而避免漏洞攻击。若想 4.2 版本前使用塌局就要另寻出路，window.prompt 一问一答的机制恰好可以满足，Android onJsPrompt方法中去解析传递过来的文本，将处理结果返回给JS。
3. window注入
window注入就比较好理解了，就是双方在JS的window下写入通信变量。其实上面两种方法也多少会涉及window注入。它是一个对象，常用的有这几个方法（想用什么自己写入）。
2. H5端与原生混合开发遇到的一些问题
在与原生安卓/IOS实现混合开发时，会遇到一些问题，在此做下记录（以下是目前遇到的或之前有记录到的一些问题，后续如果有遇到新的问题或整理过程中发现其他的一些问题再补上）：
1.H5页面拨打电话问题
（1）在移动端页面实现时，只需使用a标签，<a href="tel:1234567">即可实现。
（2）与原生混合开发时，安卓端嵌入我们的H5页面，采用以上方式却无唯顷型法实现，（IOS端是没有问题的），因此需要调用原生本地的拨打电指猜话方法。
2.IOS时间的一个兼容性问题
H5页面实现过程中遇到了时间处理的问题。使用new Date(time).getDay()的时候，正常返回应该的是0-6，对应每周的星期日到星期一，但在IOS上，例如：我们使用乎洞的是（2018-6-4）的话，它会返回undefined。因此我们在这里应该对这个时间格式进行处理，将其改为（2018/6/4）的格式去获取。
即：new Date("2018-06-04").replace(/-/g ,"/");
3. H5页面与原生App（安卓，IOS）交互
在客户端项目中，同一个app会开发成两个版本，一个是安卓版本，一个IOS版本，公司必须有两个开发团队（一个安卓团队，一个IOS团队）来进行开发，这样一来，开发成本非常之高。所以，往往在实际项目-中，会嵌套很多H5页面，一个H5页面同时兼容安卓和IOS两个系统 ，这样一来，大大减少了开发成本，前端开发页面就必须和原生进行交互。
1. 页面开发 —— 前端开发人员将所有的页面按照移动webappp进行开发，做好不同屏幕的适配（宽度100%,视口为移动端视口 (快捷方式meta:vp tap），字体适配rem单位，设置html根标签的font-size然后根据媒体查询判断设备屏幕大小进而设置html根标签的不同汪盯fontsize，去除移动端高亮显示；小图标要善于使用字体图标（常用的字体图标库有阿里巴巴矢量图），改变input标签的默认样式可以采用隐藏input,然后通过字体图标来控制前面的图标，就可以做成自己想要的图标效果）
2.前端页面部署 —— 设置好入口文件（原生一进来就进入的页面，命名为index.html），部署到对应的服务器上，通过网址就能够访问到页面，将网址给app客户端开发人员，他们将app配置好环境后讲页面嵌套在app中。
3.进行数据对接：两种对接方式（1）.前端页面自己通过ajax去后台拉数据，然后自己在页面上使用再提交给后台。前提是原生需要将对应的设备号，加密方式，请求数据所需要的各种参数通过回调函数传递给H5页面，H5页面拿到这些数据困基和后直接调后台的借口、获取到数据。（2）.前端页锋辩面不用自己去后台拉取数据，而是通过回调函数，获取到原生app拉取的数据，前端页面将这些数据处理后又通过回调函数交给app，再又app发送给后台。两种调用的优劣比较：如果H5页面及数据不是很多，使用第二种方式比较合理，不用H5页面请求数据（不用封装请求，不用加密数据），不使用框架，大大减少了页面的大小，提高性能及用户体验。如果涉及到的前端页面非常多，数据交互比较复杂的话，就必须使用第一种对接方式了，app只需要将设备号，加密规则，参数传递给H5，H5根据页面需求自己向后台拉去和请求数据，直接交互，不再通过app进行转接，减小复杂程度。
4. （2）Android 调试 H5页面
我们使用chrome 浏览器 + Android 手机的方式进行页面调试。
因为安卓机型比较多，所以打开开发者模式的过程可能会略有不同，方法就是在 “设置” 中找到当前Android手机的版本号（不是Android的版本号），多次点击，手机下方就会有toast提示进入开发者模式。
打开手机的“设置”，往下滑动找到开发人员选项，进入后打开USB调试的开关。
将电戚判脑和手机连入同一个网络，用数据线将手机连到电脑上面，信任电脑设备，这样就完成连接了。
在chrome浏览器地址栏中输入态大chrome://inspect/#devices，我们就能看到连接的Android设备了。
点击以上的inspect以后可能会一直显示白屏，这时候我们从两个方向尝试着去解决这个问题：
1、检查当前电脑是否能正常打开google页面， 必须确保能正常打开，因为这个功能需要访问谷歌服务。
2、检查浏览器版本，尽量使用帆仔竖最新版本的chrome。
5. 怎么在App里正确使用H5页面，你造吗
用了这么多App，自己也做了App产品，注意到通过web页面在App里的正确应用可以轻松解决很多产品运营方面的问题，总结一下分享给大家。不是什么高技术含量的东西，贻笑大方了。
App里之所以用到web页面，多是因为这个页面上的内容和结构都是属于高频变化的，使用Native App页面来实现的话则需要不断发布新版本才能实现，这一点不现实。而App都是可以调用原生系统浏览器或者集成到App里的浏览服务，因此属于高频变化的内容和结构通过web页面来表现，再通过App来调用web页面就可以轻松解决这个问题了。而且，经过优化专门适配移动端的web界面已经很接近Native App的页面了，很多时候我都压根没有感受出来，也因此web页面在App上被广泛应用。
属于高频变化的内容和结构的页面多来自产品运营，一般包含：运营活动页面/广告/应用内推送消息等。
那，在哪些场景下web页面会在App里被使用呢？含带
说起App启动页，这是一个 Caodan的故事，因为在大量的App的启动页上已经做起了广告了，而更甚得是，还有App做了两个不一样的启动页连着显示，真挺牛B的[枪毙][枪毙]。启动页作为展示App品牌区域极好的手段，并且优质的启动页内容会不断地在用户内心里加以深化。每天我们看到的App不断变化的启动页内容都是通过web来实现的，很多人都没有感知到那是一个web页面。圣诞节的时候，打开虾米音乐时，启动页内容是带圣诞树带雪一个房子，现在想起来都暖烘烘的。而今年大红的钉钉，支持自定义启动页图片内容，一直想给团队做一个属于我们自己的很酷的启动页，结果被无限拖延。
[2016/03/01 备注---后来题主通过阅读才发现，启动页的图片更换并不是通过html的页面来实现，特此勘误，敬请谅解]
App的推送消息从打开方式上来说可以分为两类，第一类是点击推送消息直接打开指定App页面，比如多数资讯类App(知乎、澎湃新闻等)；第二类是点击推送消息打开一个web页面，再通过点击web页面里的内容模块打开指定的App页面。第二类推送消息在电商类/生活服务类等重运营的App里应用很多。比如图例中的大众点评对KTV商户的一次推送消息游棚，这个推送消息里包含了多家的KTV商户，用户根据自己的喜好点击自己喜欢的KTV商户，进入该KTV商户的店铺详情页面（指定App页面）
这种web在App上的使用方式同上文的推送消息有异曲同工之妙，主要也是应用在重运营的App上，对电商类App的一次营销活动，对音乐类App的一个音乐精选集/音乐人的推荐，通过首页的推荐Banner位引导打开丰富的内容页面都是一个很好的方式。
这一种使用方式不太常见，但是可以作为App早期开发中过程中的一种替代手段。由于web的开发效率相对App来说会高一些，在App开发的初期为了抢占用户和市场先机而不得不在规定的时间内发布一款功能完整的App时，可以使用这种方式来进行操作，基础的核心功能使用Native App页面来实现，一些非核心功能/使用App页面实现起来耗费工时的页面可以谈磨芦使用web页面来实现，这一点在早期的钉钉App版本里应用很多。
调用第三方服务并且涉及到复杂的数据验证处理又必须由第三方来完成时，这种方式是一个比较不错的解决方案，事实上，大量的第三方服务公司也是通过web来提供自己的产品和服务的。支付服务属于这一类范畴的最常见应用领域，例如Paypal支付服务，Braintree支付服务，支付宝支付服务等。
当然浏览器这类App的主体就是web页面，我们不再赘言。
这一点涉及到技术领域了，作为一个产品汪对此的了解实在有限，了解到的实现方式有以下两种，使用系统内核浏览服务和使用第三方提供的浏览服务。鹅厂提供了X5浏览服务SDK，号称表现性能优异，在微信里公众号文章使用的就是X5浏览服务。关于这方面更多的知识了解可以用关键词“webview”+"浏览服务"去问问度娘。
希望这篇文字能对你解决问题有所启发。码字这么辛苦，点个赞或者打个赏吧[可爱][可爱]。
2016/12/21 补记：
6. 有现成的h5页面 怎么嵌入到android
1：下载 2：解压缩 3：把解出来的和H5的图标一样的那个复制到H5文件夹（不复制应该也可以） 4：进游戏 5：打开修改器 6：Move_Points是无限制移动 Build_Points是无限制建筑 Show_me_money是无限金钱 I'm the superman是把等级调到最高级 这个是我用的修改器，娃娃 做的，现在貌似他又做了个6属性的。不过应该差不多。 其实自己慢慢摸索一下就知道了。 -完毕-
7. android开发中，webview常用于显示网页或h5页面，一个遇到跨域方面的坑。
1.跨域cookie读取
什么是跨域，简单的说就是不同的域名，我们都知道在pc上我们用浏览器访问网址，不同的网址都会在本地存储一些cookie信息，这样就可以实现比如自扒核棚动登录等功能，在pc上不同域名是不能相互读取其他域下的cookie信息的（非web专业开发人员，如果理解有误，欢迎指出）。
但是在 android 上在api 23之前，是可以跨域读取cookie的，比如A域写入一个userId的cookie，B域可以读取该值。但是在23时，系统将该值设置成了false，不再让跨域读取了。如果你的应用有跨域读取需求，怎么办？可以采用如下方式进行开启：
/*** 设置跨域cookie读取*/
public final void setAcceptThirdPartyCookies() {
//target 23 default false, so manual set true
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { CookieManager.getInstance().setAcceptThirdPartyCookies(webView,true);
}
}
2.http/https混合加载
在现阶段，很多网站都改成了https进行访问，https可以提升访问网站的安全性，防止信息被窃取，如果所有的网页都是https且网页内的链接也是都是https，那就没春则有混合加载(文本区域https，图片文件http加载)的问题了。但是很多资源现阶段还没有改变成https访问，往往页面都嵌入了http的链接。这种混合网页如果不进行处理，直接加载是会出现错误的。怎么解决这个问题？
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
这也是一个分版本氏缺的函数，在api23之前，默认是可以混合加载的，但是在23时，默认值改成了MIXED_CONTENT_NEVER_ALLOW，因此如果你有混合加载的需求，设置setMixedContentMode为MIXED_CONTENT_ALWAYS_ALLOW。
3.无法解决跨域访问问题，可以尝试给webview设置如下配置，已解决该问题；
if (Build.VERSION.SDK_INT >= 16) {
Class clazz =webView.getSettings().getClass();
Method method = clazz.getMethod("", boolean.class);
if (method != null) {
method.invoke(webView.getSettings(), true);
}
}
} catch (IllegalArgumentExceptione) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
8. 混合开发之H5在移动端如何调试界面
在平时工作中，APP端使用前端界面并进行相应的交互，在此过程中，经常会遇到一些问题，但是由于界面是在APP端打开，就会产生一个问题：当界面报错或者需要调试时，很难进行相应的调试工作，在经过一些尝试之后，发现使用vorlon进行调试比较方便（在Vue多页面工程中，单页面未尝试，但是原理应该一样），以下记录使用过程：
1.首先进行全局安装vorlon（cnpm install -g vorlon）;
2.然后在index.html（需要监控的界面）添加<script src="http://192.168.1. : /vorlon.js"></script>
3.打开cmd，输入vorlon执行
4.在浏览器中打开http://192.168.1. : （你配置的监控ip和端口）进行监控
5.手机端打开界面，浏览器中vorlon就会显示相应的调试区域
注意：手机需要和电脑在同一个局域网内
经过个人测试，使用该方法调试APP内使用的H5界面，虽然不及在Chrome中直接进行调试，但是还是能解决移动端调试的问题的
9. H5混合开发
Hybrid App，俗称 混合应用 ，即混合了 Native技术 与 Web技术 进行开发的移动应用。现在比较流行的混合方案主要有三种，主要是在UI渲染机制上的不同:
Webview 是 Native App 中内置的一款基于 Webkit内核 的浏览器，主要由两部分组成:
在原生开发 SDK 中 Webview 被封装成了一个组件，用于作为 Web页面 的容器。纤坦因此，作为宿主的客户端中拥有更高的权限，可以对 Webview 中的 Web页面 进行配置和开发。
Hybrid技术中双端的交互原理，便是基于 Webview 的一些 API 和特性。
RN和原生通信
Hybrid技术 中最核心的点就是 Native端 与 H5端 之间的 双向通讯层绝竖型 ，其实这里也可以理解为我们需要一套 跨语言通讯方案 ，便是我们常听到的 JSBridge。
整套方案需要 Web 与 Native 两部分共同来完成:
接入方式 :
详细内容由兴趣的童鞋可以看文章:
RN的原理，为什么可以同时在安卓和IOS端运行
RN如何调用原生的一些功能
介绍并猜RN的缺点