1、Android与H5互调可以让我们的实现混合开发，至于混合开发就是在一个App中内嵌一个轻量级的浏览器（高性能webkit内核浏览器），一部分原生的功能改为Html 5来开发。然后这个浏览器又封装了一个WebView控件（(网络视图)）来加载显示网页，展现html页面。需要注意的是，当H5内嵌在app里面的时候，app那边有很高的权限来控制H5页面上的操作，比如app可以直接调用html里面的函数方法，可以禁止本地存储localStorage和cookie！！从而使H5页面使H5上用的相应功能失效！！！

2、H5跟app交互实例：

我们这边使用app在内嵌H5页面的浏览器内核上带一个标识，这边是加pop=1，如果浏览器中带有pop=1，那么就是嵌在app端的页面，然后暴露方法app_share（）给app，里面传参数，可把一些常见的交互规范成固定文档，例如

1.登录：app_login

2、分享：app_share

*分享文案内容的传值须转换成json格式

3、客服：app_service

4、头部返回：app_go_back

5、产品详情（包括后续购买）：app_detail

*详情须传产品编号

6、返回首页：app_go_home

具体事例如下：

var sharedata={
    event_key: "{$act_data.event_key}",
    type:'0',
    number:'0'
}

var u = navigator.userAgent; //获取内嵌浏览器信息
var isAndroid = u.indexOf('Android') > -1 ||u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if (u.indexOf("pop=1") < 0) {
    
}else{
   var isAndroid = u.indexOf('Android') > -1 ||u.indexOf('Adr') > -1; //android终端
   var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
   if (isAndroid) {
      window.android.app_share(JSON.stringify(sharedata));
   } else {
     window.app_share(JSON.stringify(sharedata));

}
}

在web移动端中头部需要显示，而嵌在app里面的时候，需要隐藏，那么一开始就让头部隐藏，然后判断如若是移动端就让其显示，优先考虑app端，在app端的H5页面加载速度比较慢，不然会出现闪现

3、在H5页面点击某个按钮唤起app，要是下载app则打开app，没有的话跳转提示下载！！！

<a id=“openApp”>前往app查看</a>

// 手机有没有下载app判断begin
var ua = navigator.userAgent.toLowerCase();
var t;
var config = {/*scheme:必须*/scheme_IOS: 'com.xmgztbw.bgbapp://',scheme_Adr: 'bgbapp://myapp/bgzx?param=1',download_url: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.gongzhong',timeout: 3000
};function openclient() {var startTime = Date.now();if(ua.indexOf('os') > 0){window.location = config.scheme_IOS;}else{var ifr = document.createElement('iframe');    ifr.src = ifr.src = config.scheme_Adr;ifr.style.display = 'none';document.body.appendChild(ifr);}var t = setTimeout(function() {var endTime = Date.now();if(!startTime || endTime - startTime<config.timeout + 800) {window.location.href= config.download_url;} else {}}, config.timeout);window.onblur= function(){clearTimeout(t);}
}
window.addEventListener("DOMContentLoaded", function() {document.getElementById("openApp").addEventListener('click', openclient, false);}, false);
// 手机有没有下载app判断end

 4、不同客户端判断，赋予不同平台号

//获取平台号
Vue.prototype.getPlatform =function (){let u=navigator.userAgent;if(u.indexOf("pop=1") < 0){let userAgentInfo=navigator.userAgent.toLowerCase();if(userAgentInfo.indexOf('micromessenger') != -1) {return 4;  //微信端}else{return 3;  //浏览器端
}}else{var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(isAndroid) {return 2;}else{return 1;}}}

5、在浏览器中打开H5页面，点击某个按钮跳转微信

$(".btn").on("click",function(){window.location.href="weixin://"
})

6、H5页面要在第三方app里面打开微信时，H5页面需要跟app交互，不能直接跳链接！

应用场景

点击我要参与按钮时，如果改H5页面在微信打开，直接跳活动首页链接，如果在app里面就打开app，在浏览器也是打开微信

var u = navigator.userAgent;$(".wycy-btn").click(function(){if (u.indexOf("pop=1") < 0) {var ua = navigator.userAgent.toLowerCase();//获取判断用的对象if (ua.match(/MicroMessenger/i) == "micromessenger") {//在微信中打开window.location.href="{:U('index')}";}else{//在浏览器中打开微信；window.location.href="weixin://";}}else{//在app里面打开微信var isAndroid = u.indexOf('Android') > -1 ||u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(isAndroid) {                window.android.app_pasteboard();//打开微信交互} else{window.app_pasteboard();}}})

 常遇见问题

常见问题一

为了用户能得到快速的问题处理解决，你第一时间收集到用户的以下信息

1、用户使用的APP版本、
2、使用的手机类型，（如苹果手机或是安卓手机 、苹果6或是7 魅族手机或是华为等信息）
3、苹果手机IOS系统版本
4、用户登录的手机账号、
5、用户使用哪个功能模块出现问题、报错信息是什么 （叫用户以截图凭据）

问题一：app支付成功后跳转成功页面，出现红包金额错误，

常见问题二

ios中的图片会分批加载，需要用到的时候才加载，不需要的时候，就暂时不会加载，所以当点击的时候切换图片的显示隐藏，第一次出现的图片会闪一下，解决方法，用一个div将需要用到的图片包裹起来，提前加载图片，然后设置该div的样式为

opacity=0；