Uni-app Native plugin develop fo

2023-04-16  本文已影响0人  CarsonChen

一、背景

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/

上一篇下一篇

猜你喜欢

热点阅读