uni-app 原生插件開發(fā)

1. 前言

上一節(jié)我們在 uni-app 混合開發(fā)中講到，如果我們混合開發(fā)是以 uni-app 框架為主，只是想擴展一些只有原生才有的功能，那么我們最好使用 uni-app 原生插件來進(jìn)行項目開發(fā)。

那如何開發(fā) uni-app 原生插件并引用呢？這一小節(jié)我們來詳細(xì)講講。

2. uni-app 原生插件介紹

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

2.1 什么是插件？

在開發(fā)過程中，為了提高開發(fā)效率，我們會將代碼塊和一些功能組件進(jìn)行封裝，便于我們更好的復(fù)用。插件的作用和這個差不多，將一個功能單獨抽離出來，將配置項等其他部分都配置好，就算是一個插件了。

比如我們常見的前端插件有輪播圖、彈窗等，我們開發(fā)時需要用到輪播圖的時候，就不需要去從頭開始寫輪播圖的代碼了，直接引用輪播圖的插件就可以實現(xiàn)開發(fā)需求。

大家有沒有發(fā)現(xiàn)，從項目環(huán)境搭建、框架搭建，再到填充代碼、打包上線，我們的開發(fā)過程很像是在搭建一個房子。

插件就可以理解為搭建房子的一塊塊磚頭，別人已經(jīng)幫我們燒制好了，我們直接壘上去就可以。

2.2 什么是插件開發(fā)？

我們進(jìn)行插件開發(fā)，就是將自己寫好的功能以及功能所需要的依賴按照一定的格式打包上傳到插件市場，別的用戶如果剛好需要用到這個功能，就可以直接下載使用，避免重復(fù)造輪子，提高了整個行業(yè)的效率。

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

原生插件開發(fā)就是用原生語言進(jìn)行插件開發(fā)，對于 uni-app 原生插件來說，原生語言包括 android 或者 ios 代碼。

我們使用 android、 ios 代碼開發(fā)的插件，可以在 uni-app 框架中通過 vue 代碼調(diào)用，這就是 uni-app原生插件了。

3. 開發(fā)uni-app原生插件

uni-app 原生插件包含兩種擴展模式：module 模式、component 模式，下面來講講這兩種擴展方式的 uni-app 原生插件是如何開發(fā)和調(diào)用的。

3.1 module 模式

大部分插件都是屬于 module 擴展模式，也叫能力擴展，是非可視控件。這種插件不提供用戶界面，只提供相應(yīng)的能力。比如調(diào)用計步器API，我們只調(diào)用計步器的能力，而不是調(diào)用計步的頁面。

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

3.2 component 模式

component 模式是原生UI控件擴展的，屬于可視化的控件。component 模式的插件會提供用戶界面。

比如調(diào)用某個地圖廠商的 Map 組件，將地圖組件插在頁面中間，就需要把這個原生地圖 SDK 封裝為 Componet 模式。調(diào)用的時候與調(diào)用 vue 組件是差不多的，在 <template> 標(biāo)簽中寫組件標(biāo)簽就可以了。

component 模式的插件只可以在 nvue 頁面通過標(biāo)簽的方式進(jìn)行使用。
uni-app 官網(wǎng)上面關(guān)于原生插件的開發(fā)教程已經(jīng)寫得很清楚了，我們就不詳細(xì)講了，可以直接參考官網(wǎng)的教程。

官網(wǎng)原生插件開發(fā)教程
https://nativesupport.dcloud.net.cn/NativePlugin/README

4. 調(diào)用 uni-app 原生插件

在開發(fā)完 uni-app 原生插件之后，接下來我們來看一下如何在 uni-app 框架中調(diào)用這些原生插件。

調(diào)用之前要在原生插件項目中先注冊一下插件，具體位置在原生插件App 項目的 Module 根目錄下，assets/dcloud_uniplugins.json文件中。在nativePlugins節(jié)點下添加要注冊的 Module 插件或者 Component 插件。

實例：

{
  "nativePlugins": [
    {
      "plugins": [
        {
          "type": "module",
          "name": "ImoocModulePlugin",
          "class": "TestModulePlugin"
        }
      ]
    },
    {
      "plugins": [
        {
          "type": "component",
          "name": "ImoocComponentPlugin",
          "class": "TestComponentPlugin"
        }
      ]
    }
  ]}

要注意 name 屬性的設(shè)置，這個很重要，我們在 uni-app 框架中調(diào)用的時候，不管開發(fā)的時候插件用的什么名字，調(diào)用的時候，都要用 name 屬性定義的名字來調(diào)用。下面我們來看看如何調(diào)用這些插件。

4.1 調(diào)用 module 模式的插件

調(diào)用 module 模式的插件是通過 uni.requireNativePlugin("插件名稱") 來調(diào)用的。
實例：

test:function(){
    // 調(diào)用插件
    const myTest = uni.requireNativePlugin('ImoocModulePlugin')
    // 打印結(jié)果
    console.log("獲取結(jié)果:" + myTest.content)
}

4.2 調(diào)用 component 模式的插件

調(diào)用 component 模式的插件與調(diào)用 vue 組件差不多，就是將插件寫在 <template> 標(biāo)簽中就可以了。
實例：

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

5. 小結(jié)

在 uni-app 框架中有很多內(nèi)置插件，我們開發(fā)有限調(diào)用這些插件來開發(fā)，效率最高，如果 uni-app 框架中的內(nèi)置插件不能滿足開發(fā)需求，我們可以到插件市場尋找合適的插件來完善我們的項目，不過這樣的插件可能不是免費的，也有下架以及插件更新導(dǎo)致項目不匹配的風(fēng)險。

最后如果市場上找不到合適的插件，我們再來自己開發(fā)，自己開發(fā)原生組件需要花更多時間熟悉，當(dāng)然功能擴展性和穩(wěn)定性上也會更好一些。 本小節(jié)需要掌握的重點如下：

• 了解什么是 uni-app 原生插件；
• 了解 uni-app 原生插件的開發(fā)模式；
• 掌握 uni-app 原生插件的調(diào)用方法。