uni-app结合原生混合开发

ゞ浴缸里的玫瑰 2023-01-09 15:49 218阅读 0赞

# uni-app混合开发 #

uni-app混合开发主要为扩展接入一些第三方的SDK或其他uni-app无法实现的功能，项目结构有两种:

1.  主体采用uni-app，部分功能的实现使用原生开发。
2.  主体采用原生，部分功能栏目通过uni-app实现。

和以上两种项目结构对应的有两种开发方案：

1.  插件市场购买原生插件或自己[开发原生插件][Link 1]。
2.  项目集成[uni小程序SDK][uni_SDK]或直接跳转uni-app编译为H5页面。

整体上来讲uni-app的原生混合开发和原来的 Html 5+ 项目的离线打包开发有着较大的出入；需要花更多时间熟悉，当然功能扩展性上也会更好一些。

目前大多数项目更多的是使用**原生插件扩展**的方式来进行开发的，下面就真对这种方式进行梳理记录。

## 原生插件扩展 ##

### 一、插件模式 ###

uni-app官方把原生插件分为了以Module模式和Component模式，其中omponent模式主要结合nvue页面使用。

#### 1. Module ####

能力扩展，无嵌入窗体的UI控件。大部分插件都是属于此类，比如调用计步器API。代码写法为通过js进行require，然后调用该插件对象的方法。如涉及一些弹出框、全屏ui，也仍然属于Module模式。类似于前端里的js sdk。

*实例*

*  腾讯云实时音视频中的视频会议、视频电话、直播等功能就可以直接改动Demo代码通过Module实现。
 *  百度地图鹰眼服务，用户在uni-app页上开启定位服务按键，通过js触发鹰眼服务开启，无需UI页面。

#### 2. Component ####

在窗体中内嵌显示某个原生ui组件。比如窗体局部内嵌某个地图厂商的map组件，上下混排其他前端内容，就需要把这个原生地图sdk封装为Componet模式。代码写法与vue组件相同，在template里写组件标签。类似于前端里的vue组件。

*实例*

*  海康视频监控实时预览，使用流方式延长太高，SDK的播放窗口就可以采用Component模式接入nvue页面，同时该页面视频下面还可以显示一些监控点位信息、联系人信息等。

### 二、插件注意事项 ###

*  **仅内部使用** 的原生扩展插件，这种情况也肯定采用的离线打包方式，不上架插件市场即可；只有在线打包才要求插件上传应用市场。
 *  **vue页面** 中仅支持使用Module类型的原生插件，不支持调用同步方法返回数据。
 *  **nvue页面** 中支持使用Module和Component两种类型的原生插件。也就是如需实现嵌入页面的ui组件，前提是该页面需要使用nvue编写。

[Link 1]: https://nativesupport.dcloud.net.cn/NativePlugin/README
[uni_SDK]: https://nativesupport.dcloud.net.cn