React的移动端项目打包成手机的app软件apk格式
前提准备:
1、React项目npm run build打包
打包前配置
在项目打包之前需要在package.json
文件中添加 "homepage": "./",
,避免项目打开后出现空白页
面。
"homepage": "./",
项目中的接口一定要使用在线接口,不要使用本地接口,要不然打包出来的项目仍然是空白页
打包
项目根目录,打开终端,运行
npm run build
运行成功之后,项目根目录中就生成一个build文件夹,目录如下。
检验是否成功
运行生成的build文件夹里面的index.html文件,内容正常则运行成功。
2、注册hbuilderx账号,获取appid
hbuilderx下载 HBuilderX-高效极客技巧HBuilderX是当前最快的HTML开发工具,强大的代码助手帮你快速完成开发,最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛https://www.dcloud.io/hbuilderx.html
在 HBuilderX 中创建项目时,HBuilderX 会自动联网生成 appid, 并将该 appid 保存在 manifest 文件中的 appid
字段;
正式步骤
一、创建h5+app空模版
左上角文件-->新建-->项目
新建5+App项目,填写项目名称和保存路径(默认c盘,我改为了D盘,可不改),点击创建
二、 将打包完成生成build文件目录除manifest.json
文件之外的所有文件,都复制到新建的项目里
原build文件夹:
复制到项目里 (新项目的空白文件夹可删除)
三、检测打包的index.html是否白屏
双击index.html文件-->点击运行-->运行到浏览器-->选择一个浏览器运行
若正常显示,继续操作;若白屏,可能打包有误,重新打包
四、 配置manifest.js应用入口页面地址
默认index.html,大多不用配置
五、manifest.js里图标配置
自动生成图标-->点击浏览...-->选择图片(选择项目打包中的logo图标或者其它小图标都可,是生成的App的图标)-->点击自动生成所有图标并替换,下方图标会自动生成
下方可配置不同图片
六、云打包
点击发行,选择云打包
没有证书的话,可选择使用公共测试证书
选择快速安心打包,点击打包
(第一次打包需要注册账号和安装插件)点击打包之后根据提示操作即可
若点击打包之后出现通讯录须实名认证弹框,(一般默认选中通讯录配置)可能会需要实名验证,若不需要,可根据提示将manifest.js里模块配置中的通讯录取消勾选;将权限配置里的READ_CONTANTS取消勾选
下载
等几分钟打包成功,下方会有提示,根据下方打包路径进入文件夹,将打包好的apk文件发送到手机上,即可下载查看
So Easy!! 快来试试吧!!!
React的移动端项目打包成手机的app软件apk格式相关推荐
- vue的移动端项目打包成手机的app软件apk格式
目录 前提准备: 1.vue项目npm run build打包成dist文件夹 2.注册hbuilderx账号,获取appid 步骤 一.创建h5+app空模版 二. 将打包完成生成dist文件目录复 ...
- 怎么将vue的移动端项目打包成手机的app软件apk格式的。hbuilderx 云打包。
献丑了 第一步注册hbuilderx账号需要实名认证,要不然获取appid会获取不了. hbuilder 下载 https://www.dcloud.io/hbuilderx.html vue项目np ...
- vue移动端项目怎么生成apk_将Vue移动端项目打包成手机app---HBuilder
将移动端页面打包成app 1.使用 HBuilder 直接编译打包 点击左上角 文件>打开目录>选择目录 选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项 ...
- app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App
在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低.webapp 要求很低,可以说只要会开发web 站就能开 ...
- vue移动端项目打包成app
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 (我使用的是vue-cli 3.*版本) 在项目文件夹下创建一个 vue. ...
- vue PC端项目打包成windows桌面程序
一.npm run build 生成dist文件 注意:打包dist文件需要将绝对路径"/"改为相对路径"./" 二.把electron的官方例子扒下来,简称项 ...
- 使用HBuilder将H5的项目打包成手机可安装的webapp程序(.apk)
下载HBuilder 官网:http://www.dcloud.io/ (1)下载成功后邮箱注册登录 (2)文件->新建->移动App (3)创建成功后得到这样一个目录结构,manife ...
- 前端项目如何打包成手机app?
前端项目如何打包成手机app 阐述 难点及解决方式 具体使用步骤 创建5+app空项目 删除5+app默认的项目结构 移动并进行基础设置 发行及云打包 查看及下载 阐述 前端是做什么的?写网页的?不, ...
- vue前后端分离项目打包成app,部署成移动端
将vue项目打包成app,在手机上运行. 1. vue打包 npm run build 先将vue的前端项目打包成dist文件夹 2. 安装hbuilderX Hbuilder官网地址 3. hbui ...
最新文章
- QIIME 2教程. 09数据导入Importing data(2020.11)
- 用 Hadoop 进行分布式并行编程, 第 3 部分 部署到分布式环境
- Ubuntu 安装firefox中文版 (启用google翻译功能)
- python把数据写入excel_Python向excel中写入数据的方法
- 使用MQTT.fx接入阿里云物联网平台
- 伺服怎么接单相220伏_三相380伏电机能接单相220伏运行吗?
- 【clickhouse】clickhouse 表引擎之 Merge
- 【C语言指针】 回调函数、冒泡函数模拟实现qsort、指针和数组笔试题解析
- 二维分类教案_大班数学活动二维分类
- 史上最纯净的Win7专业版系统
- FreeRTOS学习笔记(10)——中断管理
- matlab 稀疏随机矩阵,Matlab 稀疏矩阵函数
- Java计算平均成绩
- 墙裂推荐6个优质公众号
- 图片怎么转换成PDF格式?这两种方法都可以实现转换
- 百度超级链数字藏品 仿鲸探数字藏品平台开发
- 2.1 - 操作系统的作用、分类
- linux sftp创建多用户,Linux 下创建 sftp 用户并限定目录
- 坚果G9致命缺点,一篇文章告诉你坚果G9到底好不好
- RPM包离线下载方法
热门文章
- 农夫过河问题 matlab,趣味英语:农夫过河问题
- Teamviewer - Teamviewer被检测成商用,无法使用个人版怎么解决(不用修改Mac地址)
- 快递查询方法,一键查询全部快递的物流信息
- Java数据结构与算法面试题,首发Java程序员人手必备的进阶知识体系,(1)
- 如何定义日志消息的级别?详解日志的5个级别
- 计算机网络工程和网络工程的区别,网络工程专业和计算机网络专业有什么区别?...
- 【热文】 为什么程序员痴迷于猫?
- D3 天眼查 股权穿透 股权结构,默认第一行,异步添加,加减号居中,拖拽,缩放, hover。
- html 图片不显示
- Front Immunol 复现 | 4. 使用estimate包评估肿瘤纯度