開發環境

• iOS開發環境，Xcode 12.1 及以上版本
• 下載開發插件需要的 SDK包 并解壓
• 安裝 uni-app 開發工具 HBuilderX

1、創建插件工程

打開 Xcode，創建一個新的Framework工程，然后點擊 Next

image.png

輸入插件工程名稱（建議使用一個性化的前綴，避免與其他人的插件包名沖突），其他項不需要修改保持工程默認填充的即可，然后點擊Next

image.png

image.png

然后選中工程名，在TARGETS->Build Settings中，將 Mach-O Type 設置為 Static Library 如下圖所示

image.png

2、導入插件工程

打開 iOSSDK/HBuilder-uniPluginDemo工程目錄，雙擊目錄中的HBuilder-uniPlugin.xcodeproj 文件運行插件開發主工程
在 Xcode 項目左側目錄選中主工程名，然后點擊右鍵選擇Add Files to “HBuilder-uniPlugin” ...

image.png

然后選擇您剛剛創建的插件工程路徑中，選中插件工程文件，勾選 Create folder references 和 Add to targets 兩項，然后點擊Add

image.png

3、工程配置

然后在 Xcode 項目左側目錄選中主工程名，在TARGETS->Build Phases->Dependencies中點擊+

image.png

在彈窗中選中插件工程，如圖所示，然后點擊Add，將插件工程添加到Dependencies中

image.png

image.png

此時可以看到 Dependencies 和 Link Binary With Libraries 都添加了插件工程，如下圖所示

image.png

4、代碼實現

插件擴展方式

擴展原生功能有兩種方式：
module：不需要參與頁面布局，只需要通過 API 調用原生功能，比如：獲取當前定位信息、數據請求等功能，通過擴展module的方式來實現；
component：需要參與頁面布局，比如：map、image等需要顯示UI的功能，通過擴展component即組件的方法來實現；

擴展 module

新建TestModule類，繼承 DCUniModule，引入 DCUniModule.h 頭文件。
然后在 TestModule.m 文件中添加實現方法

/// 異步方法（注：異步方法會在主線程（UI線程）執行）
/// @param options js 端調用方法時傳遞的參數   支持：String、Number、Boolean、JsonObject 類型
/// @param callback 回調方法，回傳參數給 js 端   支持： NSString、NSDictionary（只能包含基本數據類型）、NSNumber 類型
- (void)testAsyncFunc:(NSDictionary *)options callback:(UniModuleKeepAliveCallback)callback {
 
    // options 為 js 端調用此方法時傳遞的參數 NSLog(@"%@",options); // 可以在該方法中實現原生能力，然后通過 callback 回調到 js
 
   if (callback) {
       // 第一個參數為回傳給js端的數據，第二個參數為標識，表示該回調方法是否支持多次調用，如果原生端需要多次回調js端則第二個參數傳 YES;
        callback(@"success",NO);
 
    }
}
//通過宏 UNI_EXPORT_METHOD 將異步方法暴露給 js 端，只有通過UNI_EXPORT_METHOD暴露的原生方法才能被 js 端識別到
UNI_EXPORT_METHOD_SYNC(@selector(testSyncFunc:))

5、配置插件信息

選中工程中的HBuilder-uniPlugin-Info.plist文件右鍵->Open As->Source Code找到dcloud_uniplugins節點，copy下面的內容添加到dcloud_uniplugins節點下，按插件的實際信息填寫對應的項

<dict>
    <key>hooksClass</key>
    <string>填寫 hooksClass 類名 </string>
    <key>plugins</key>
    <array>
        <dict>
            <key>class</key>
            <string>填寫 module 或 component 的類名</string>
            <key>name</key>
            <string>填寫暴露給js端對應的 module 或 component 名稱</string>
            <key>type</key>
            <string>填寫 module 或 component</string>
        </dict>
    </array>
</dict>

在 uni-app 項目中調用 module 方法

<template>
    <div>
        <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
        <button type="primary" @click="testSyncFunc">testSyncFunc</button>
    </div>
</template>
 
<script>
    // 首先需要通過 uni.requireNativePlugin("ModuleName") 獲取 module
    var testModule = uni.requireNativePlugin("DCTestUniPlugin-TestModule")
    export default {
        methods: {
            testAsyncFunc() {
                // 調用異步方法
                testModule.testAsyncFunc({
                        'name': 'uni-app',
                        'age': 1
                    },
                    (ret) => {
                        uni.showToast({
                            title:'調用異步方法 ' + ret,
                            icon: "none"
                        })
                    })
            },
            testSyncFunc() {
                // 調用同步方法
                var ret = testModule.testSyncFunc({
                    'name': 'uni-app',
                    'age': 1
                })
 
                uni.showToast({
                    title:'調用同步方法 ' + ret,
                    icon: "none"
                })
            }
        }
    }
</script>

6、導入 uni-app 資源

生成 uni-app 本地打包資源
首先需要生成本地打包資源，在 HBuilderX 中選您的 uni-app 工程，右鍵->發現->原生App-本地打→生成本地打包App資源

image.png

項目編譯完成后會在 HBuilderX 控制臺輸出資源存路徑，點擊路徑會自動打開資源所在文件夾

image.png

導入 uni-app 資源

接下來，將應用資源導入到插件開發主工程的HBuilder-Hello/Pandora/apps/中，如下圖所示，直接拖進去即可

image.png

image.png

image.png

7、 生成插件包

編譯生成插件庫文件（.framework 或 .a）

如下圖所示，將編譯工程選擇為插件項目（DCTestUniPlugin），運行設備選擇Generic iOS Device

image.png

• Build Active Architecture Only->Release 為 No
• Valid Architectures 中至少包含 arm64 和 armv7(一般保持工程默認配置即可)
  
  image.png
  
  然后點擊運行按鈕或 Command + B 編譯運行工程
  編譯完成后，在插件工程 Products 下生成的庫（DCTestUniPlugin.framework）即為插件所需要的依賴庫文件，右鍵->Show in Finder，可打開庫所在文件夾
  
  image.png

8、 編寫 package.json 配置文件

package.json 為插件的配置文件，配置了插件id、格式、插件資源以及插件所需權限等等信息

新建一個 package.json 文件，根據插件實際情況填寫插件配置信息

{
    "name": "TestUniPlugin",
    "id": "DCTestUniPlugin",
    "version": "1.0.0",
    "description": "uni示例插件",
    "_dp_type": "nativeplugin",
    "_dp_nativeplugin": {
        "ios": {
            "plugins": [{
                "type": "module",
                "name": "DCTestUniPlugin-TestModule",
                "class": "TestModule"
            }, {
                "type": "component",
                "name": "dc-testmap",
                "class": "TestComponent"
            }],
            "frameworks": ["MapKit.framework"],
            "integrateType": "framework",
            "deploymentTarget": "9.0"
        }
    }
}

然后以插件id為名新建一個文件夾，將編輯好的 package.json 放進去，然后在文件夾中在新建一個 ios （小寫）文件夾，將剛剛生成的依賴庫（DCTestUniPlugin.framework）copy 到 ios 根目錄，這樣我們的插件包就構建完成了，如下圖所示

image.png

9、使用插件

HBuilderX 的 uni-app 項目創建中“nativeplugins”目錄（如不存在則創建）將插件配置到uni-app項目下的“nativeplugins”目錄

image.png

uni-app原生插件本地配置
將原生插件配置到uni-app項目的“nativeplugins”下，還需要在manifest.json文件的“App原生插件配置”項下點擊“選擇本地插件”，在列表中選擇需要打包生效的插件：

image.png