用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目

场景

vue写好了H5 app项目,现在想要把这个项目打包成App,也就是将vue项目打包成app上架,测试。

用Hbuild 打包vue项目主要步骤

  1. 打开hbuildx,新建一个5+App项目
  2. 然后修改项目中生成的index.html文件内容,填写需要访问的网址,填写测试连接就是打包测试包,也可以打包发布包
  3. 根据项目修改manifest.js 的文件配置
  4. 以上配置好之后,原生APP云打包,就可以生成Android或是iOS安装包

详细步骤图文讲解

  1. 首先打开Hbuildx(如没有安装的话先下载安装: 下载地址)
    使用Hbuildx 打包APP。在Hbuildx里面创建一个新项目,按以下要求创建好项目。
    用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第1张图片
    新建一个5+App项目,保持默认模板,可自定义名称和路径用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第2张图片
    成功创建之后的项目结构
    用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第3张图片
  2. 修改index.html的内容, 内容如下,可参照我的内容改写一下(这个方法是在App里面打开一个已经自定义链接,以App的方式打开),访问网址可以根据实际的项目进行修改。
    打包项目已上传到github下载打包项目(包含错误页面和设置网络页面及功能)
    用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第4张图片
    代码如下:

<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" />
	
	<meta http-equiv="expires" content="0"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="Cache-Control" content="no-cache"/>
    <title>hometitle>
	<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>
  1. 接下来就是配置manifest.json ,内部的配置讲解

基础配置
保持默认即可
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第5张图片

图标配置
保持默认即可,也可自行配置,默认是hbuild的图标
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第6张图片

启动图设置
默认即可,一般项目中是不勾选启动图显示等待雪花的选项的
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第7张图片

SDK配置(根据项目选填)
如果勾选了支付或者是分享的话, 通用链接(Universal Link)就是必填的了,如果没有涉及到支付和分享,就是不用填写

关于通用链接配置 怎么配置ios 通用链接(Universal Link)
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第8张图片
模块权限配置
默认即可
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第9张图片
App常用其他设置(可配置404显示文件)选填
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第10张图片
4. 完成以上配置就可以云打包App
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第11张图片
打包ios安装包,需要ios证书,在ios开发者平台申请一个账号并付费,即可申请证书,一般用Android做测试包即可

以下是Android
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第12张图片
以下是ios
证书文件都必须填
用HbuildX打包vue 项目为App,打包app 可嵌套访问vue项目_第13张图片
以上,在打包完成之后就可以下载安装包了,Android的安装包直接下载到手机即可安装
ios 的安装包,如果不是上传到app store 的话,都需要用 xcode协助安装测试包
打包好之后
打包成功
点击控制台的链接就可以下载了安装了

你可能感兴趣的:(hbuildx,app开发)