H5混合开发app常用代码

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；