废话开篇:HBuilderX 大家应该不陌生,开发uniApp的神器。对于APP运行基座的是不是会有一些疑惑,HBuilderX是怎么样将基座运行到手机上并同步开发的页面资源的呢?下面对上面的问题进行一下简单的探讨。
本文针对iOS系统进行梳理。
步骤一、ipa基座包在哪里?
首先显示一下HBuilderX包内容,按照如下目录会发现一个安装包。
这个就是安装包,他是一个.app文件,那么,如果把它看作基座,怎么才能进行安装到手机的操作呢?又怎么进行uniapp页面资源的加载呢?
步骤二、.app包怎么用命令行进行安装?
首页,这里创建一个简单工程demo,打出了一个安装包,保存在一个临时文件夹下。如图:
这里在 HB 文件夹下放了一张名为“petSkin3.png”图片,这里稍后会用到。下面,来研究一下如何用命令行安装这个包。
首先,安装一下 ios-deploy 工具,在终端输入:brew install ios-deploy。
安装好后进入临时“HB”文件,
想要安装到手机上首先要检测到链接的手机,在终端输入:ios-deploy -c –no-wifi
这里检测用数据线连接的手机。
命令执行后就会检测到当前MAC电脑连接的手机了
下面执行将安装包安装到检测的手机上,在终端输入:ios-deploy -d -b QARCWApp.app
这时候,手机上就会安装上“HB”文件夹下的 .app 安装包。当然,HBuilderX用的是企业开发者证书,所以,就需要去“设置”里去信任一下证书。当然,这里就是模拟用 HBuilderX 执行 “运行到手机” 的功能。
上面的终端命令是简写,在终端输入:ios-deploy -h,查看完整的命令意义。
-d 就是 --debug的简写。
步骤三、HBuilderX 在运行后如何同步uniapp 的 vue 页面文件?
在 uniapp 官网里自定义原生组件有这样的说明:HBuilderX 会对当前的 uniapp vue文件进行打包,最终会生成一个压缩包。将压缩包放到工程里,先进行解压,然后通过 uniapp 的配套 SDK 进行展示。
那么,现在不考虑 uniapp 打包、压缩过程,单纯需要考虑怎么把已有的资源放到某个app的沙盒里面,然后app启动后直接访问沙盒路径下的资源?
下面将“HB”文件夹下的图片导入到 ‘.app’ 包的沙盒路径下。
在终端输入:ios-deploy -1 HBGG.QARCWApp -o petSkin3.png -2 Documents/petSkin3.png
注意:这里的 -1(指定boundId), -o(upload), -2(指向 to) 指令都是简写,其实就是将本级目录下的某个文件放到某个boundId应用下的沙盒路径下,这里直接放在了 Documents 目录下
好了,运行成功,看一下沙盒目录有没有这张图片。
可以看到图片复制到里面了!!
步骤四、简单的使用这张图片
总结:
加载出来了,那么整个过程是不是流程清晰了呢?
1、准备好安装包。
2、准备好 uniapp 项目压缩包。
3、运行到手机。
4、同步uniapp资源。
5、uniapp 原生SDK对 vue 压缩包进行解压、加载、显示等操作(可以先熟悉uniapp 小程序 SDK 的过程)。
最后,文章仅是简单的推测了一下 HBuilderX 下的iOS移动端运行方式,以后再去面试就对面试官“侃侃” HBuilderX 运行移动端的逻辑。互相学习,大手勿笑。