H5混合開發app經常使用代碼

時間 2019-11-12

標籤 h5 混合開發 app 經常使用代碼简体版

原文原文鏈接

一、Android與H5互調可讓咱們的實現混合開發，至於混合開發就是在一個App中內嵌一個輕量級的瀏覽器（高性能webkit內核瀏覽器），一部分原生的功能改成Html 5來開發。而後這個瀏覽器又封裝了一個WebView控件（(網絡視圖)）來加載顯示網頁，展示html頁面。須要注意的是，當H5內嵌在app裏面的時候，app那邊有很高的權限來控制H5頁面上的操做，好比app能夠直接調用html裏面的函數方法，能夠禁止本地存儲localStorage和cookie！！從而使H5頁面使H5上用的相應功能失效！！！html

二、H5跟app交互實例：android

咱們這邊使用app在內嵌H5頁面的瀏覽器內核上帶一個標識，這邊是加pop=1，若是瀏覽器中帶有pop=1，那麼就是嵌在app端的頁面，而後暴露方法app_share（）給app，裏面傳參數，可把一些常見的交互規範成固定文檔，例如ios

1.登陸：app_loginweb

二、分享：app_sharejson

*分享文案內容的傳值須轉換成json格式瀏覽器

三、客服：app_service微信

四、頭部返回：app_go_backcookie

五、產品詳情（包括後續購買）：app_detail網絡

*詳情須傳產品編號app

六、返回首頁：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頁面加載速度比較慢，否則會出現閃現

三、在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

四、不一樣客戶端判斷，賦予不一樣平臺號

// 獲取平臺號
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;
        }
    }

}

五、在瀏覽器中打開H5頁面，點擊某個按鈕跳轉微信

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

六、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();
        }
    }
       
})