跨平台应用开发进阶(六) ：uni-app实现原生插件集成_uniapp 添加了原生插件

2.1 下载最新 SDK

在 Dcloud里下载最新的SDK。

下载解压后目录如下：

|--iOSSDK	
	|-- HBuilder-Hello				// uni-app 离线打包工程
	|-- HBuilder-uniPluginDemo		// uni-app 插件开发主工程 （本文档需要使用的工程）
	|-- SDK							// 依赖库及依赖资源文件
	|-- Feature-iOS.xls				// 功能模块与依赖库对应关系说明表格
	|-- readme.txt					// 目录说明

其中，SDK 目录中的**HBuilder-uniPluginDemo**为 uni原生插件开发主工程，该工程已经将各项配置都配置齐全，开发uni原生插件需要依赖此工程。插件示例工程DCTestUniPlugin也在目录中，另外插件市场的 原生增强提示框插件https://ext.dcloud.net.cn/plugin?id=36 对应的原生插件工程DCRichAlert也放到了此目录中提供给开发者作为参考。

PS：最省事的办法就是直接在DCTestUniPlugin``项目基础上做修改，将原生功能搬运过来。

2.2 创建插件工程

打开 Xcode，创建一个新的工程，template 选择 Framework 或 Static Library（示例工程选择的是 Framework），然后点击 Next

在 Product Name 中输入插件工程名称（建议使用一个性化的前缀，避免与其他人的插件包名冲突），其他项不需要修改保持工程默认填充的即可，然后点击Next

然后选择工程存放路径，建议直接存放在 iOSSDK目录中的 HBuilder-uniPluginDemo 插件开发主工程目录下，如下图所示，然后点击 Create。

然后选中工程名，在TARGETS->Build Settings中，将 Mach-O Type 设置为 Static Library 如下图所示。

然后将插件工程关闭，接下来需要将插件工程导入到插件开发主工程中。

2.3 导入插件工程

接下来打开 iOSSDK/HBuilder-uniPluginDemo工程目录，双击目录中的HBuilder-uniPlugin.xcodeproj 文件运行插件开发主工程。

在 Xcode 项目左侧目录选中主工程名，然后点击右键选择Add Files to “HBuilder-uniPlugin” ...

然后选择刚刚创建的插件工程路径，选中插件工程文件，勾选 Create folder references 和 Add to targets 两项，然后点击Add。

这时在 Xcode 左侧目录中可以看到插件工程已经添加到了主工程中，如下图所示。

2.4 工程配置

然后在 Xcode 项目左侧目录选中主工程名，在TARGETS->Build Phases->Dependencies中点击+。

在弹窗中选中插件工程，如图所示，然后点击Add，将插件工程添加到Dependencies中。

然后在Link Binary With Libraries中点击+，同样在弹窗中选中插件工程，点击Add。

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

接下来需要在插件工程的Header Search Paths中添加开发插件所需的头文件引用，头文件存放在主工程的HBuilder-Hello/inc中，添加方法如下图所示，在 Xcode 项目左侧目录选中插件工程名，找到TARGETS->Build Settings->Header Search Paths双击右侧区域打开添加窗口，然后将inc目录拖入会自动填充相对路径，然后将模式改成recursive。

2.5 插件扩展方式

原生插件是基于 DCUniPlugin 规范来实现，扩展原生功能有两种方式：

• module：不需要参与页面布局，只需要通过 API 调用原生功能，比如：获取当前定位信息、数据请求等功能，通过扩展module的方式来实现；
• component：需要参与页面布局，比如：map、image等需要显示UI的功能，通过扩展component即组件的方法来实现；

需要根据实际的情况选择扩展方式，当然插件中可以同时存在 module 和 component，也可以是多个 module 和 多个 component；

特别注意⚠️： 如果需要扩展自定义的 module 或者 component ，一定注意不要将 oc 的 runtime 暴露给 JS ，不要将一些诸如 dlopen()， dlsym()， respondsToSelector:，performSelector:，method_exchangeImplementations() 的动态和不可控的方法暴露给JS，也不要将系统的私有API暴露给JS。否则将可能面临苹果上架审核问题。

三、代码实现

3.1 扩展 module

新建TestModule类，继承 DCUniModule，引入 DCUniModule.h 头文件。然后在 TestModule.m 文件中添加实现方法。

//
//  TestModule.m
//  DCTestUniPlugin
//
//  Created by SHQ5785 on 2023/6/27.
//  Copyright © 2020 DCloud. All rights reserved.
//

#import "TestModule.h"

@implementation TestModule

// 通过宏 UNI_EXPORT_METHOD 将异步方法暴露给 js 端
UNI_EXPORT_METHOD(@selector(testAsyncFunc:callback:))

/// 异步方法（注：异步方法会在主线程（UI线程）执行）
/// @param options js 端调用方法时传递的参数
/// @param callback 回调方法，回传参数给 js 端
- (void)testAsyncFunc:(NSDictionary *)options callback:(UniModuleKeepAliveCallback)callback {
    // options 为 js 端调用此方法时传递的参数
    NSLog(@"%@",options);
    
    // 可以在该方法中实现原生能力，然后通过 callback 回调到 js

    // 回调方法，传递参数给 js 端 注：只支持返回 String 或 NSDictionary (map) 类型
    if (callback) {
        // 第一个参数为回传给js端的数据，第二个参数为标识，表示该回调方法是否支持多次调用，如果原生端需要多次回调js端则第二个参数传 YES;
        callback(@"success",NO);
    }
}

// 通过宏 UNI_EXPORT_METHOD_SYNC 将同步方法暴露给 js 端
UNI_EXPORT_METHOD_SYNC(@selector(testSyncFunc:))

/// 同步方法（注：同步方法会在 js 线程执行）
/// @param options js 端调用方法时传递的参数
- (NSString *)testSyncFunc:(NSDictionary *)options {
    // options 为 js 端调用此方法时传递的参数
    NSLog(@"%@",options);

    /*
     可以在该方法中实现原生功能，然后直接通过 return 返回参数给 js
     */

    // 同步返回参数给 js 端 注：只支持返回 String 或 NSDictionary (map) 类型
    return @"success";
}

@end

3.2 插件功能本地验证

uni-app 中集成插件功能实现代码如下：

<template>
    <view>
		<button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
		<button type="primary" @click="testSyncFunc">testSyncFunc</button>
	</view>
</template>

<script>
	// 首先需要通过 uni.requireNativePlugin("ModuleName") 获取 module
	var testModule = uni.requireNativePlugin("DCTestUniPlugin-TestModule")
	console.log('---------------------testModule----------------:', 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>

将引入插件功能的 uni-app 项目生成 uni-app 本地打包资源。首先需要生成本地打包资源，在 HBuilderX 中选你的 uni-app 工程，右键->发现->原生App-本地打→生成本地打包App资源。

后续步骤就是将生成的本地打包APP资源导入XCode，详参博文：跨平台应用开发进阶(十四) ：uni-app 实现IOS原生APP-本地打包集成极光推送(JG-JPUSH)详细教程https://shq5785.blog.csdn.net/article/details/124472780然后运行项目测试，如下图所示（能调到 module 的方法，并且可以获取 module 返回的数据，则说明功能正常）

3.3 插件制作

插件功能验证无误后，便可制作插件，生成插件包。

首先，编译生成插件库文件（.framework 或 .a）。

如下图所示，将编译工程选择为插件项目（DCTestUniPlugin），运行设备选择Generic iOS Device.

然后点击Edit Scheme...在弹窗中，将Run->Info->Build Configuration切换到Release，然后点击Close关闭弹窗。

然后在 Xcode 左侧目录中选中插件工程名，查看TARGETS->Build Settings->Architectures，确保

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

[外链图片转存中…(img-yn0guyMZ-1714201971915)]

[外链图片转存中…(img-8ImJgWqY-1714201971916)]

[外链图片转存中…(img-tr8WD5Ir-1714201971916)]