跳到主要内容

uni-app 原生插件开发

1. 前言​

上一节我们在 uni-app 混合开发中讲到，如果我们混合开发是以 uni-app 框架为主，只是想扩展一些只有原生才有的功能，那么我们最好使用 uni-app 原生插件来进行项目开发。

那如何开发 uni-app 原生插件并引用呢？这一小节我们来详细讲讲。

2. uni-app 原生插件介绍​

了解 uni-app 原生插件之前，我们先来看一下什么是插件。

2.1 什么是插件？​

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

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

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

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

2.2 什么是插件开发？​

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

2.3 什么是 uni-app原生插件？​

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

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

3. 开发uni-app原生插件​

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

3.1 module 模式​

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

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

3.2 component 模式​

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

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

component 模式的插件只可以在 nvue 页面通过标签的方式进行使用。

uni-app 官网上面关于原生插件的开发教程已经写得很清楚了，我们就不详细讲了，可以直接参考官网的教程。

官网原生插件开发教程

https://nativesupport.dcloud.net.cn/NativePlugin/README

4. 调用 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 属性定义的名字来调用。下面我们来看看如何调用这些插件。

4.1 调用 module 模式的插件​

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

实例：

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

4.2 调用 component 模式的插件​

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

实例：

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

5. 小结​

在 uni-app 框架中有很多内置插件，我们开发有限调用这些插件来开发，效率最高，如果 uni-app 框架中的内置插件不能满足开发需求，我们可以到插件市场寻找合适的插件来完善我们的项目，不过这样的插件可能不是免费的，也有下架以及插件更新导致项目不匹配的风险。

最后如果市场上找不到合适的插件，我们再来自己开发，自己开发原生组件需要花更多时间熟悉，当然功能扩展性和稳定性上也会更好一些。 本小节需要掌握的重点如下：

  • 了解什么是 uni-app 原生插件；
  • 了解 uni-app 原生插件的开发模式；
  • 掌握 uni-app 原生插件的调用方法。