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，没有的话跳转提示下载！！！

// 手机有没有下载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

H5混合开发app常用代码

猜你喜欢