使用HBuilderX将H5网页打包成APP

魅力丛林

已于 2022-07-06 07:20:39 修改

阅读量3.2k

点赞数 2

文章标签： java

于 2022-07-06 07:18:47 首次发布

本文链接：https://blog.csdn.net/meiliconglin/article/details/121177274

版权

使用HBuilderX将H5网页打包成APP

HBuilderX官方地址：https://www.dcloud.io/
安装后打开HBuiderX

选择5+App，名字随便取

创建好之后，打开目录，打开index.html添加

window.location.href=‘https://www.vlwx.com’;

点击manifest.json，基础配置，APP名字，是否全面屏

然后点击图标配置，选好后点自动生成所有图标并替换

点击模块配置，选VideoPlayer和X5内核

然后顶部菜单选发行，选择原生App-云打包

选公测证书然后点打包，（自己有证书就用自己的）

最后打包完成，下载下来就行了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

魅力丛林

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

利用HBuilderX将web项目打包成app

慧子

03-16

8249

HBuilderX下载网址：https://www.dcloud.io/hbuilderx.html HBuilderX：可直接将网页打包成手机端app，可以掠过安卓，真的很开心哈哈哈哈具体的如何构建文件可见教程：这里只介绍最后的配置打包方法～主要步骤 ----- 配置manifest.json文件在基础配置中输入你的web网址报错：选上面的重新获取AppID 图标配置...

HbuilderX 打包网站教程.docx

07-23

当你做完一个网页想要让它打包成一个APP的时候，可以参考此文档。此教程是我在工作中经常使用的一种方法，并且实践过无数次。

2 条评论您还未登录，请先登录后发表或查看评论

HBuilderX打包发布Android端app（.apk文件）

最新发布

日志

10-06

602

尚未完成社区身份验证(绑定手机号)，请点击链接 https://ask.dcloud.net.cn/account/setting/profile 验证后再重新打包。图示便是打包成功后生成的apk文件的路径，点击【打开所在目录】便得到app的apk文件。证书密钥以及证书别名与上一步在网站中填写的保持一致，证书文件为下载好的证书文件位置。选择免费生成安卓证书，按照要求填写信息后直接点生成，会下载一个压缩包，解压后。图示警告界面，点击“继续打包”填写完后点击“打包”。.jks为证书文件。按照图示填写相关信息。

H5项目如何打包成APP

m0_70958122的博客

11-08

1103

H5项目如何打包成APP

【服务器APP】利用HBuilder X把网页打包成APP

朝花夕拾

01-29

7896

本文介绍了如何使用HBuilder X，一款基于Electron框架的集成开发环境，将网页轻松打包成APP。通过简单易用的界面，开发者可以借助HTML5、CSS3和JavaScript技术，将自己的网页应用转化为原生移动应用。HBuilder X提供了多平台支持，内置调试工具和实时预览功能，使开发过程更加高效。文章深入解释了打包过程，同时强调了该工具的插件系统、云端服务等功能，为开发者提供了全面而便捷的开发体验。

【填坑】使用HbuilderX把h5网站封装成原生App

m0_66382276的博客

09-05

1997

4步创建一个H5 App，踩坑全过程记录。

HBuilder打包Web网址

05-25

HBuilder打包Web网址

hbuildx打包成apk_基于HBuilder将H5站点打包成app

weixin_35143455的博客

01-14

4591

整理说明本文介绍了基于HBuilderX,将自主开发的H5网站，使用云打包app的方法，以及打包app过程中，遇到的问题和解决方法。在HBuilderX中开发的应用，或者第三方的h5应用，可以创建项目，提交到云端打包生成apk(Android平台)和ipa(iOS平台)。如果本地配置好对应的原生开发环境，也可以使用本地打包。HBuilder介绍HBuilder是DCloud(数字天堂)推出的一款支...

使用hbuilderx将vue项目打包成App

啊哈前端的专栏

06-02

7019

一、打包vue web项目 1、修改build的配置在vue-cli(2.9.x版本)下，修改config目录下index.js里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号) 2、运行yarn run build（我用的是yarn包管理器，如果是用npm，则运行npm run build）打包后的静态资源文件之后会用到。 ...

HBuilderX打包H5、vue项目

bestyinjun的专栏

12-19

1773

HBuilderX打包H5、vue项目

Hbuilderx离线打包详细教程

06-20

本人小白，刚接触app，由于Android Stuido原生开发比较困难，所以采用Hbuilderx进行h5开发，由于使用HbuilderX云打包要进行排队，而且要付费，考虑到以后项目在上线后，若遇到紧急bug修复，采用云打包模式有可能还要...

Vue 项目利用 HBuilderX 打包 APP 流程

前端知识分享喵

05-12

6946

想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。

Hbuilder打包安卓H5-APP，APP与程序分离，更新无需重新打包

一切如你的博客

10-24

3396

Hbuilder打包安卓H5-APP，将自己的APP与程序分离，在服务器上更新APP的代码，apk无需重新打包

使用Hbuilder打包前端网站为WebApp(Android,ios应用)

田兴的博客

10-08

4537

准备工作：你要打包的移动端网站地址，如：http://www.tianguixing.com/dist2/#/ 安装 HbuilderX 工具：官网：http://www.dcloud.io/ 根据你的电脑系统选择下载开发版安装成功后，回到Hbuilder官网，注册一个账号，然后到软件里点击左下角头像进行登陆打开开发者工具软件，点击文件 -> 新建 -> 项目选择 Wap2App，填写项目名称并将刚刚复制的网址粘贴进去，模板选择默认模板，然后点击创建右下角会提示项目创建

HbuilderX打包app，Hbuilder怎么打包app，H5打包成app，H5怎么打包成app

热门推荐

LIUAWEIO的博客

03-21

2万+

1.下载HbuilderX之后新建项目 2.在这里选则你需要新建的项目类型，本人打包的是h5app，选的5+app 3.选择好项目本地存放的地址，编写项目名，之后点击创建 4.打开刚刚创建的那个项目，点击打开manifest.json，就是下图这样子 5.填写你的h5项目地址 6.基本配置（看图），太简单太多自己研究 7.SDK配置里可以配置你的项目的appid、key其他配置，比如你的项目...

HbuilderX打包成apk安卓安装包并装到手机上

AN_NI_112的博客

05-27

1万+

HbuilderX打包成apk安卓安装包并装到手机上

weixin_39531992的博客

11-27

1083

可以把网页打包app的软件和网站有很多，今天要推荐的是国产的一款轻巧、极速 10M的绿色发行包。 C++架构，启动速度、大文档打开速度、编码提示，都极速响应。强大的语法提示一流的ast语法分析能力，语法提示精准、全面、细致，转到定义、重构完善。专为vue打造提供比其他工具更优秀的vue支持大幅提升你的vue开发效率。清爽护眼界面清爽简洁，绿柔主题经过科学的脑疲劳测试，最适合人眼长期观看的主...

hbuilderx打包h5APP

07-28

HbuilderX是一个用于开发多种应用的集成开发环境，包括H5应用。要使用HbuilderX打包H5 APP，可以按照以下步骤进行操作： 1. 下载并安装HbuilderX。 2. 在HbuilderX中新建一个项目，选择项目类型为H5 APP。 3. 选择项目的本地存放地址，并填写项目名称，然后点击创建。 4. 打开刚创建的项目，在项目文件中找到manifest.json文件。 5. 在manifest.json文件中填写你的H5项目地址。 6. 进行基本配置，根据你的需求进行设置。 7. 在SDK配置中，可以配置项目的appid、key和其他相关配置，比如定位功能的配置。 8. 填写完所有配置后，点击发行，选择云打包。 9. 等待云打包完成，HbuilderX会给出一个下载链接。 10. 点击下载链接，下载生成的安装包。 11. 将安装包安装到手机上，即可打开H5 APP。以上是使用HbuilderX打包H5 APP的简要步骤，具体的操作细节可以参考HbuilderX的官方文档或者相关教程。 #### 引用[.reference_title] - *1* [hBuilderX将小程序打包成h5](https://blog.csdn.net/weixin_33974433/article/details/91454803)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [HbuilderX打包app，Hbuilder怎么打包app，H5打包成app，H5怎么打包成app](https://blog.csdn.net/LIUAWEIO/article/details/88719446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [HBuilderX H5 app打包以及加入个推](https://blog.csdn.net/zwx19921215/article/details/102918090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]