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") < ){
let userAgentInfo = navigator.userAgent.toLowerCase();
if(userAgentInfo.indexOf('micromessenger') != -) {
return ; //微信端
}else {
return ; //浏览器端
}
}else{
var isAndroid = u.indexOf('Android') > - || u.indexOf('Adr') > -; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
return ;
} else {
return ;
}
} }
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") < ) {
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') > - ||u.indexOf('Adr') > -; //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；