Uni-app Native plugin develop fo
一、背景
Uni-app 使用 Vue 作为 UI 框架,底层集成不同平台统一的 Plugin,来达到跨平台的功能。
本文主要专门针对开发 Uni-app iOS 源生插件方法。
官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
二、使用 Cocoapods 开发 Uni-app native 插件
官方尚未提供 Cocoapods 开发插件,为了方便开发进行此教程。
开发教程:https://nativesupport.dcloud.net.cn/NativePlugin/course/ios.html#
1.下载SDK
下载地址: https://nativesupport.dcloud.net.cn/AppDocs/download/ios.html#
下载完成之后并解压:

2. 配置Podfile
打开终端 cd 到 HBuilder-uniPluginDemo 文件目录下。
输入 pod init

编辑 Podfile
# Uncomment the next line to define a global platform for your project
platform :ios, '11.0'
# 忽略所有pods警告
inhibit_all_warnings!
workspace 'uniPlugins'
target 'HBuilder' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for HBuilder
end
3. 使用 Cocoapods 创建插件库
为了方便开发管理,首先,先创建一个 Folder,用来放不同的 Module。
使用终端 cd 到对应的目录下。
输入命令
pod lib create CC_Module # CC_module 即就是组件库的名称
组件库配置信息:

此处使用的 Objective-C 语言进行开发。

配置. podspec 文件
#
# Be sure to run `pod lib lint CC_Module.podspec' to ensure this is a
# valid spec before submitting.
#
# Any lines starting with a # are optional, but their use is encouraged
# To learn more about a Podspec see https://guides.cocoapods.org/syntax/podspec.html
#
Pod::Spec.new do |s|
s.name = 'CC_Module'
s.version = '0.1.0'
s.summary = 'A short description of CC_Module.'
# This description is used to generate tags and improve search results.
# * Think: What does it do? Why did you write it? What is the focus?
# * Try to keep it short, snappy and to the point.
# * Write the description between the DESC delimiters below.
# * Finally, don't worry about the indent, CocoaPods strips it!
s.description = <<-DESC
TODO: Add long description of the pod here.
DESC
s.homepage = 'https://github.com/Carson/CC_Module'
# s.screenshots = 'www.example.com/screenshots_1', 'www.example.com/screenshots_2'
s.license = { :type => 'MIT', :file => 'LICENSE' }
s.author = { 'Carson' => 'carson.chen@yunzhanghu.com' }
s.source = { :git => 'https://github.com/Carson/CC_Module.git', :tag => s.version.to_s }
# s.social_media_url = 'https://twitter.com/<TWITTER_USERNAME>'
s.ios.deployment_target = '11.0'
s.source_files = 'CC_Module/Classes/**/*'
s.static_framework = true
s.xcconfig = {
'USER_HEADER_SEARCH_PATHS' => [
'"$(SRCROOT)/../../SDK/inc"'
]
}
# s.resource_bundles = {
# 'CC_Module' => ['CC_Module/Assets/*.png']
# }
# s.public_header_files = 'Pod/Classes/**/*.h'
# s.frameworks = 'UIKit', 'MapKit'
# s.dependency 'AFNetworking', '~> 2.3'
end
配置 Podfile 文件
# Uncomment the next line to define a global platform for your project
platform :ios, '11.0'
# 忽略所有pods警告
inhibit_all_warnings!
workspace 'uniPlugins'
target 'HBuilder' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for HBuilder
pod 'CC_Module', :path => '../NativePlugins/CC_Module'
end
执行 pod install 命令

4. 运行工程
打开工程
目录结构

工程配置:

此处的配置是 “$(inherited)”为了让工程能加入Pods的代码。
Module 配置:
官方文档: https://nativesupport.dcloud.net.cn/NativePlugin/course/ios.html#

如果不加此配置的话,创建 uni-app 自定义基座的时候,会出现编译报错的问题。
5. 开发插件
创建插件文件:

参考官方写法:https://nativesupport.dcloud.net.cn/NativePlugin/course/ios.html# 参考类 TesModule
调整头文件引入:


两处不调整的话,工程编译会有问题。
进行开发:

详情参考:https://nativesupport.dcloud.net.cn/NativePlugin/course/ios.html#
6. 打包 xcframework
使用命令:
xcodebuild -create-xcframework \
-framework ${IPHONEOS_Framework_Path} \
-framework ${IPHONESIMULATOR_Framework_Path} \
-output archives/${TargetFrameworkName}.xcframework
7. 打包 Uni-app plugin
参考文档:
https://nativesupport.dcloud.net.cn/NativePlugin/course/package.html
8. 集成 Uni-app
参考文档:
https://nativesupport.dcloud.net.cn/NativePlugin/course/package.html
注意:使用 Native 插件的 Uni-app 的应用,必须创建自定义基座并使用真机才可运行。不然运行时,不含有 Native 插件。
Thanks
Bilibili: https://www.bilibili.com/video/BV1Db4y1D7Yr/?spm_id_from=333.337.search-card.all.click&vd_source=d28a5dff5a9efa681b334bfda27769ac
uni-app: https://www.dcloud.io/