uni-app之iOS平台原生插件开发 ios

1.简介
由于uni-app官方使用工程依赖的形式去集成原生插件，流程有点复杂，对不熟悉iOS开发的道友不够友好。于是，基于cocoapods的集成方案应运而生。本方案的目的在于简化集成流程，让没有iOS开发经验的道友能够快速集成并使用原生插件。
2.开发环境
Mac系统
Xcode 12.1 及以上版本，[下载地址：apps.apple.com/cn/app/xcod…]
cocoapods环境，[安装教程：cocoapods.org/]
3.使用cocoapods生成示例工程
下载SDK[pan.baidu.com/s/1ExtRytSA…]并解压SDK到指定目录。解压后的目录结构如下图：

文章图片

进入code/SDK/HBuilder-uniPluginDemo目录，创建Podfile文件，文件内容如下
最低支持iOS10 platform :ios, '10.0'
?
忽略所有警告 inhibit_all_warnings!
?
target 'HBuilder' do
use_frameworks!
end
?
关闭bitcode post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
end
end
end
复制代码
然后打开终端依次执行以下命令：
cd ~/code/SDK/HBuilder-uniPluginDemo
pod install
复制代码
到这，我们的基础工程已经搭建完成，接下来就是创建原生插件
4.使用cocoapods创建pod插件
创建pod插件的命令如下：
cd ~/code/SDK
pod lib create WITTestUniPlugin
复制代码
执行命令后，对应的输入信息依次为：
What platform do you want to use?? [ iOS / macOS ]

iOS
?
What language do you want to use?? [ Swift / ObjC ]
ObjC
?
Would you like to include a demo application with your library? [ Yes / No ]
No
?
Which testing frameworks will you use? [ Specta / Kiwi / None ]
None
?
Would you like to do view based testing? [ Yes / No ]
No
?
What is your class prefix?
WIT
复制代码
到这，原生插件已经创建完毕，接下来就是对原生插件的开发
5.集成调试原生插件
打开code/SDK/HBuilder-uniPluginDemo目录的Podfile文件，并增加代码pod 'WITTestUniPlugin', :path=>'./WITTestUniPlugin'到如下位置：

最低支持iOS10 platform :ios, '10.0'
?
忽略所有警告 inhibit_all_warnings!
?
target 'HBuilder' do
use_frameworks!
?
pod 'WITTestUniPlugin', :path=>'../WITTestUniPlugin'
end
?
关闭bitcode post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
end
end
end
复制代码
然后打开终端依次执行以下命令：
cd ~/code/SDK/HBuilder-uniPluginDemo
pod install
复制代码
到这，原生插件已经集成到原生项目，接下来就是对原生插件的开发
6.开发原生插件
双击code/SDK/HBuilder-uniPluginDemo/HBuilder-uniPlugin.xcworkspace文件后，会打开原生项目。依次展开左侧的目录树Pods -> Development Pods -> WITTestUniPlugin。在ReplaceMe.m文件的位置新建WITTestUniModule类。然后打开文件，并在最后一行代码的前面插入如下代码
s.static_framework = true
?
s.xcconfig = {
'USER_HEADER_SEARCH_PATHS' => [
'"$(SRCROOT)/../../SDK/inc/DCUni"',
'"$(SRCROOT)/../../SDK/inc/weexHeader"'
]
}
复制代码
最终效果如下：

文章图片

接下来，就开始原生插件的编写，此部分可参考官方文档：，最终的代码如下：
WITTestUniModule.h代码如下
import import "DCUniModule.h" ?
NS_ASSUME_NONNULL_BEGIN
?
@interface WITTestUniModule : DCUniModule
?
@end
?
NS_ASSUME_NONNULL_END
复制代码
WITTestUniModule.m代码如下
import "WITTestUniModule.h" import "DCUniDefine.h" @implementation WITTestUniModule
// 通过宏 UNI_EXPORT_METHOD 将异步方法暴露给 js 端
UNI_EXPORT_METHOD(@selector(testAsyncFunc:callback:))
// 通过宏 UNI_EXPORT_METHOD_SYNC 将同步方法暴露给 js 端
UNI_EXPORT_METHOD_SYNC(@selector(testSyncFunc:))
/// 异步方法（注：异步方法会在主线程（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-app之iOS平台原生插件开发】/// 同步方法（注：同步方法会在 js 线程执行）
/// @param options js 端调用方法时传递的参数支持：String、Number、Boolean、JsonObject 类型

(NSString )testSyncFunc:(NSDictionary )options {
// options 为 js 端调用此方法时传递的参数
NSLog(@"%@",options);
/*
可以在该方法中实现原生功能，然后直接通过 return 返回参数给 js
*/
// 同步返回参数给 js 端支持：NSString、NSDictionary（只能包含基本数据类型）、NSNumber 类型
return @"success";
}

@end
复制代码
然后打开终端依次执行以下命令：
cd ~/code/SDK/HBuilder-uniPluginDemo
pod install
复制代码
然后按下图流程操作，并获取到WITTestUniPlugin.framework文件夹

文章图片

到这，原生插件已经开发完毕，请看最后一步，如何使用该插件
7.把原生插件集成到uni-app
先按如下步骤创建对应的文件及文件夹：
a.打开你自己的uni-app工程
b.在该工程的根目录新建nativeplugins文件夹
c.在nativeplugins文件夹里新建WITTestUniPlugin文件夹和package.json文件
d.在WITTestUniPlugin文件夹里新建ios文件夹，并把WITTestUniPlugin.framework文件放到该目录
创建完成后的效果图：

文章图片

编辑package.json文件内容如下：
{

"name":"WITTestUniPlugin", "id":"WITTestUniPlugin", "version":"0.1.0", "description":"iOS原生插件", "_dp_type":"nativeplugin", "_dp_nativeplugin":{ "ios":{ "plugins":[ { "type":"module", "name":"WITTestUniPlugin", "class":"WITTestUniModule" } ], "integrateType":"framework", "deploymentTarget":"10.0", "frameworks":[ "Foundation.framework", "UIKit.framework" ] } }

}
复制代码
在uni-app工程添加本地插件:

文章图片

注：添加本地插件后，需要重新制作自定义调试基座
使用本地插件：
const nativiPlugin = uni.requireNativePlugin('WITTestUniPlugin');

var account = 'account'; var pwd = 'pwd'; nativiPlugin.testAsyncFunc({ 'account': account, 'pwd': pwd }, (ret) => { uni.showToast({ title: '调用异步方法 ' + ret, icon: "none" }) console.log(ret); });

复制代码
End