天天看點

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 打包說明