Vue开发WebApp快速转为原生手机App?试水HBuilder打包

201705 更新:建议用成熟的Phonegap打包,参见:PhoneGap Hybrid APP 开发实战(1):第一个 Android APK

Vue是前端快速开发框架,Javascript+手机UI,就可以迅速开发网页应用(WebApp)
一般情况下,作为演示网站、微信后台等等,也够用了

Weex作为一次开发,三端可用(Web、安卓、IOS),应该不错,不过现在还没正式版

偶尔碰到HBuilder这个国人工具,能直接将WebApp(HTML+CSS+javascript),打包成原生安卓App,那就试试吧

Web应用打包成手机App,重点考查:

  • 流畅程度
  • 功能完善度
  • 开发便捷度
  • 。。。

步骤如下:

  1. 开发Vue WebApp
  2. HBuilder引入第一步的WebApp
  3. 真机调试
  4. 打包成原生App
  5. App安装到手机

1. 开发Vue WebApp

引入一个最近比较火的:Vue+Muse-UI写的《高仿网易云音乐》
作者Github: https://github.com/javaSwing/NeteaseCloudWebApp

netEaseMusic.png

2. HBuilder引入第一步的WebApp

在HBuilder官网,下载HBuilder http://www.dcloud.io/

  • 创建一个空白模板的移动App
new 移动App
  • 打开第一步build产生的index.html,复制内容到HBuilder里的index.html。
    就是CSS、JS和<div id=app></div>
modify index.png
  • 复制第一个build产生的static/目录,到HBuilder本项目目录下
copy static dir.png
  • 手动修改index.html里,对static的引用。去掉=后的“/”
remove slash.png

另外,在index.html <head></head>之间,加上Material-Icon的引用,这是Muse-UI需要的

    <link href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">

这时,点击一下浏览器预览,应该能正确显示WebApp了:

browser preview

3. 真机调试

这里比较坑,首先,你要安装360手机助手,电脑、手机端都需要!
大家都知道360是啥德性,;(
安装完之后,手机拿USB线连接电脑,360手机助手连接,点击HBuilder的在设备上运行:

傲游截图20170225215102.png

电脑上会提示进度:


傲游截图20170225215125.png

手机上会自动运行这个App:
流畅度不错,虽然现在还是WebApp,感觉跟原生的没啥区别。轮播为啥是空的??还没去研究。。。


236543661.jpg

4. 打包成原生App

到重点了!我们要打包成原生手机App了!

  • HBuilder支持云端和离线打包。我们只是试验,那就选最简单方便的云端打包吧:
    预先要在HBuilder上注册,不然不能打包。
pack
  • 正在上传、正在制作。。。等待1、2分钟
傲游截图20170225215439.png
  • 好了,程序会自动下载apk文件,大小很小,才2.76MB
傲游截图20170225220234.png

5. App安装到手机

二话不说,安装!

手机上出现程序图标(netEaseMusic)了:

1945987746.jpg

迫不及待地打开程序netEaseMusic:
这个打包后的原生App,很流畅,功能基本正常。只是部分布局、间距、大小跟WebApp比,变了一些!!

2136313061.jpg

内存占用还好,80几MB:

1731175586.jpg

结语

此番尝试,证明Vue+UI,快速开发Web应用,然后打包成原生安卓App,是可行的!

当然,这个国产的软件,捆绑了360,我做完试验后,马上清理了。

期待Weex!

《Vue 2.0 起步(7) 大结局:公众号文章抓取 - 微信公众号RSS》
国外这个老牌Codova更正规一点:PhoneGap Hybrid APP 开发实战(1):第一个 Android APK

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • 还以为自己已经有所淡然了, 没想到说出一些话,还是会令眼眶湿润
    小诗鸽阅读 244评论 0 0
  • 今天我去惠东喝一个朋友的喜酒。晚上吃饭,我坐的那一桌全部都是这边本地人,说潮汕话的,我一句话也插不上,也没有听懂在...
    吉日良辰阅读 217评论 0 0
  • 自从师兄发给了号召,让我们这些看完了他的书的人去写点读后感什么的,就一直在心里想着去写点什么。虽然一直都有写日...
    淤怡阅读 569评论 0 3
  • 不喜欢因为节日就必须停止我正在做的事情。。。 德鲁克给吉姆.柯林斯的建议“如果你做了一件不合时宜的事情,就好比你开...
    史慧君阅读 789评论 0 49