开发环境

• 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