h5项目打包为app

朱雀 2023-10-11 17:25 80阅读 0赞

我们通过Hbuilder进行打包，首先下载Hbuilder，自行下载安装即可，本文不再说明。

## 1.新建项目 ##

文件——>新建——>项目  
![在这里插入图片描述][217cd02defcd471ca689345d742850b2.png_pic_center]

![在这里插入图片描述][524e27c5a2a247b1a1507c0165f85cde.png_pic_center]

生成如下所示的目录结构  
![在这里插入图片描述][58479222063741caa1f9a11d6eb0da25.png_pic_center]

我们将除manifest.json文件之外的其他文件全部删除，也就是说只保留manifest.json  
![在这里插入图片描述][a0d501dc6a094a0d916df75bc27e4962.png_pic_center]

然后将你的h5项目下所有的文件全部复制到该目录  
![在这里插入图片描述][a764026fa49648b3a4826329a9f873f8.png_pic_center]

## 2.修改manifest.json ##

### 2.1 基础配置 ###

![在这里插入图片描述][de57e17c02e34ce5b173bf1ff4541105.png_pic_center]

上面我们看到有一个appid，这个appid来自于哪儿呢，[访问Hbuilder个人配置中心][Hbuilder]  
![在这里插入图片描述][98128b8af36247dea1165cc4160fb2e2.png_pic_center]

再往下我们可以看到一个应用入口，请务必保证你的复制过来的html文件首页命名为 index.html  
![在这里插入图片描述][db706fcb3f914102bd83145757aa7d27.png_pic_center]

### 2.2 图标配置 ###

![在这里插入图片描述][f1e7d51d93454c2184257571f65e6a1b.png_pic_center]

### 2.3 启动界面配置 ###

默认配置就好  
![在这里插入图片描述][2535aa8f09fa4f958a69cf8a374462ff.png_pic_center]

### 2.4 模块配置 ###

请选择一些你的项目必要的权限，可以快速通过申请  
![在这里插入图片描述][e1df9efcc1634c398062516464755064.png_pic_center]

配置完成以上配置即可

## 3.打包 ##

![在这里插入图片描述][1daea13d88b546eba9b5393c54459b78.png_pic_center]

等待打包完成出现下载地址即可  
![在这里插入图片描述][9373c13346194dc3b4bd5590323b5a36.png_pic_center]

安装到手机可以自己测试一下

[217cd02defcd471ca689345d742850b2.png_pic_center]: https://img-blog.csdnimg.cn/217cd02defcd471ca689345d742850b2.png#pic_center
[524e27c5a2a247b1a1507c0165f85cde.png_pic_center]: https://img-blog.csdnimg.cn/524e27c5a2a247b1a1507c0165f85cde.png#pic_center
[58479222063741caa1f9a11d6eb0da25.png_pic_center]: https://img-blog.csdnimg.cn/58479222063741caa1f9a11d6eb0da25.png#pic_center
[a0d501dc6a094a0d916df75bc27e4962.png_pic_center]: https://img-blog.csdnimg.cn/a0d501dc6a094a0d916df75bc27e4962.png#pic_center
[a764026fa49648b3a4826329a9f873f8.png_pic_center]: https://img-blog.csdnimg.cn/a764026fa49648b3a4826329a9f873f8.png#pic_center
[de57e17c02e34ce5b173bf1ff4541105.png_pic_center]: https://img-blog.csdnimg.cn/de57e17c02e34ce5b173bf1ff4541105.png#pic_center
[Hbuilder]: https://dev.dcloud.net.cn/app/index
[98128b8af36247dea1165cc4160fb2e2.png_pic_center]: https://img-blog.csdnimg.cn/98128b8af36247dea1165cc4160fb2e2.png#pic_center
[db706fcb3f914102bd83145757aa7d27.png_pic_center]: https://img-blog.csdnimg.cn/db706fcb3f914102bd83145757aa7d27.png#pic_center
[f1e7d51d93454c2184257571f65e6a1b.png_pic_center]: https://img-blog.csdnimg.cn/f1e7d51d93454c2184257571f65e6a1b.png#pic_center
[2535aa8f09fa4f958a69cf8a374462ff.png_pic_center]: https://img-blog.csdnimg.cn/2535aa8f09fa4f958a69cf8a374462ff.png#pic_center
[e1df9efcc1634c398062516464755064.png_pic_center]: https://img-blog.csdnimg.cn/e1df9efcc1634c398062516464755064.png#pic_center
[1daea13d88b546eba9b5393c54459b78.png_pic_center]: https://img-blog.csdnimg.cn/1daea13d88b546eba9b5393c54459b78.png#pic_center
[9373c13346194dc3b4bd5590323b5a36.png_pic_center]: https://img-blog.csdnimg.cn/9373c13346194dc3b4bd5590323b5a36.png#pic_center