用HBuilderX 打包 vue 專案 為 App 的步驟
阿新 • • 發佈:2019-01-13
首先打包你的 vue 專案 生成 dist 資料夾,教程請移步 https://www.cnblogs.com/taohuaya/p/10256670.html
看完上面的教程,請確保 你是 將:
專案目錄下的config
資料夾裡的index.js
檔案中,將build
物件下的assetsPublicPath
中的“/”
,改為“./”後,打包生成的 dist 檔案。
開始使用 HBuiderX 打包。(工具下載地址:http://www.dcloud.io/)
這是我vue 專案打包後的dist 檔案。
設定沉浸狀態列:(什麼是沉浸狀態列和設定方法 請移步: http://ask.dcloud.net.cn/article/32 地址裡的 http://ask.dcloud.net.cn/article/1150)
上圖中新增位置的程式碼:
"statusbar": { //應用可視區域到系統狀態列下透明顯示效果 "immersed": true },
解決打包成App後,單擊 手機返回鍵退出應用的bug。(可以直接把這段程式碼放到你vue專案中,重新打包,再放回來,也可以直接修改這個index.html)
上圖中的程式碼:
<script type="text/javascript"> //如下程式碼主要是解決, 打包後的app點選返回鍵直接退出的bug. /* 自己寫的 toast 提示框 */ //下面用的是調的 Android 自身的 toast方法。 我把我自己寫的toast 註釋掉 /* let flag = false; function toast(tip){ if(flag) return; let oDiv = document.createElement('div'); let oBody = document.getElementsByTagName('body')[0]; oDiv.innerText = tip; oDiv.style.background = 'rgba(50, 50, 51, 0.88)'; oDiv.style.color = '#fff'; oDiv.style.textAlign = 'center'; oDiv.style.fontSize = '14px'; oDiv.style.lineHeight = '30px'; oDiv.style.width = '200px'; oDiv.style.borderRadius = '4px'; oDiv.style.position = 'fixed'; oDiv.style.left = '50%'; oDiv.style.transform = 'translateX(-50%)'; oDiv.style.bottom = '100px'; oDiv.style.zIndex = '1000'; oBody.appendChild(oDiv); flag = true; setTimeout(function(){ oBody.removeChild(oDiv); flag = false; },1000); } */ /* 自己寫的 toast 提示框---END--- */ document.addEventListener('plusready', function(a) { //等待plus ready後再呼叫5+ API: //// 在這裡呼叫5+ API var first = null; plus.key.addEventListener('backbutton', function() { //監聽返回鍵 //首次按鍵,提示‘再按一次退出應用’ if (!first) { first = new Date().getTime(); //獲取第一次點選的時間戳 // console.log('再按一次退出應用');//用自定義toast提示最好 // toast('雙擊返回鍵退出應用'); //呼叫自己寫的吐絲提示 函式 plus.nativeUI.toast("雙擊退出", {duration:'short'}); //通過H5+ API 呼叫Android 上的toast 提示框 setTimeout(function() { first = null; }, 1000); } else { if (new Date().getTime() - first < 1000) { //獲取第二次點選的時間戳, 兩次之差 小於 1000ms 說明1s點選了兩次, plus.runtime.quit(); //退出應用 } } }, false); }); </script>
上面這段程式碼:我參考的文章和文件連結:
https://blog.csdn.net/qq_25252769/article/details/76913083
這個是 H5+ API 的(通過js調取Android等平臺的原生方法)學習連結:http://ask.dcloud.net.cn/docs/
至此就基本上完成了,但是還會有一下bug,我時間我再弄。
這裡是我效果圖:
現純的bug 是 進入詳情頁 ,點選返回也只能提示 雙擊退出, 而不是後退一步。