公司为了节约开发时间,要用Cordova+Vue做项目;所以最近一直在研究Android混开。自己第一次做混开,也是厚着脸皮向前端请教了很多问题,才马马虎虎搞出来点东西。下面把最基础的项目创建记录一下。
安装 Npm
这里就不给出具体安装了,可以百度一下或者参考下面拦截
安装 Vue脚手架
执行命令:
cnpm install --global vue-cli复制代码
安装 Cordova
已经安装cordova则跳过,否则执行下面命令:
npm install -g cordova复制代码
创建Cordova项目
执行命令:
cordova create hello com.example.hello HelloWorld复制代码
参数说明:
名称 | 必填 | 描述 |
---|---|---|
hello | 是 | 工程的文件夹名 |
com.example.hello | 否 | 应用程序的id, 名如果不指定的话默认为io.cordova.hellocordova |
HelloWorld | 否 | App的名称 |
添加Android平台
执行命令
cordova platform add android复制代码
创建Vue项目
执行命令
vue init webpack vue-app复制代码
在执行命令是会出现下面的配置选项,前3个分包为项目名称、项目描述、和作者。后面几个配置是js相关,一般没什么特殊要求可以按照下面配置。
最终的项目结构:修改vue项目的index.html
1. 在head之间加入下面代码
复制代码
如果加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
导致页面样式改变,如果改变则不加,否则还是建议加上。这段主要是防止跨站脚本攻击。
2. 修改vue-app文件中config下的index.js的build配置项
3. body中引入cordova.js
复制代码
打包
执行cordova的打包签名需要将java的环境和android的sdk环境配置好才能执行。由于写起来篇幅比较长,下面给产业一篇是我在网上找了一篇还算是写的清楚的文章。。如果感觉还有疑问可以留言或者自己在网上找找其他的资料。
1. 如果vue项目中修改或者添加了代码需要build到外层cordova项目的www文件中。(执行命令下面前,如果是新建的vue的项目别忘了先执行 npm i 这个命令去自带下载一下vue用到的组件。)
执行命令:(要cd到vue项目中执行)
npm run build复制代码
执行此命令,如果cordova没有www文件夹,会创建该文件并将vue的代码添加进来。如果有www文件则不会重复创建,只会把vue文件添加进来。
2. 如果需要打包android的apk可执行下面命令
cordova build android复制代码
生成的apk路径为:
3. 如果不需要打apk包,只要执行下面命令就可以项目运行在手机中。(主要手机要用数据线和电脑连接并开启usb调试的功能)
cordova run android复制代码
上面都是debug调试的方式。当然正式发布的时候是不可能使用debug包的。打成签名包有几种方式。我用的是androidstudio自带的签名打包方式。下面我会给出来网上找的打包签名的方式。
Cordova相关连接:
Vue相关连接: