• 技术文章 >web前端 >uni-app

    聊聊iOS端下uniAPP原生插件是怎样打包的?(打包流程分享)

    青灯夜游青灯夜游2022-04-06 15:29:32转载1557
    iOS端下uniAPP原生插件是怎样打包的?下面本篇文章就来带大家聊聊iOS端下uniAPP 原生插件打包流程,希望对大家有所帮助!

    废话开篇:uniAPP 打包采用的是云编译的方式,也就是说,appiOS 原生部分的代码需要提交到 uni 的后台进行编译,可以理解为在 uni 服务器上有一个 Xcode 运行环境,当然云端应该是用 Xcode 命令完成的,当 HBuilderX 进行云编译的时候,本地的所有原生库会进行压缩然后打包到云端,最后,在将编译好的 ipa 包下载到本地,这样就可以安装了。

    一、静态库的设置

    根据 uni 官网下载的 Demo 可以简单的熟悉一下项目结构。

    1.png

    1、HBuilder-uniPlugin 主工程

    它其实大致可以理解为云端编译时候云端 Xcode 的全部编译环境,为什么这么说呢?可以看一下这个工程的全部依赖。

    2.png

    单纯本地的依赖项就多达 120+,因为,uni 有考虑云编译的成本,如果所有的库都由开发者进行上传,那么编译资源就会被大量占用,于是就采用了远端第三方库储备方式,这里 uni 后台也可以了解到。

    iOS 端依赖的第三方库版本说明

    https://nativesupport.dcloud.net.cn/AppDocs/usemodule/iOSModuleConfig/dependentLibrary

    3.png

    所以,在进行 uni 原生插件开发的时候,可以先参考一下远端是否有支持的第三方,以免重复导入出现编译符号冲突的问题。

    举例说明:比如,插件需要 B站 IJKMediaFramework 库(160M左右,确实很大),那么,先查看云端编译是否有此库,

    4.png

    发现已经存在,那么,这时候,就不需要进行本地 IJKMediaFramework 库提交了,只需要在 HBuilderXmanifest.json 配置下勾选 VideoPlayer 即可。

    5.png

    这样 HBuilderXmanifest.json 的配置就会告诉云编译将 IJKMediaFramework 给加到工程里来。

    2、DCTestUniPlugin 静态库工程

    在制作静态库的时候,这里需要设置静态库架构的支持。

    Build Setting -> Architectures 下进行设置

    6.png

    并注意在编译的时候,选择 Any iOS Device

    7.png

    静态库需要第三方库怎么办?

    在开发的时候肯定会遇到需要第三方库支持的情况,比如:AFNetWorking,这里先查阅了 uni 远端是否支持,发现并没有提高相应的静态库,那么,就需要本地进行上传。

    因为,自制静态库最终是要加载到 APP 的环境中,所有,自制静态库依赖第三方的策略就是将第三方库 .a 文件 添加到 HBuilder-uniPlugin 主工程下,因为自制静态库需要头文件引入,那么,就在 DCTestUniPlugin 静态库工程下的 Heard Search Paths 加入头文件的引入。

    HBuilder-uniPlugin 主工程

    8.png

    DCTestUniPlugin 静态库工程 Heard Search Paths

    9.png

    二、配置 iOS 原生插件 package.json

    所有的功能都开发完毕了,下一步就是 本地插件包配置

    具体的打包步骤可以参考上面的链接,最后的文件目录结构如下:

    10.png

    1、WSLUniPlugin 是整体文件,里面可以包含 androidios(官网上为标注 ios 而不是 iOS

    2、ios 文件里面包含全部需要的第三方库及自制静态库。

    3、package.json 是相关的配置,通过 package.json 内部信息会告诉远端编译加载哪些库及库的文件夹位置,当然还包括一些配置,比如哪些动态库是需要签名的(虽然可以自制动态库,但是需要进行签名)。

    三、 package.json 目录

    {
        "name": "WSLUniPlugin",//插件名称
        "id": "WSLUniPlugin",//插件ID
        "version": "1.0",
        "description": "功能描述",//功能描述这里进行功能描述,添加后会在HBuilder下展示
        "_dp_type":"nativeplugin",//原生组件类型
        "_dp_nativeplugin":{
            "ios": {
                "plugins": [
                    {
                        "type": "component",//插件类型,是功能组件(module)还是视图组件(component)
                        "name": "wsl-component",//在nvue文件内的标签tag
                        "class": "WSLComponent" //iOS 原生对象class,继承自 DCUniComponent
                    },
                ],
                "integrateType": "framework",//自制库类型
                "hooksClass": "",这里声明 app 生命周期勾子对象,它会同时响应appDelegate 事件
                "frameworks": [
    				"libAFNetworking.a",//uni远端非储备库,需要标注声明
    				"Masonry.framework",//Masonry 为uni远端储备库,ios 文件夹里不需要再添加,否则编译出现符号重复错误
                ],
                "embedFrameworks": [
                    "IDLFaceSDK.framework",//动态库
                ],
                "capabilities": {
                    "entitlements": {
                    },
                    "plists": {
                    }
                },
                "plists": {
                },
                "assets": [
                     "WSLUniPlugin.xcassets"//图片资源文件,这里填写的是与 ios 文件夹的相对路径,因为 WSLUniPlugin.xcassets 就在 ios 文件里,所以直接写。
                ],
                "privacies": [
                ],
                "embedSwift": false,
                "deploymentTarget": "8.0",//支持iOS版本
                "validArchitectures": [
                     "arm64"//架构
                ],
                "parameters": {
                },
                "resources": [
                    "WSLUniPlugin.bundle",//这里是一些资源文件,比如 bundle,这里填写的是与 ios 文件夹的相对路径,因为 WSLUniPlugin.bundle 就在 ios 文件里,所以直接写。
                ]
            }
        }
    }

    上面就是基本的配置设置。因为uni每天的云编译次数有限(10次左右),而且包体积要小于40M,超过次数2元每次,超过体积 10元每100M。是不是有点小坑,这样,每天的试错成本极高,所以,在这里记录一下。

    推荐:《uniapp教程

    以上就是聊聊iOS端下uniAPP原生插件是怎样打包的?(打包流程分享)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:iOS uniAPP 插件打包
    上一篇:uni-app中怎么开发一个全局弹层组件(代码示例) 下一篇:聊聊如何利用uniapp开发一个贪吃蛇小游戏!
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 你必须了解的UniAPP入门知识整理• 浅析uni-app中怎么提交form表单?(代码解析)• 总结分享uni-app的简单介绍• SQL入门学习之浅析UNION关键字的用法• 带你搞懂uniapp跨域问题(实例详解)• uni-app跨平台应用开发之实现资源在线升级
    1/1

    PHP中文网