貓寧一 ·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 官網上面關于原生插件的開發教程已經寫得很清楚了，我們就不詳細講了，可以直接參考官網的教程。
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 原生插件的調用方法。
2025 imooc.com All Rights Reserved |