Vue开发WebApp快速转为原生手机App?试水HBuilder打包 | vue手機開發
201705更新:建议用成熟的Phonegap打包,参见:PhoneGapHybridAPP开发实战(1):第一个AndroidAPK[1]Vue是前端快速开发框架,Javascript+手机UI,就可以迅速开发网页应用(WebApp)一般情况下,作为演示网站、微信后台等等,也够用了Weex作为一次开发,三端可用(Web、安卓、IOS),应该不错,不过现在还没正式版偶尔碰到HBuilder这个国人工具,能直接将WebApp(HTML+CSS+javascript),打包成原生安卓App,那就试试吧Web应用打包成手机App,重点考查:流畅程度功能完善度开发便捷度。。。步骤如下:开发VueWebAppHBuilder引入第一步的...
201705 更新:建议用成熟的Phonegap打包,参见:PhoneGap Hybrid APP 开发实战(1):第一个 Android APK[1]
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[2]
netEaseMusic.png
2. HBuilder引入第一步的WebApp在HBuilder官网,下载HBuilder http://www.dcloud.io/[3]
创建一个空白模板的移动Appnew 移动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的引...