HBuilderX将React移动端项目打包成apk，并在模拟器进行展示

HBuilderX将React移动端项目打包成apk，并在模拟器进行展示

目前使用React技术栈开发的项目很多，很多同学想着把React开发好的移动端项目通过HBuilderX把项目打包成apk安装在手机或者模拟器上进行测试。目前网上有很多把Vue项目通过HBuilderX把项目打包成apk的文章，对于React移动端项目打包成apk文章非常少，这就是写本次文章的初衷，希望该文章能够帮助各位同学，对同学今后的学习和测试有所帮助。

一、项目打包前配置和打包

1、项目打包前配置

项目开发完毕后，为了保证开发好的项目打包之后能够正常显示：

①、在项目打包之前需要在package.json文件中添加 "homepage": "./"（只要在package.json文件中添加"homepage": "./"打包好的项目就能够正常访问到静态资源,避免项目打开后出现空白页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bwGdIxs4-1634132339535)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013162807378.png)]

②、项目中的接口一定要使用在线接口，不要使用本地接口，要不然打包出来的项目仍然是空白页**（非常重要）

2、项目打包

以上配置和检查完之后，在终端中找到项目根目录，运行打包命令 npm run build

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AX31YPq8-1634132339539)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013165020661.png)]

npm run build命令执行完之后，项目根目录中就生成一个build目录。

在这里插入图片描述

build目录的文件就是生成apk必要文件

二、使用HBuilderX把打包好的项目打包成apk文件

0、HBuilderX下载及注册账号

HBuilderX下载地址：https://www.dcloud.io/hbuilderx.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jJAEsDt6-1634132339541)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013170518024.png)]

下载之后，打开HBuilderX，注册登录账号，注册之后进行登录

在这里插入图片描述

1、使用HBuilderX新建APP项目

在这里插入图片描述

在这里插入图片描述

创建完毕后的APP项目目录如下所示：

在这里插入图片描述

css、img、js 目录是静态目录，项目打包后的静态资源可以放到对应的这些目录中，unpackage目录是今后打包成生成apk的目录，里面会存放跟生成apk相关的文件，index.html文件是 首页启动文件，运行打包命令时需要在这个文件中进行，manifest.json文件打包的配置文件里面有各项配置项。

3、把项目打包的文件，移动到HBuilderX新建APP项目中

首先，先删除APP项目中的css、img、js 目录是静态目录，然后把builde目录中，除manifest.json文件之外的所有文件，都拷贝到HBuilderX新建APP项目中来。以下是拷贝后的目录结构。

在这里插入图片描述

4、配置APP项目中manifest.json文件

双击项目目录中的manifest.json文件，进行如下配置：

4.1 基础配置

应用标识（AppID）需要注册和登录HBuilderX才能自动生成，如果没有登录，请点击右侧【重新获取】按钮进行登录，会自动生成应用标识（AppID）码。

在这里插入图片描述

4.2 图标配置

图标配置中，选择【浏览…】按钮，选择项目打包中的logo图标或者其它小图标即可

请添加图片描述

然后点击【自动生成所有图标并替换】按钮，进行自动生成不同大小的图标。

请添加图片描述

4.3 启动界面配置

在这里插入图片描述

4.4 模块配置

取消勾选 Contact（通讯录）

在这里插入图片描述

其余其它配置，均不需要再进行配置，如果有需要可以根据情况进行配置即可。

5、使用HBuilderX试运行打包后的项目

双击目录中index.html文件，然后点击菜单栏中 【运行】--> 【运行到浏览器】--> 【chrome】，检查下项目是否能够正常显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eKGpKAVk-1634132339552)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013210311580.png)]

项目打开效果如下所示：

项目如果能够正常打开，说明项目配置目前到此没有问题，如果项目打开是空白页面，仍需要再次检查 第一部分中，项目打包前和项目打包的配置。

在这里插入图片描述

6、使用HBuilderX打包成APK文件

6.1 点击菜单栏中 【发行】--> 【原生App-云打包】，打包生成APK文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gLO6aZoL-1634132339554)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013211002671.png)]

6.2 选择【使用公共测试证书】，然后点击【打包】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g1v0vu0T-1634132339555)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013211116325.png)]

6.3 打包校验中选择【继续打包】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQJtOUHt-1634132339556)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013211318319.png)]

在控制台中显示打包状态，队列中，说明正在打包，在这里我们需要稍等片刻。

在这里插入图片描述

显示下图所示内容，说明打包成功了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UqGFCCR6-1634132339557)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013211650720.png)]

点击【打开所在目录】

在这里插入图片描述

在apk栏中右击，选择 【打开文件所在目录】

在这里插入图片描述

能够看到我们打包好的apk文件

在这里插入图片描述

三、使用模拟器展示打包好的apk文件

1、下载和安装模拟器

市场上模拟器很多，在这里我选择的是mumu模拟器，大家也可以选择其它模拟器也是可以的。

mumu模拟器下载地址：https://mumu.163.com/mac/index.html

在这里插入图片描述

下载后，大家默认安装即可，在此就不再说明安装步骤了。

2、在模拟器中展示apk文件

启动模拟器之后，把生成的apk文件，直接拖动到模拟器中，然后再双击打开。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQN8IqC8-1634132339561)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013212426998.png)]

双击打开后如下所示：

在这里插入图片描述

至此，我们就可以再模拟器中进行APP测试了。over！