H5项目如何打包成APP

2024-05-09 06:07:47

开发uni-app的编辑器HBuilderX可以将H5项目打包成APP，相信很多小伙伴还不知道这个功能。下面将介绍下如何将H5打包成APP。

HBuilderX下载链接：https://www.dcloud.io/hbuilderx.html

1.新建5+APP项目

选择文件>新建>项目，新建5+APP项目，选择默认模板即可，填入项目名称和地址后，点击创建即可。

2.删除不需要的文件

将除了 manifest.json 外的所有文件删除，其实这些就是H5文件，我们肯定要用自己的

3.将H5打包的文件拷贝到当前目录下

即 npm run build 将我们的项目打包生成的dist文件下的所有文件拷贝过来。

4.配置APP

点击 manifest.json 文件，这里我们可以配置应用标识、应用名称、图标配置等等，可以按自己的需求来一一配置。

5.发行-云打包

由于是自己调试，可以选择公共测试证书，然后点击打包即可。注意，第一次打包还需要实名认证账号，在DCloud官网认证登陆认证下即可。

6.安装apk

打包预计2-5分钟，打开本地目录即可找到对应的apk，发送到手机上安装即可。

ok，安卓的APK大工告成。虽然不太懂其中的原理，我估计是安卓原生壳子加个WebView实现的。

由于IOS的不能使用公共证书，只能去申请证书，所以这里也不演示了。

H5项目如何打包成APP相关推荐

【Uniapp框架】快速开发自己一款APP应用，如何将Uniapp项目快速打包成APP应用
当我们使用uniapp框架开发应用,前端与后端的代码都准备OK! 最关键的一步就是开始打包我们的应用产品,最常见的形式:小程序.安卓App.苹果App. 今天我们来详细了解一下安卓App应用的快速打包 ...
vue前后端分离项目打包成app,部署成移动端
将vue项目打包成app,在手机上运行. 1. vue打包 npm run build 先将vue的前端项目打包成dist文件夹 2. 安装hbuilderX Hbuilder官网地址 3. hbui ...
vue项目使用hbuildX打包成app
一.打包 1.在vue.config,js中加入 publicPath: './', 配置,防止打包后产生空白页 2.在axios.js中的默认服务器配置直接写服务器名称,在router里面配置路由模 ...
前端项目如何打包成手机app？
前端项目如何打包成手机app 阐述难点及解决方式具体使用步骤创建5+app空项目删除5+app默认的项目结构移动并进行基础设置发行及云打包查看及下载阐述前端是做什么的?写网页的?不, ...
将H5站点打包成app完美攻略
文章目录整理说明 HBuilder介绍打包方法问题解决参考臭味相投的朋友们,我在这里: 猿in小站:http://www.yuanin.net csdn博客:https://blog.csd ...
H5打包成app源码
H5打包成app源码 H5如何打包成app,这个不难,只要在源码里修改一下地址就可以了. 修改MainActivity文件的url更换网址 //加载的网页 private String url =&q ...
将Html网页或者是Aue项目打包成App
把前端的网页打包成App 一. 前言首先,在学前端的时候,我们接触到了Html,css,js,你只需要有这些,即可打包成一个App,当然肯定需要一些打包的软件,然后你如果学习到了Vue框架,用脚 ...
知识付费系统源码，可直接打包成app、H5、小程序
知识付费,在近几年来,越来越受到大家的关注.知识付费系统源码是将知识通过互联网渠道变现的方式.以知识为载体,通过付费获得在线知识以及在线学习所带来的收益.知识付费平台主要以分享知识内容,内容分为直播. ...
vue项目打包成app，在ios端iconfont 部分字体图标不显示
最近在用vue结合capacitor 写app的项目,痛苦真痛苦. 在xcode上打包成app之后,发现有些字体图片怎么改都显示不出来. 解决办法: 把引用的css url 加上https

最新文章

热门文章