app vue 真机运行_Vue开发WebApp快速转为原生手机App？试水HBuilder打包

Vue是前端快速开发框架，Javascript+手机UI，就可以迅速开发网页应用(WebApp)

一般情况下，作为演示网站、微信后台等等，也够用了

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

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

Web应用打包成手机App，重点考查：

流畅程度

功能完善度

开发便捷度

。。。

步骤如下：

开发Vue WebApp

HBuilder引入第一步的WebApp

真机调试

打包成原生App

App安装到手机

1. 开发Vue WebApp

netEaseMusic.png

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和

modify index.png

复制第一个build产生的static/目录，到HBuilder本项目目录下

copy static dir.png

手动修改index.html里，对static的引用。去掉=后的“/”

remove slash.png

另外，在index.html

之间，加上Material-Icon的引用，这是Muse-UI需要的

这时，点击一下浏览器预览，应该能正确显示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！