Vue開發(fā)WebApp快速轉(zhuǎn)為原生手機(jī)App秋麸?試水HBuilder打包

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ā)便捷度
  • 。堂鲜。既琴。

步驟如下:

  1. 開發(fā)Vue WebApp
  2. HBuilder引入第一步的WebApp
  3. 真機(jī)調(diào)試
  4. 打包成原生App
  5. App安裝到手機(jī)

1. 開發(fā)Vue WebApp

引入一個(gè)最近比較火的:Vue+Muse-UI寫的《高仿網(wǎng)易云音樂》
作者Github: https://github.com/javaSwing/NeteaseCloudWebApp

netEaseMusic.png
  • 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
new 移動(dòng)App
  • 打開第一步build產(chǎn)生的index.html,復(fù)制內(nèi)容到HBuilder里的index.html酌予。
    就是CSS磺箕、JS和<div id=app></div>
modify index.png
  • 復(fù)制第一個(gè)build產(chǎn)生的static/目錄,到HBuilder本項(xiàng)目目錄下
copy static dir.png
  • 手動(dòng)修改index.html里抛虫,對(duì)static的引用松靡。去掉=后的“/”
remove slash.png

另外,在index.html <head></head>之間建椰,加上Material-Icon的引用雕欺,這是Muse-UI需要的

    <link  rel="stylesheet">

這時(shí),點(diǎn)擊一下瀏覽器預(yù)覽棉姐,應(yīng)該能正確顯示W(wǎng)ebApp了:

browser preview

3. 真機(jī)調(diào)試

這里比較坑屠列,首先,你要安裝360手機(jī)助手伞矩,電腦笛洛、手機(jī)端都需要!
大家都知道360是啥德性乃坤,;(
安裝完之后苛让,手機(jī)拿USB線連接電腦沟蔑,360手機(jī)助手連接,點(diǎn)擊HBuilder的在設(shè)備上運(yùn)行:

傲游截圖20170225215102.png

電腦上會(huì)提示進(jìn)度:


傲游截圖20170225215125.png

手機(jī)上會(huì)自動(dòng)運(yùn)行這個(gè)App:
流暢度不錯(cuò)狱杰,雖然現(xiàn)在還是WebApp瘦材,感覺跟原生的沒啥區(qū)別。輪播為啥是空的仿畸?食棕?還沒去研究。颁湖。宣蠕。


236543661.jpg

4. 打包成原生App

到重點(diǎn)了!我們要打包成原生手機(jī)App了甥捺!

  • HBuilder支持云端和離線打包抢蚀。我們只是試驗(yàn),那就選最簡(jiǎn)單方便的云端打包吧:
    預(yù)先要在HBuilder上注冊(cè)镰禾,不然不能打包皿曲。
pack
  • 正在上傳、正在制作吴侦。屋休。。等待1备韧、2分鐘
傲游截圖20170225215439.png
  • 好了劫樟,程序會(huì)自動(dòng)下載apk文件,大小很小织堂,才2.76MB
傲游截圖20170225220234.png

5. App安裝到手機(jī)

二話不說(shuō)叠艳,安裝!

手機(jī)上出現(xiàn)程序圖標(biāo)(netEaseMusic)了:

1945987746.jpg

迫不及待地打開程序netEaseMusic:
這個(gè)打包后的原生App易阳,很流暢附较,功能基本正常。只是部分布局潦俺、間距拒课、大小跟WebApp比,變了一些J率尽早像!

2136313061.jpg

內(nèi)存占用還好,80幾MB:

1731175586.jpg

結(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市葛超,隨后出現(xiàn)的幾起案子暴氏,更是在濱河造成了極大的恐慌,老刑警劉巖绣张,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件答渔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡侥涵,警方通過查閱死者的電腦和手機(jī)沼撕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)芜飘,“玉大人务豺,你說(shuō)我怎么就攤上這事∴旅鳎” “怎么了笼沥?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)娶牌。 經(jīng)常有香客問我奔浅,道長(zhǎng),這世上最難降的妖魔是什么裙戏? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任乘凸,我火速辦了婚禮,結(jié)果婚禮上累榜,老公的妹妹穿的比我還像新娘营勤。我一直安慰自己,他們只是感情好壹罚,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布葛作。 她就那樣靜靜地躺著,像睡著了一般猖凛。 火紅的嫁衣襯著肌膚如雪赂蠢。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天辨泳,我揣著相機(jī)與錄音虱岂,去河邊找鬼玖院。 笑死,一個(gè)胖子當(dāng)著我的面吹牛第岖,可吹牛的內(nèi)容都是我干的难菌。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼蔑滓,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼郊酒!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起键袱,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤燎窘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后蹄咖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體褐健,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年比藻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了铝量。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡银亲,死狀恐怖慢叨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情务蝠,我是刑警寧澤拍谐,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站馏段,受9級(jí)特大地震影響轩拨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜院喜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一亡蓉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧喷舀,春花似錦砍濒、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至拿愧,卻和暖如春杠河,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工券敌, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留唾戚,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓陪白,卻偏偏與公主長(zhǎng)得像颈走,于是被迫代替她去往敵國(guó)和親膳灶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子咱士,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 還以為自己已經(jīng)有所淡然了, 沒想到說(shuō)出一些話轧钓,還是會(huì)令眼眶濕潤(rùn)
    小詩(shī)鴿閱讀 248評(píng)論 0 0
  • 今天我去惠東喝一個(gè)朋友的喜酒序厉。晚上吃飯,我坐的那一桌全部都是這邊本地人毕箍,說(shuō)潮汕話的弛房,我一句話也插不上,也沒有聽懂在...
    吉日良辰閱讀 223評(píng)論 0 0
  • 自從師兄發(fā)給了號(hào)召而柑,讓我們這些看完了他的書的人去寫點(diǎn)讀后感什么的文捶,就一直在心里想著去寫點(diǎn)什么。雖然一直都有寫日...
    淤怡閱讀 571評(píng)論 0 3
  • 不喜歡因?yàn)楣?jié)日就必須停止我正在做的事情媒咳。粹排。。 德魯克給吉姆.柯林斯的建議“如果你做了一件不合時(shí)宜的事情涩澡,就好比你開...
    史慧君閱讀 794評(píng)論 0 49