将web项目打包成apk（基于HBuilder）

一、前言

由于开发原生应用的成本太高，所以有很多应用直接是H5代码套壳而成，这里我们主要讲解下用HBuilderX将H5简单的打包成android的apk方法。

image.png

二、打包流程

1、工具介绍

可以到官网下载工具HBuilder下载地址,此工具主要用来前端开发，但是提供了很简单的web项目打包方法，所以我们选择了他。

2、新建项目

新建项目

项目信息配置

项目信息配置

3、项目详情

• 3.1、基础配置

  • 只要需要配置的是manifest.json里的信息
  • AppID 尽量不要更改，官方页建议不要更改，具体原因可点击使用说明查看
  • 应用名称：改成自己想要的应用名称即可
  • 版本名称：在升级版本时记得调整版本名称

  • 入口地址：想加载的web项目入口地址

    
    
    基础配置

• 3.2、 图标配置
  按图中选中1024x1024大小的logo，然后选择自动生成，会生成所有尺寸的图标

图标配置

• 3.3 、启动图配置
  根据图中尺寸配置相应大小的启动图即可

启动图配置

• 3.4、SDK配置，模块权限配置
  如果web项目有用到对应的三方SDK，根据提示配置即可
  权限也是，如果有需要就配置，没有需要可以先不配置

  
  
  SDK配置

• 3.5、其他设置

  • targetSdkVerson 这个值有些应用市场会有要求，像百度市场要求
    最小为26，故此处我们设置为26。

    
    
    image.png

• 3.6、源码视图
  我们上面配置的信息都可以在源码视图中看到，当然你也可以在源码视图中直接更改这些配置信息

  
  
  image.png

4、打包

选择 发行->原生App-云打包

image.png

• 选择公用证书，更改成自己想要的包名，打包 即可

• 渠道打包可以自己摸索下，没有尝试这一块

  
  
  image.png

• 点击打包后， 可以在控制台看到打包状态，打包成功后就会看到（图-成功）界面的信息。

• 点击链接即可下载到打包好的apk，可以将apk直接安装，也可放到蒲公英、fir等三方平台。

• 如果等待时间过长，也可以通过发行->原生App-查看云打包状态 查看打包状态。
  

  打包
  
  
  成功

三、总结

通过上面的操作，一个简单的app制作完成，但是有下面几点需要说明下。

• 1、这样打包出来的app返回键是返回上一界面的，顶部还会有个控制栏，样式什么的可以在sitemap.json中适当更改，具体的可查看代码。
• 2、包名尽量自定义下，像上面的com.baidu.demo,因为自动生成的包名根据配置的url生成的，如果两个域名一样的web应用，会造成两个应用的包名相同。
• 3、未尽事宜，待补充...

觉得不错给个赞吧❤️