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 和原生小程序混合开发。