微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vue项目 HBuilder X打包H5 APP

一、准备项目

HBuilder X中:新建->项目->5+app,自定义项目名称、保存路径,选择模板“认模板”,创建。删除认模板自己生成的无用的css,img,js,index.html文件夹和文件

将需要打包APP的vue项目,先npm run build,将生成dist文件夹中的static和index.html复制到刚刚新建的5+APP中。

二、APP配置

项目的mainfest.json文件中进行配置APP:

1、基础配置:

应用标识APP ID是登录HBuilder X账号后,自动获取填写;应用入口页面(首页)地址不用更改;其他的按需要更改

2、图标配置:

3、启动界面配置:可以直接用认的通用启动页

4、模块配置:包括蓝牙、通讯录、人脸识别等,按需求自行勾选。注意Push(消息推送)模块,不配置,可能会在打开APP时提示“打包时未添加push模块”,可直接参考官方文档,文章后面也有提到(http://ask.dcloud.net.cn/article/283)。

5、权限配置、APP常用其他设置、源码视图没特殊需要就不用管

三、打包

1、工具栏:发行->原生APP-云打包

2、

参考:https://www.cnblogs.com/taohuaya/p/10263519.html

3、生成证书

  • 官方文档:https://ask.dcloud.net.cn/article/35777
  • 安装JRE环境,找个Java后端帮忙吧,我也不会
  • keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

然后在当前目录下就会生成一个文件:test.keystore

keytool -list -v -keystore test.keystore  //查看证书信息

填入证书信息:

打包时可能报错:“Google开发者证书信息有误,请重新填写相关信息 Android 证书文件不是有效的keystore文件”,参考:https://qinghai.blog.csdn.net/article/details/86595156?spm=1001.2014.3001.5506

(此图中,我是另外生成一个新证书,可以直接运行图中第二个命令,修改已经生成的证书)

至此,打包成功。(打包的时候,控制台可能很长时间都在打印“打包状态  队列中”,等着就行)

安装后,打开APP时提示“打包时未添加push模块”,直接参考官方文档。

其实在打包前,配置mainfest.json的时候,就有Push(消息推送)模块的配置。(配置push的时候,填写的Android包名和云打包时填写的Android包名不一定要相同)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐