201705 更新：建议用成熟的Phonegap打包，参见：PhoneGap Hybrid APP 开发实战(1)：第一个 Android APK
Vue是前端快速开发框架，Javascript+手机UI，就可以迅速开发网页应用（WebApp）
一般情况下，作为演示网站、微信后台等等，也够用了
Weex作为一次开发，三端可用（Web、安卓、IOS），应该不错，不过现在还没正式版
偶尔碰到HBuilder这个国人工具，能直接将WebApp（HTML+CSS+javascript），打包成原生安卓App，那就试试吧
Web应用打包成手机App，重点考查：
- 流畅程度
- 功能完善度
- 开发便捷度
- 。。。
步骤如下：
- 开发Vue WebApp
- HBuilder引入第一步的WebApp
- 真机调试
- 打包成原生App
- App安装到手机
1. 开发Vue WebApp
引入一个最近比较火的：Vue+Muse-UI写的《高仿网易云音乐》
作者Github: https://github.com/javaSwing/NeteaseCloudWebApp
netEaseMusic.png
- git clone https://github.com/javaSwing/NeteaseCloudWebApp.git
- npm run build (有个Eslint错误，请自行修改一下\NeteaseCloudWebApp\src\views\playerDetail.vue:125行，多一个空格)
- 产生
dist/目录（内含index.html和static/目录）
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
网友评论