开发时如何使用混合App开发？

最新推荐文章于 2023-07-04 11:09:50 发布

外下羊.

最新推荐文章于 2023-07-04 11:09:50 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

原文链接：https://blog.youkuaiyun.com/ZiChen_Jiang/article/details/108880290

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文探讨了混合APP开发的优势，如开发效率、更新便捷性，同时揭示了其缺点，如功能局限、安全风险。重点介绍了如何通过JavaScript在不同平台间传递数据，并以京东、淘宝为例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

混合APP开发(原生+H5)

混合开发（Hybrid
App开发），是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，通常由“HTML5云网站+APP应用客户端”两部份构成。
混合开发是一种取长补短的开发模式，原生代码部分利用Web
View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。

**优点：

1、开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；
2、更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核；
3、代码维护方便、版本更新快，节省产品成本；
4、比web版实现功能多；
5、可离线运行。**

**缺点：

1、功能/界面无法自定：所有内容都是固定的，不能换界面或增加功能；
2、加载缓慢/网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感；
3、安全性比较低：代码都是以前的老代码，不能很好地兼容新手机系统，且安全性较低，网络发展这么快，病毒这么多，如果不实时更新，定期检查，容易产生漏洞，造成直接经济损失；
4、既懂原生开发又懂H5开发的高端人才难找。
以上就是原生开发、H5开发和混合开发各自的优缺点。相比之下，由于现代人的个性化需求越来越明显，所以原生APP开发也越来越多

如何使用混合开发传递数据

// 判断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)
}