Uni-app Native plugin develop for iOS

一、背景

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
调整头文件引入:
调整1
调整2

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

详情参考: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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容