前提准备:

1、React项目npm run build打包

打包前配置

在项目打包之前需要在package.json文件中添加 "homepage": "./",,避免项目打开后出现空白页

面。

"homepage": "./",

react打包部署 docker react打包apk_web app

 项目中的接口一定要使用在线接口,不要使用本地接口,要不然打包出来的项目仍然是空白页

打包

项目根目录,打开终端,运行

npm run build

运行成功之后,项目根目录中就生成一个build文件夹,目录如下。

react打包部署 docker react打包apk_html_02

检验是否成功

运行生成的build文件夹里面的index.html文件,内容正常则运行成功。

2、注册hbuilderx账号,获取appid

hbuilderx下载 HBuilderX-高效极客技巧HBuilderX是当前最快的HTML开发工具,强大的代码助手帮你快速完成开发,最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛

react打包部署 docker react打包apk_自动生成_03

https://www.dcloud.io/hbuilderx.html

在 HBuilderX 中创建项目时,HBuilderX 会自动联网生成 appid, 并将该 appid 保存在 manifest 文件中的 appid 字段;

react打包部署 docker react打包apk_自动生成_04

 正式步骤

一、创建h5+app空模版 

左上角文件-->新建-->项目

react打包部署 docker react打包apk_自动生成_05

新建5+App项目,填写项目名称和保存路径(默认c盘,我改为了D盘,可不改),点击创建

react打包部署 docker react打包apk_react打包部署 docker_06

二、 将打包完成生成build文件目录除manifest.json文件之外的所有文件,都复制到新建的项目里

原build文件夹:

react打包部署 docker react打包apk_react打包部署 docker_07

 

复制到项目里 (新项目的空白文件夹可删除)

react打包部署 docker react打包apk_react打包部署 docker_08

 

三、检测打包的index.html是否白屏

双击index.html文件-->点击运行-->运行到浏览器-->选择一个浏览器运行

若正常显示,继续操作;若白屏,可能打包有误,重新打包

react打包部署 docker react打包apk_react打包部署 docker_09

 

四、 配置manifest.js应用入口页面地址

默认index.html,大多不用配置

react打包部署 docker react打包apk_自动生成_10

 

 五、manifest.js里图标配置

自动生成图标-->点击浏览...-->选择图片(选择项目打包中的logo图标或者其它小图标都可,是生成的App的图标)-->点击自动生成所有图标并替换,下方图标会自动生成

下方可配置不同图片

react打包部署 docker react打包apk_react打包部署 docker_11

 

 六、云打包

点击发行,选择云打包

react打包部署 docker react打包apk_自动生成_12

 没有证书的话,可选择使用公共测试证书

选择快速安心打包,点击打包

(第一次打包需要注册账号和安装插件)点击打包之后根据提示操作即可

react打包部署 docker react打包apk_html_13

 

 若点击打包之后出现通讯录须实名认证弹框,(一般默认选中通讯录配置)可能会需要实名验证,若不需要,可根据提示将manifest.js里模块配置中的通讯录取消勾选;将权限配置里的READ_CONTANTS取消勾选

react打包部署 docker react打包apk_react_14

react打包部署 docker react打包apk_html_15

下载

等几分钟打包成功,下方会有提示,根据下方打包路径进入文件夹,将打包好的apk文件发送到手机上,即可下载查看

react打包部署 docker react打包apk_自动生成_16

So Easy!! 快来试试吧!!!