美文网首页
Uni-app Native plugin develop fo

Uni-app Native plugin develop fo

作者: CarsonChen | 来源:发表于2023-04-16 12:03 被阅读0次

    一、背景

    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/

    相关文章

      网友评论

          本文标题:Uni-app Native plugin develop fo

          本文链接:https://www.haomeiwen.com/subject/fimfjdtx.html