uni-app 原生插件介绍

发布时间：2023-04-25 08:52:25 所属栏目：教程来源：

导读：在开发过程中，为了提高开发效率，我们会将代码块和一些功能组件进行封装，便于我们更好的复用。插件的作用和这个差不多，将一个功能单独抽离出来，将配置项等其他部分都配置好，就算是一个插件了。

比如我们常见

在开发过程中，为了提高开发效率，我们会将代码块和一些功能组件进行封装，便于我们更好的复用。插件的作用和这个差不多，将一个功能单独抽离出来，将配置项等其他部分都配置好，就算是一个插件了。

比如我们常见的前端插件有轮播图、弹窗等，我们开发时需要用到轮播图的时候，就不需要去从头开始写轮播图的代码了，直接引用轮播图的插件就可以实现开发需求。

大家有没有发现，从项目环境搭建、框架搭建，再到填充代码、打包上线，我们的开发过程很像是在搭建一个房子。

插件就可以理解为搭建房子的一块块砖头，别人已经帮我们烧制好了，我们直接垒上去就可以。

什么是插件开发？
我们进行插件开发，就是将自己写好的功能以及功能所需要的依赖按照一定的格式打包上传到插件市场，别的用户如果刚好需要用到这个功能，就可以直接下载使用，避免重复造轮子，提高了整个行业的效率。

什么是 uni-app原生插件？
原生插件开发就是用原生语言进行插件开发，对于 uni-app 原生插件来说，原生语言包括 android 或者 ios 代码。

我们使用 android、 ios 代码开发的插件，可以在 uni-app 框架中通过 vue 代码调用，这就是 uni-app原生插件了。

开发uni-app原生插件
uni-app 原生插件包含两种扩展模式：module 模式、component 模式，下面来讲讲这两种扩展方式的 uni-app 原生插件是如何开发和调用的。

module 模式
大部分插件都是属于 module 扩展模式，也叫能力扩展，是非可视控件。这种插件不提供用户界面，只提供相应的能力。比如调用计步器API，我们只调用计步器的能力，而不是调用计步的页面。

module扩展方式的插件，在 uni-app 的 vue、nvue 页面都可以使用。

component 模式
component 模式是原生UI控件扩展的，属于可视化的控件。component 模式的插件会提供用户界面。

比如调用某个地图厂商的 Map 组件，将地图组件插在页面中间，就需要把这个原生地图 SDK 封装为 Componet 模式。调用的时候与调用 vue 组件是差不多的，在 <template> 标签中写组件标签就可以了。

component 模式的插件只可以在 nvue 页面通过标签的方式进行使用。
uni-app 官网上面关于原生插件的开发教程已经写得很清楚了，我们就不详细讲了，可以直接参考官网的教程。

调用 uni-app 原生插件
在开发完 uni-app 原生插件之后，接下来我们来看一下如何在 uni-app 框架中调用这些原生插件。

调用之前要在原生插件项目中先注册一下插件，具体位置在原生插件App 项目的 Module 根目录下，assets/dcloud_uniplugins.json文件中。在nativePlugins节点下添加要注册的 Module 插件或者 Component 插件。

实例：

{
"nativePlugins": [
{
"plugins": [
{
"type": "module",
"name": "ImoocModulePlugin",
"class": "TestModulePlugin"
}
]
},
{
"plugins": [
{
"type": "component",
"name": "ImoocComponentPlugin",
"class": "TestComponentPlugin"
}
]
}
]}
要注意 name 属性的设置，这个很重要，我们在 uni-app 框架中调用的时候，不管开发的时候插件用的什么名字，调用的时候，都要用 name 属性定义的名字来调用。下面我们来看看如何调用这些插件。

调用 module 模式的插件
调用 module 模式的插件是通过 uni.requireNativePlugin("插件名称") 来调用的。
实例：

test:function(){
// 调用插件
const myTest = uni.requireNativePlugin('ImoocModulePlugin')
// 打印结果
console.log("获取结果:" + myTest.content)
}

调用 component 模式的插件
调用 component 模式的插件与调用 vue 组件差不多，就是将插件写在 <template> 标签中就可以了。
实例：

<template>
<view>
<ImoocComponentPlugin style="width:;height:"></ImoocComponentPlugin>
</view>
</template>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!