在使用vue寫(xiě)一些移動(dòng)端(安卓端)網(wǎng)頁(yè)的時(shí)候 總感覺(jué)在用戶體驗(yàn)方面不太好拂酣,原因有幾點(diǎn)赎线,
1.首先在用戶需要訪問(wèn)的時(shí)候必須去輸入框填寫(xiě)你URL地址职辨,像一些內(nèi)部用的系統(tǒng)一般 網(wǎng)站名也不太容易記蜜宪,而且不想PC端的瀏覽器 方便輸入豹储。
總之就是懶的去輸入桃漾,程序員的通病嘛 就是能用簡(jiǎn)單的絕不搞復(fù)雜的坏匪,那就廢話不多說(shuō)了,現(xiàn)在使用vue 寫(xiě)頁(yè)面越來(lái)越廣泛撬统,如果在找工作的時(shí)候說(shuō)自己不會(huì)vue,甚至不知道vue 是什么的? 那就真的是讓人笑掉大牙了适滓。
其實(shí)為什么使用的人這么多,當(dāng)然是有優(yōu)點(diǎn)的了恋追,首先在通過(guò)vue項(xiàng)目打包成 APP 然后進(jìn)行使用? 不乏也是一種樂(lè)趣凭迹,也解決掉了一些常見(jiàn)的手機(jī)端頁(yè)面的問(wèn)題,而且他的學(xué)習(xí)成本低簡(jiǎn)單易學(xué)苦囱。下面就讓我們進(jìn)入正題嗅绸。
1.首先你要準(zhǔn)備一個(gè)vue的項(xiàng)目? 然后進(jìn)行配置? 找到目錄 config-->index.js里面的 build:下的 assetsPublicPath="/"? 修改為
assetsPublicPath="./" 然后進(jìn)行打包? npm run build
他會(huì)生成一個(gè) dist目錄? ?準(zhǔn)備好以后備用
?
2.打開(kāi)HBuilderX? 新建一個(gè)項(xiàng)目? 選擇5+APP? 起一個(gè)項(xiàng)目名稱(chēng)點(diǎn)擊創(chuàng)建
?
3.這時(shí)候你會(huì)看到你的項(xiàng)目上有一個(gè)5+的符號(hào)如:
?
4.將vue 打好包的項(xiàng)目復(fù)制到該項(xiàng)目下 將剛創(chuàng)建好的項(xiàng)目下的index.html 替換掉 效果如下
?
5.可以將 沒(méi)用的文件刪掉 如下:
?
6.點(diǎn)擊manifest.json? 可以配置一下基本
?
?
?
打開(kāi)源碼視圖,在 plus 下 添加一個(gè)json代碼
"statusbar" : {
//應(yīng)用可視區(qū)域到系統(tǒng)狀態(tài)欄下透明顯示效果
"immersed" : true
},
?
7.現(xiàn)在就是打包了點(diǎn)擊發(fā)行后會(huì)有一個(gè)原生APP云打包
?
8.出現(xiàn)APP云端打包配置 直接使用 Android? 使用 DCloud公用證書(shū)撕彤,可以把廣告去掉:如圖
?
9.坐等打包完成 打包完成需要時(shí)間鱼鸠,請(qǐng)耐心等候,打包完成后會(huì)給你生成一個(gè)下載地址羹铅,要注意這個(gè)下載地址是有5次限制的
請(qǐng)先下載完成后保存下來(lái)安裝包蚀狰,可以上傳到服務(wù)器上,日后可以無(wú)限制下載了职员。
??
?
以上就是整個(gè)的操作教程麻蹋,簡(jiǎn)單易學(xué),方便快捷 你值得擁有焊切,如果對(duì)這個(gè)小教程還感興趣扮授,或者有不懂地方歡迎點(diǎn)贊和留言