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；