把网页打包成app(简单) 2024

文章目录

    • **01-准备好要打包的网页文件,一般包含HTML-CSS-JS-静态资源文件:**
    • **02-下载HBuilderX,注册一个账号-必须****注****册账号****(免费)**
    • **03-新建一个H5+项目:**
    • **04-然后把以下红框里面的这些文件都删掉,只保留一个manifest.json文件:**
    • **05-然后把需要打包的文件全部复制到(我的应用)这个文件里面:
    • **06-点击manifest.json文件,可以设置app的一些东西,例如应用图标,名称,版本号,描述等:**
    • **07-最后点击发行--原生App-云打包,选择如下,点击打包(默认有开屏广告,可以勾掉):**
    • **08-等待完成即可返回.apk文件路径,进入此路径找到apk文件,复制apk文件,通过微信发送到手机,点击安装即可:**


01-准备好要打包的网页文件,一般包含HTML-CSS-JS-静态资源文件:

图片

02-下载HBuilderX,注册一个账号-必须册账号**(免费)**

下载地址:

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

图片

03-新建一个H5+项目:

图片

04-然后把以下红框里面的这些文件都删掉,只保留一个manifest.json文件:

图片

图片

**05-然后把需要打包的文件全部复制到(我的应用)这个文件里面:

**

图片

图片

以上步骤其实就是把原本H5+的html-css文件替换为自己的

06-点击manifest.json文件,可以设置app的一些东西,例如应用图标,名称,版本号,描述等:

图片

图片

支持的cpu类型,这里最好都选上,毕竟手机类型很多:

图片

07-最后点击发行–原生App-云打包,选择如下,点击打包(默认有开屏广告,可以勾掉):

图片

08-等待完成即可返回.apk文件路径,进入此路径找到apk文件,复制apk文件,通过微信发送到手机,点击安装即可:

图片

生成的apk文件如下图所示:

图片

如果使用例如Vue等框架的项目,由于是框架写的项目,文件很多且很杂,那么我们可以先执行npm run build打包为纯html+css+js这样的文件,然后再按照如上的方式打包即可。如下Vue3项目打包后的文件:

图片

将网页打包为app后,用户可以直接在手机上使用,而不需要打开浏览器并输入网址,提高了用户的便利性和体验。

这种方式打包app,其实就是依赖于H5+项目的manifest.json这个配置文件,再加上HBX编辑器配合完成,可打包的对象就是HTML的网页文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/454689.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年【T电梯修理】报名考试及T电梯修理考试报名

题库来源:安全生产模拟考试一点通公众号小程序 T电梯修理报名考试考前必练!安全生产模拟考试一点通每个月更新T电梯修理考试报名题目及答案!多做几遍,其实通过T电梯修理复审考试很简单。 1、【多选题】TSGT7001-2009《检规(简称)…

C语言内存函数:memcpy、memcat、memmove介绍和模拟实现(实用性高,建议三连收藏)

目录 1.memcpy函数 1.1函数介绍 1.2函数示范使用 1.3函数的模拟实现 1.4补充 2.memmove函数 2.1函数介绍 2.2函数的使用示范 2.3函数的模拟实现 3.memcmp(内存比较函数) 3.1函数介绍 3.2函数的示范使用,有趣的例子 4.函数补充memset(内存…

Pandas教程11:关于pd.DataFrame.shift(1)数据下移的示例用法

---------------pandas数据分析集合--------------- Python教程71:学习Pandas中一维数组Series Python教程74:Pandas中DataFrame数据创建方法及缺失值与重复值处理 Pandas数据化分析,DataFrame行列索引数据的选取,增加&#xff0c…

【RT-DETR有效改进】UNetv2提出的一种SDI多层次特征融合模块(细节高效涨点)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本问给大家带来的改进机制是UNetv2提出的一种多层次特征融合模块(SDI)其是一种用于替换Concat操作的模块,SDI模块的主要思想是通过整合编码器生成的层级特征图来增强图像中的语义信息和细节信息。包括皮肤…

数据库管理-第144期 深入使用EMCC-01(20240204)

数据库管理144期 2024-02-04 数据库管理-第144期 深入使用EMCC-01(20240204)1 用户管理2 配置告警动作3 配置意外事件规则总结 数据库管理-第144期 深入使用EMCC-01(20240204) 作者:胖头鱼的鱼缸(尹海文&am…

redis(6)

文章目录 一、redis clusterRedis Cluster 工作原理Redis cluster 基本架构Redis cluster主从架构Redis Cluster 部署架构说明部署方式介绍 原生命令手动部署原生命令实战案例:利用原生命令手动部署redis cluster 实战案例:基于Redis 5 的redis cluster部…

Matplotlib绘制炫酷柱状图的艺术与技巧【第60篇—python:Matplotlib绘制柱状图】

文章目录 Matplotlib绘制炫酷柱状图的艺术与技巧1. 簇状柱状图2. 堆积柱状图3. 横向柱状图4. 百分比柱状图5. 3D柱状图6. 堆积横向柱状图7. 多系列百分比柱状图8. 3D堆积柱状图9. 带有误差线的柱状图10. 分组百分比柱状图11. 水平堆积柱状图12. 多面板柱状图13. 自定义颜色和样…

2024.2.5日总结(小程序开发2)

小程序的宿主环境 宿主环境 宿主环境指的是程序运行所必须的依赖环境。 Android系统和iOS系统是两个不同的宿主环境。安卓版的微信App不能再iOS环境下运行。Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有意义的。 小程序的宿主环境 手机微信是小程序…

vue全家桶之状态管理Pinia

一、Pinia和Vuex的对比 1.什么是Pinia呢? Pinia(发音为/piːnjʌ/,如英语中的“peenya”)是最接近pia(西班牙语中的菠萝)的词; Pinia开始于大概2019年,最初是作为一个实验为Vue重新…

【ArcGIS微课1000例】0102:面状要素空洞填充

文章目录 一、实验描述二、实验数据三、实验步骤1. 手动补全空洞2. 批量补全空洞四、注意事项一、实验描述 在对地理数据进行编辑时,时常会遇到面数据中存在个别或大量的空洞,考虑实际情况中空洞的数量多少、分布情况,填充空洞区域可以采用逐个填充的方式,也可以采用快速大…

【Django开发】美多商城项目第3篇:用户注册和图片验证码开发(附代码,文档已分享)

本系列文章md笔记(已分享)主要讨论django商城项目开发相关知识。本项目利用Django框架开发一套前后端不分离的商城项目(4.0版本)含代码和文档。功能包括前后端不分离,方便SEO。采用Django Jinja2模板引擎 Vue.js实现…

构建高效直播美颜系统:美颜SDK集成与性能优化指南

如今,美颜技术的广泛应用成为各类直播平台的标配之一。今天,小编将与大家进一步讨论如何构建高效的直播美颜系统,重点关注美颜SDK的集成和性能优化方面。 一、美颜SDK的选择与集成 选择合适的美颜SDK是构建高效直播美颜系统的第一步。不同的…