跳到主要内容

uni-app 混合开发

1. 前言

uni-app 混合开发是我们学习 uni-app 框架时候的难点,有些功能仅仅使用 uni-app 框架是实现不了的,比如:自定义扫码页面、自定义地图等。

虽然 uni-app 框架中自带了这些功能,但是自带的功能(比如 API自带的扫码界面)没办法有效的自定义,这时就需要用到 App 的原生控件来进行组合开发,这个开发形式就是 uni-app 混合开发。

当然混合开发的含义不仅仅是这些,我们在下面会给大家详细讲到。

2. 原生开发与混合开发

在学习混合开发之前,我们先来了解一下混合开发的含义,帮助大家更好的理解。

2.1 什么的原生开发?什么是混合开发?

2.1.1 原生开发

原生开发一般是指用原生语言进行开发,原生开发语言就是官方提供的开发语言,比如 IOS 是利用 Objective-C 和 Xcode 进行开发、小程序是用微信小程序原生语言和微信开发者工具进行开发。

2.1.2 混合开发

混合开发是指开发一个项目应用时,为了提高运行效率或者开发效率,将各种开发技术进行混合应用的开发形式。

混合开发将各种开发方式取长补短,虽然比原生开发更难上手,但是架不住开发效率和运行效率的优势,现在比较大型的应用项目都会用混合开发来进行项目开发。

uni-app 的混合开发主要是为了实现一些 uni-app 框架无法实现的功能,或者扩展接入一些第三方的 SDK。

2.2 原生开发与混合开发的优缺点

2.2.1 原生开发优缺点

有过开发经验的小伙伴看到版本问题应该非常感同深受吧,经常会冷不丁的出现版本不兼容的问题。只要出现版本问题,重新布置开发环境是常有的事情。

而原生开发受到版本问题限制会比较小,官方的代码和开发工具都是定时更新,兼容性、安全性、维护性也会更高一些。

而原生开发普遍存在着开发时间长、效率低、成本高的问题。相比 uni-app,适用性也比较差,一款原生的 App,不同平台上面发布同样的项目,需要开发几套不同的代码,这样对我们开发的限制也很大。

2.2.2 混合开发优缺点

采用混合开发,我们可以采取各开发技术的优点,取长补短,可以提高代码的运行效率,功能扩展性上也会更好一些。

混合开发是缺点就是对开发人员技术要求比较高,需要花更多时间熟悉。并且因为涉及到多种开发方式,维护会更加麻烦一些,版本兼容问题也会比较多。

3. uni-app 和原生 App 混合开发问题

要使用 uni-app 和原生 App 进行混合开发之前,要先确认要用 uni-app 还是原生 App 代码作为主体。

3.1 主体采用 uni-app

如果我们主体采用 uni-app 进行开发,只是部分功能的实现使用原生开发,这样可以找一些原生项目的插件用来配合开发。目前更多项目是使用原生插件扩展的方式来进行开发的。

这样代码实现就不只是通过 uniapp 框架来实现的了,而是通过原生 API 实现的,uniapp 只是负责调用一下。

这里需要注意的是,如果想要将项目离线打包,就不应该使用原生 SDK,而应该使用 App 离线 SDK。

App 离线打包 SDK,是把 App 运行环境(runtime)封装为原生开发调用接口,开发者可以在自己的 Android 及 iOS 原生开发环境配置工程使用。参考资料:

https://nativesupport.dcloud.net.cn/AppDocs/README

接下来我们举个自定义扫码的例子,看看如何在 uni-app 中如何扩展 5+ 的原生界面控件。在 uni-app 开发中,平台其实给我们提供的扫码 API,但是并不能满足我们所有扫码的需求,比如想要自己自定义扫码框的颜色。

实例:

// uni-app 中的扫码功能直接调用 plus API就可以了,而扩展5+的原生界面控件要等 plusready 后再调用 plus API。

var plusReady = function (callback) {
if (window.plus && window.plus.isReady) {
callback();
} else {
document.addEventListener('plusready', function () {
callback();
}, false);
}
};

//创建 Barcode 实例对象,可以自定义扫码框的位置大小和颜色
var barcode = plus.barcode.create('barcode', options.types, options.styles);

3.2 主体采用原生 App 代码

如果主体采用原生 App 代码,只有部分功能需要通过 uni-app 实现,这样可以在原生 App 里集成 uni 小程序的 SDK,也就是原生 SDK。

uni 小程序 SDK,是为原生 App 打造的可运行基于 uni-app 开发的小程序前端项目的框架,从而帮助原生App快速获取小程序的能力。参考资料:

https://nativesupport.dcloud.net.cn/README

主体采用原生 App 代码,也可以直接跳转 uni-app 编译为 H5 页面。

4. uni-app 和原生小程序混合开发

uni-app 和原生小程序混合开发问题 uni-app 官网已经描述的很清楚了,我们直接查看官网资料就可以。

参考资料:

https://uniapp.dcloud.io/hybrid

5. 小结

混合开发在我们学习初期一般是接触不到的,但是要进阶开发大型项目基本是逃不过的,所以混合开发的内容还是需要我们来仔细了解并掌握。本小节需要我们掌握的重点如下:

  • 了解什么是混合开发,以及混合开发相对原生开发的优缺点;
  • 掌握uni-app 和原生 App 混合开发问题;
  • 掌握uni-app 和原生小程序混合开发。