在使用vue写一些移动端(安卓端)网页的时候 总感觉在用户体验方面不太好,原因有几点,
1.首先在用户需要访问的时候必须去输入框填写你URL地址,像一些内部用的系统一般 网站名也不太容易记,而且不想PC端的浏览器 方便输入。
总之就是懒的去输入,程序员的通病嘛 就是能用简单的绝不搞复杂的,那就废话不多说了,现在使用vue 写页面越来越广泛,如果在找工作的时候说自己不会vue,甚至不知道vue 是什么的 那就真的是让人笑掉大牙了。
其实为什么使用的人这么多,当然是有优点的了,首先在通过vue项目打包成 APP 然后进行使用 不乏也是一种乐趣,也解决掉了一些常见的手机端页面的问题,而且他的学习成本低简单易学。下面就让我们进入正题。
1.首先你要准备一个vue的项目 然后进行配置 找到目录 config-->index.js里面的 build:下的 assetsPublicPath="/" 修改为
assetsPublicPath="./" 然后进行打包 npm run build
他会生成一个 dist目录 准备好以后备用
2.打开HBuilderX 新建一个项目 选择5+APP 起一个项目名称点击创建
3.这时候你会看到你的项目上有一个5+的符号如:
4.将vue 打好包的项目复制到该项目下 将刚创建好的项目下的index.html 替换掉 效果如下
5.可以将 没用的文件删掉 如下:
6.点击manifest.json 可以配置一下基本
打开源码视图,在 plus 下 添加一个json代码
"statusbar" : {
//应用可视区域到系统状态栏下透明显示效果
"immersed" : true
},
7.现在就是打包了点击发行后会有一个原生APP云打包
8.出现APP云端打包配置 直接使用 Android 使用 DCloud公用证书,可以把广告去掉:如图
9.坐等打包完成 打包完成需要时间,请耐心等候,打包完成后会给你生成一个下载地址,要注意这个下载地址是有5次限制的
请先下载完成后保存下来安装包,可以上传到服务器上,日后可以无限制下载了。
以上就是整个的操作教程,简单易学,方便快捷 你值得拥有,如果对这个小教程还感兴趣,或者有不懂地方欢迎点赞和留言