201705 更新:建議用成熟的Phonegap打包心傀,參見:PhoneGap Hybrid APP 開發(fā)實(shí)戰(zhàn)(1):第一個(gè) Android APK
Vue是前端快速開發(fā)框架恼琼,Javascript+手機(jī)UI妨蛹,就可以迅速開發(fā)網(wǎng)頁(yè)應(yīng)用(WebApp)
一般情況下,作為演示網(wǎng)站晴竞、微信后臺(tái)等等蛙卤,也夠用了
Weex作為一次開發(fā),三端可用(Web噩死、安卓颤难、IOS),應(yīng)該不錯(cuò)已维,不過現(xiàn)在還沒正式版
偶爾碰到HBuilder這個(gè)國(guó)人工具行嗤,能直接將WebApp(HTML+CSS+javascript),打包成原生安卓App垛耳,那就試試吧
Web應(yīng)用打包成手機(jī)App栅屏,重點(diǎn)考查:
- 流暢程度
- 功能完善度
- 開發(fā)便捷度
- 。堂鲜。既琴。
步驟如下:
- 開發(fā)Vue WebApp
- HBuilder引入第一步的WebApp
- 真機(jī)調(diào)試
- 打包成原生App
- App安裝到手機(jī)
1. 開發(fā)Vue WebApp
引入一個(gè)最近比較火的:Vue+Muse-UI寫的《高仿網(wǎng)易云音樂》
作者Github: https://github.com/javaSwing/NeteaseCloudWebApp
- git clone https://github.com/javaSwing/NeteaseCloudWebApp.git
- npm run build (有個(gè)Eslint錯(cuò)誤,請(qǐng)自行修改一下\NeteaseCloudWebApp\src\views\playerDetail.vue:125行泡嘴,多一個(gè)空格)
- 產(chǎn)生
dist/
目錄(內(nèi)含index.html和static/目錄)
2. HBuilder引入第一步的WebApp
在HBuilder官網(wǎng)甫恩,下載HBuilder http://www.dcloud.io/
- 創(chuàng)建一個(gè)空白模板的移動(dòng)App
- 打開第一步build產(chǎn)生的
index.html
,復(fù)制內(nèi)容到HBuilder里的index.html酌予。
就是CSS磺箕、JS和<div id=app></div>
- 復(fù)制第一個(gè)build產(chǎn)生的
static/
目錄,到HBuilder本項(xiàng)目目錄下
- 手動(dòng)修改index.html里抛虫,對(duì)static的引用松靡。去掉=后的“/”
另外,在index.html <head></head>之間建椰,加上Material-Icon的引用雕欺,這是Muse-UI需要的
<link rel="stylesheet">
這時(shí),點(diǎn)擊一下瀏覽器預(yù)覽棉姐,應(yīng)該能正確顯示W(wǎng)ebApp了:
3. 真機(jī)調(diào)試
這里比較坑屠列,首先,你要安裝360手機(jī)助手伞矩,電腦笛洛、手機(jī)端都需要!
大家都知道360是啥德性乃坤,;(
安裝完之后苛让,手機(jī)拿USB線連接電腦沟蔑,360手機(jī)助手連接,點(diǎn)擊HBuilder的在設(shè)備上運(yùn)行:
電腦上會(huì)提示進(jìn)度:
手機(jī)上會(huì)自動(dòng)運(yùn)行這個(gè)App:
流暢度不錯(cuò)狱杰,雖然現(xiàn)在還是WebApp瘦材,感覺跟原生的沒啥區(qū)別。輪播為啥是空的仿畸?食棕?還沒去研究。颁湖。宣蠕。
4. 打包成原生App
到重點(diǎn)了!我們要打包成原生手機(jī)App了甥捺!
- HBuilder支持云端和離線打包抢蚀。我們只是試驗(yàn),那就選最簡(jiǎn)單方便的云端打包吧:
預(yù)先要在HBuilder上注冊(cè)镰禾,不然不能打包皿曲。
- 正在上傳、正在制作吴侦。屋休。。等待1备韧、2分鐘
- 好了劫樟,程序會(huì)自動(dòng)下載apk文件,大小很小织堂,才2.76MB
5. App安裝到手機(jī)
二話不說(shuō)叠艳,安裝!
手機(jī)上出現(xiàn)程序圖標(biāo)(netEaseMusic)了:
迫不及待地打開程序netEaseMusic:
這個(gè)打包后的原生App易阳,很流暢附较,功能基本正常。只是部分布局潦俺、間距拒课、大小跟WebApp比,變了一些J率尽早像!
內(nèi)存占用還好,80幾MB:
結(jié)語(yǔ)
此番嘗試很魂,證明Vue+UI扎酷,快速開發(fā)Web應(yīng)用,然后打包成原生安卓App遏匆,是可行的法挨!
當(dāng)然,這個(gè)國(guó)產(chǎn)的軟件幅聘,捆綁了360凡纳,我做完試驗(yàn)后,馬上清理了帝蒿。
期待Weex荐糜!
《Vue 2.0 起步(7) 大結(jié)局:公眾號(hào)文章抓取 - 微信公眾號(hào)RSS》
國(guó)外這個(gè)老牌Codova更正規(guī)一點(diǎn):PhoneGap Hybrid APP 開發(fā)實(shí)戰(zhàn)(1):第一個(gè) Android APK