uni-app结合原生混合开发

uni-app混合开发

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

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

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

1. 插件市场购买原生插件或自己开发原生插件。
2. 项目集成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编写。