新手用HbuildX打包vue 项目为App 可嵌套访问vue项目
程序员文章站
2024-01-24 18:27:22
...
场景
用vue写好了H5 app项目，现在想要把这个项目打包成App，也就是将vue项目打包成app上架，测试。
用Hbuild 打包vue项目主要步骤
- 打开
hbuildx，新建一个5+App项目 - 然后修改项目中生成的
index.html文件内容，填写需要访问的网址，填写测试连接就是打包测试包，也可以打包发布包 - 根据项目修改
manifest.js的文件配置 - 以上配置好之后，原生
APP云打包，就可以生成Android或是iOS安装包
详细步骤图文讲解
- 首先打开
Hbuildx（如没有安装的话先下载安装： 下载地址）
使用Hbuildx打包APP。在Hbuildx里面创建一个新项目，按以下要求创建好项目。
新建一个5+App项目，保持默认模板，可自定义名称和路径
成功创建之后的项目结构 - 修改
index.html的内容， 内容如下，可参照我的内容改写一下（这个方法是在App里面打开一个已经自定义链接，以App的方式打开），访问网址可以根据实际的项目进行修改。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--viewport 属性，它用于移动端显示优化的 -->
<meta http-equiv="expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<title>home</title>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
mui.plusReady(function() {
plus.webview.prefetchURL('http://172.168.88.19:8080');
plus.cache.clear(function(){
var page = plus.webview.create('http://172.168.88.19:8080', 'home', {
top: '0px',
bottom: '0px',
kernel: 'WKWebview',
scrollIndicator: 'none',
errorPage: 'error.html'
});
plus.webview.currentWebview().append(page);
})
})
</script>
</head>
<body></body>
</html>
- 接下来就是配置
manifest.json，内部的配置讲解
基础配置
保持默认即可
图标配置
保持默认即可，也可自行配置，默认是hbuild的图标
启动图设置
默认即可，一般项目中是不勾选启动图显示等待雪花的选项的
SDK配置（根据项目选填）
如果勾选了支付或者是分享的话， 通用链接（Universal Link）就是必填的了，如果没有涉及到支付和分享，就是不用填写
关于通用链接配置 怎么配置ios 通用链接（Universal Link）
模块权限配置
默认即可
App常用其他设置（可配置404显示文件）选填
4. 完成以上配置就可以云打包App了
打包ios安装包，需要ios证书，在ios开发者平台申请一个账号并付费，即可申请证书，一般用Android做测试包即可
以下是Android包
以下是ios 包
证书文件都必须填
以上，在打包完成之后就可以下载安装包了，Android的安装包直接下载到手机即可安装
ios 的安装包，如果不是上传到app store 的话，都需要用 xcode协助安装测试包
打包好之后
点击控制台的链接就可以下载了
上一篇： java入门小程序