前言

這里就是關于混合開發了，也是經常問到的，現在的移動端，大部分都是混合開發

一、什么是混合開發？

簡單來說就是一種原生+HTML5的模式，即h5與安卓、iOS合并開發一個專案，將h5我們寫好的移動端頁面，放到ios設備以及安卓設備中，在里面
我們可以享受ios和安卓給我們的所有支持，通過方法呼叫，回呼函式進行使用給我們提供的方法

二、混合開發的優勢

能夠利用原生解決h5實作不了的功能，有更好的用戶體驗
因為h5的存在節省了開發成本、更好維護
是一種折中式的開發，結合了原生與h5的所長

三、作為h5如何使用

簡單來說就是方法呼叫方法，原生已經寫好了方法只需要你的一個方法去呼叫即可實作功能，下面以微信支付功能為例
如果在混合開發中由安卓或iOS來寫好了微信支付功能，你只需要給一個支付按鈕點擊事件，點擊支付時呼叫原生寫好的方法即可實作所有功能！！！

當然你會要判斷是安卓的方法還是iOS的方法（百度上很多）

下面隨便舉個例子
<button type="" @click="clickPay(引數)">點擊支付</button>
...
clickPay(引數）{
//如果是安卓
android.pay(引數）
//如果是ios
ios.pay(引數)
}

四、怎么進行和安卓和 ios交換資料

1.初始化

// 初始化方法
function init (obj) {
    // 在頁面初始化我們可以拿到原生端給我們傳來的初始化資料,他們會默認呼叫一次初始化方法
    console.log(obj)
}

2.呼叫原生方法

這里和我上面說的如何使用差不多，上面通俗一點

// 判斷h5在ios還是安卓
function detect(){
        var equipmentType = "";
        var agent = navigator.userAgent.toLowerCase();
        var android = agent.indexOf("android");
        var iphone = agent.indexOf("iphone");
        var ipad = agent.indexOf("ipad");
        if(android != -1){
            equipmentType = "android";
        }
        if(iphone != -1 || ipad != -1){
            equipmentType = "ios";
        }
        return equipmentType;
    }

// 我們定義好一個 上傳圖片方法，放在一個公用的js檔案中
function updataImg (obj,callback) {
    if(equipmentType == "android") {
        // 呼叫android方法,比如是
        android.webviewupdataJs(obj,callback)  // 瀏覽器不認識的方法，是安卓定義好的方法
    } else {
        ios.webviewupdataJs(obj,callback)
    }
    console.log(obj)
}

總結

到這里就結束了，希望對大家有幫助，啦啦啦啦😎

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/231464.html

標籤：其他

上一篇：混合app的使用

下一篇：what is 混合開發？

前端常見面試題之----混合app的使用

混合app的使用

前言