前端常见面试题之----混合app的使用

---

前言

这里就是关于混合开发了，也是经常问到的。现在的移动端，大部分都是混合开发

---

一、什么是混合开发？

简单来说就是一种原生+HTML5的模式。即h5与安卓、iOS合并开发一个项目，将h5我们写好的移动端页面，放到ios设备以及安卓设备中，在里面
我们可以享受ios和安卓给我们的所有支持，通过方法调用，回调函数进行使用 给我们提供的方法

二、混合开发的优势

1. 能够利用原生解决h5实现不了的功能，有更好的用户体验
2. 因为h5的存在节省了开发成本、更好维护
3. 是一种折中式的开发，结合了原生与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)
}

---

总结

到这里就结束了，希望对大家有帮助，啦啦啦啦😎