uni-app混合开发

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

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

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

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

uni-app结合原生混合开发相关推荐

flutter打包的app有多大_Flutter原生混合开发
使用 Flutter 从头开始写一个 App是一件轻松惬意的事情.但是对于成熟产品来说,完全摒弃原有 App 的历史沉淀,全面转向 Flutter 并不现实.用 Flutter 去统一 iOS/And ...
android调用flutter aar_Flutter原生混合开发
混合开发简介使用Flutter从零开始开发App是一件轻松惬意的事情,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的.因此使用Flutter去统一Andro ...
【前端】关于h5原生混合开发，安卓返回键及侧滑返回 popstate的处理。
文章目录背景跳转方式: 全部使用方式一:push 全部使用方式二:replace 期待方式结论错误1 错误2 错误3 错误3.1 其它最后来个小工具 vue-router push的实现 w ...
uni app video、视频播放开发
视频播放有3种解决方案,使用HTML5的自带video.从HBuilder9.1.3起新增的plus.video的原生视频播放,以及使用Native.js. HTML5自带video标签,可以播放符合 ...
实现Taro 项目拆分到多个分包（Taro和原生混合开发）
实现Taro 项目拆分到多个分包前提: 本文适合有Taro和小程序混合开发经验的人阅读(ps不然会一脸懵逼
移动端app和H5混合开发交互
在开发过程中,有时会需要使用一些H5页面,不管是APP本地集成,还是跳转到指定线上地址,双方之间的交互是难免遇到的,这里我总结一下我的方式,如有问题请指出哈,. h5页面js调用app的方法: 1,m ...
用原生安卓做一个“套壳”APP、混合开发、安卓H5加壳开发
源码下载用安卓WebView做一个"套壳"APP.安卓混合开发.安卓hybridApp.安卓H5加壳开发-Java文档类资源-CSDN下载 Hybrid App(混合应用):即 ...
混合开发Hybrid App为何成为热门？
纵观当前的移动开发,混合开发(Hybird App)的热度日益上升,那么导致这一趋势的是何原因呢? 实际上,除了混合开发,移动端的开发方式还有纯原生(Native App)和网页应用(Web App) ...
混合开发（Hybrid App）有哪些优劣点？
从当前移动开发的实际情况来看,移动端的开发方式三分天下:纯原生(Native App).混合开发(Hybird App).网页应用(Web App). 那么,混合式开发与其他的两种开发模式相比,具有哪 ...

uni-app结合原生混合开发