简单窥探 uniapp 的基座原理,多了解一点没错!

1,707 阅读3分钟

废话开篇:HBuilderX 大家应该不陌生,开发uniApp的神器。对于APP运行基座的是不是会有一些疑惑,HBuilderX是怎么样将基座运行到手机上并同步开发的页面资源的呢?下面对上面的问题进行一下简单的探讨。

本文针对iOS系统进行梳理。

步骤一、ipa基座包在哪里?

首先显示一下HBuilderX包内容,按照如下目录会发现一个安装包。

image.png

image.png

这个就是安装包,他是一个.app文件,那么,如果把它看作基座,怎么才能进行安装到手机的操作呢?又怎么进行uniapp页面资源的加载呢?

步骤二、.app包怎么用命令行进行安装?

首页,这里创建一个简单工程demo,打出了一个安装包,保存在一个临时文件夹下。如图:

image.png

image.png

这里在 HB 文件夹下放了一张名为“petSkin3.png”图片,这里稍后会用到。下面,来研究一下如何用命令行安装这个包。

首先,安装一下 ios-deploy 工具,在终端输入:brew install ios-deploy。

安装好后进入临时“HB”文件,

image.png

想要安装到手机上首先要检测到链接的手机,在终端输入:ios-deploy -c –no-wifi

这里检测用数据线连接的手机。

image.png

命令执行后就会检测到当前MAC电脑连接的手机了

image.png

下面执行将安装包安装到检测的手机上,在终端输入:ios-deploy -d -b QARCWApp.app

image.png

这时候,手机上就会安装上“HB”文件夹下的 .app 安装包。当然,HBuilderX用的是企业开发者证书,所以,就需要去“设置”里去信任一下证书。当然,这里就是模拟用 HBuilderX 执行 “运行到手机” 的功能。

上面的终端命令是简写,在终端输入:ios-deploy -h,查看完整的命令意义。

image.png

-d 就是 --debug的简写

步骤三、HBuilderX 在运行后如何同步uniapp 的 vue 页面文件?

在 uniapp 官网里自定义原生组件有这样的说明:HBuilderX 会对当前的 uniapp vue文件进行打包,最终会生成一个压缩包。将压缩包放到工程里,先进行解压,然后通过 uniapp 的配套 SDK 进行展示。

那么,现在不考虑 uniapp 打包、压缩过程,单纯需要考虑怎么把已有的资源放到某个app的沙盒里面,然后app启动后直接访问沙盒路径下的资源?

下面将“HB”文件夹下的图片导入到 ‘.app’ 包的沙盒路径下。

image.png

在终端输入:ios-deploy -1 HBGG.QARCWApp -o petSkin3.png -2 Documents/petSkin3.png

注意:这里的 -1(指定boundId), -o(upload), -2(指向 to) 指令都是简写,其实就是将本级目录下的某个文件放到某个boundId应用下的沙盒路径下,这里直接放在了 Documents 目录下

image.png

好了,运行成功,看一下沙盒目录有没有这张图片。

image.png

image.png

image.png

可以看到图片复制到里面了!!

步骤四、简单的使用这张图片

image.png

image.png

总结:

加载出来了,那么整个过程是不是流程清晰了呢?

1、准备好安装包。

2、准备好 uniapp 项目压缩包。

3、运行到手机。

4、同步uniapp资源。

5、uniapp 原生SDK对 vue 压缩包进行解压、加载、显示等操作(可以先熟悉uniapp 小程序 SDK 的过程)。

最后,文章仅是简单的推测了一下 HBuilderX 下的iOS移动端运行方式,以后再去面试就对面试官“侃侃” HBuilderX 运行移动端的逻辑。互相学习,大手勿笑。