天天看点

H5+app 打包说明

参考官网打包说明:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13425

H5+app 打包说明

第一步:下载HbuilderX工具(https://www.dcloud.io/hbuilderx.html)傻瓜式安装,安装完成注册账号

H5+app 打包说明

第二步:创建项目,点击“文件”—> “新建”—>“项目”(截图截不出来)

H5+app 打包说明

出现如图界面:

H5+app 打包说明

第三步:选择 5+APP(A),填上“项目名称”其他默认 ,点击“创建”

H5+app 打包说明

之后效果图:

H5+app 打包说明

第四步:点击“manifest.json” 更改你需要更改的“配置”,比如“基础配置”“图标配置”、“启动图配置”等等

图标配置:

H5+app 打包说明
H5+app 打包说明

其他的自己可以看看 不再赘述

**** 打包前需要添加和修改的内容;

  1. 打开index.html 把下面的代码放进去 或者 是把我发给你的index.html 直接替换掉再进行修改(即2的步骤)
H5+app 打包说明
  1. 其次修改加的代码的最后一行即plus.webview.open("http://122.224.121.35:8895"), 把自己配置的项目访问链接 即需要打包的链接修改掉就可以
H5+app 打包说明
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
		var plusReady = function (callback) {
			if (window.plus) {
				callback();
			} else {
				document.addEventListener('plusready', callback);
			}
		};

		plusReady(function () {
			var firstBack = 0;
			var handleBack = function () {
				var currentWebview = plus.webview.currentWebview();
				var topWebview = plus.webview.getTopWebview();
				var now = Date.now || function () {
					return new Date().getTime();
				};

				currentWebview.canBack(function (evt) {
					/**  
					 * 有可后退的历史记录,则后退。  
					 * 否则,关闭当前窗口。  
					 * 如果当前窗口是入口页,那么执行退出的逻辑。  
					 */  
					if (currentWebview.id === plus.runtime.appid) {  
						if (!firstBack) {
							firstBack = now();
							plus.nativeUI.toast('再按一次退出应用');

							setTimeout(function () {  
								firstBack = 0;
							}, 2000);
						} else if (now() - firstBack < 2000) {
							plus.runtime.quit();
						}
					} else {
						if (evt.canBack) {
							history.back();
						} else {
							currentWebview.close('auto');
						}
					}
				});
			};

			plus.key.addEventListener('backbutton', handleBack);
			plus.webview.open("http://122.224.121.35:8895")
		});
    </script>
</head>
<body>
	
</body>
</html>
           

第五步:选中项目文件夹鼠标右键“发行”或者 点击 菜单栏里的“发行”

H5+app 打包说明

之后选中“原生App-云打包(P)” (截图截不出来)

出现效果

H5+app 打包说明

说明:看图

H5+app 打包说明
  1. 使用自有证书(建议):

生成证书教程:https://ask.dcloud.net.cn/article/35777

证书生成之后,再次进入如下图界面:填上“证书别名”“证书私钥密码”“证书文件” 再打包

  1. 使用公共测试证书
H5+app 打包说明
H5+app 打包说明
H5+app 打包说明

打包成功: 根据提示,复制下载地址 进行下载即可

H5+app 打包说明