cordova + vue-cli (1)
安装
首先保证装了node,然后提前下好android开发的那堆东西,jdk,java等等
接着安装 vue-cli,cordova
npm install -g vue-cli
npm install -g cordova
创建
创建cordova项目
cordova create MyApp
创建vue项目,注意选项,把不需要的尽量选no.
vue init webpack Myvue
将vue项目的文件目录都复制到MyApp文件里,注意有几个隐藏文件,别落下.
或者可以把cordova项目复制到vue项目里.
在目录下执行 npm i
安装vue需要的包
对vue项目的一些配置更改.
原来生成路径的dist改成www: 在config/index.js下
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../www/index.html'),
assetsRoot: path.resolve(__dirname, '../www'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// ...
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
原本cordova项目的www文件,直接删掉也无妨.
文件路径,都改成相对路径. 比如原来的/static/img/xxx.png 需要改成./static/img/xxx.png,如果是样式里写的背景图,需要将样式在template里用:style处理.如下
<div :stype="backimg">...</div>
...
data(){
return {
backimg:{
background: 'url(' + require('./static/img/xxx.png') + ') no-repeat center/cover'
}
}
}
package.json的配置,把命令简写一下
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"ios": "cordova prepare ios && cordova run ios",
"android": "cordova prepare android && cordova run android",
"_ios": "cordova prepare ios && cordova emulate ios",
"_android": "cordova prepare android && cordova emulate android"
},
注释
npm run dev // 浏览器运行,一般会一直开启.
npm run build //在www目录下生成压缩文件,属于第二步,打包
npm run ios // 用ios真机跑
npm run android //用android真机跑
npm run _ios // 用ios虚拟机跑
npm run _android //用android虚拟机跑
vue下的main.js,要引入cordova.js,否则加入的cordova插件将没法使用.
if (window.location.protocol === 'file:' || window.location.port === '3000') {
var cordovaScript = document.createElement('script')
cordovaScript.setAttribute('type', 'text/javascript')
cordovaScript.setAttribute('src', 'cordova.js')
document.body.appendChild(cordovaScript)
}
需要重装的npm,如果提示什么什么npm的版本号要大于3.0.0,但是实际系统里装的npm已经超过了3.0.0,那么需要把vue项目里的npm卸载了重新装一下,需要时间可能会很长.
手工删除package.json文件里面的相关,大概长这样:npm:^3.0.0 ,然后
npm uninstall npm
npm install npm
添加平台
cd MyApp
cordova platform add browser,android,ios
试运行
在MyApp下运行, 其他命令
help:获取帮助
create:创建项目
platform:管理平台
plguin:管理插件
perpare:复制cordova/www/下的文件到对应平台的项目文件夹中
complie:编译项目
build:构建项目
Emulate:虚拟机运行
run:测试机运行
server:开启web服务器运行项目
android,有时需要安装android studio,用他打开项目对应的android平台后,然后配置一通虚拟机什么的.配置完成,再执行npm run android,或者直接在adroid studio跑也行.
如果请求api时,提示
Provisional headers are shown
,而浏览器上没问题,需要重新装一下android平台,引起原因可能是,在cordova里需要的包版本,比adroid studio里的旧,当用adroid strudio打开后,提示升级别搭理.ios,装xcode,虚拟机. 命令或者在xcode运行都可以.
调试
理论上说只要在npm run dev下运行成功了,打包后在手机上也差不多..但是仅限于理论,如果想看手机上什么情况,就需要如下操作
android
chrome浏览器必须的
开启手机的USB调试模式
打开网址 `chrome://inspect/#devices` ,机器慢的多等会.
其他的就和web调试都一样了
ios
暂时买不起iphone,但是安装的app调试如下
mac+safari浏览器
【iOS 终端】:设置 → Safari → 高级 → Web 检查器 → 开.
【OS X】:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单.
safari调试
添加与使用cordova插件
先推荐一个插件 vue-cordova,在gayhub上搜一下,能找到使用方法.
npm i vue-cordova --save
添加/卸载cordova插件命令,卸载执行完记得在config.xml里,把这个插件的配置删掉,要不下次cordova build的时候就又加上去了
cordova plugin add/remove cordova-plugin-device --save
打包
本来说 cordova build android –release就是打包了,但是,结果生成的一个文件是 android-release-unsigned.apk
,这个一看就感觉不像
继续命令:生成数字签名文件(keystore)。这个文件只需要生成一次。以后每次sign都用它。
keytool -genkey -v -keystore release-key.keystore -alias bd-app -keyalg RSA -keysize 2048 -validity 10000
上面的命令意思是,生成一个 release-key.keystore 的文件,别名(alias)为 bd-app 。
过程中会要求设置 keystore 的密码和 key 的密码。我们分别设置为 testt1 和 testt2 (要求6位以上),然后写[是]完成
这个文件生成在根目录下,然后复制到platforms/android/build/outputs/apk/
下来,接下来的命令都在这里执行
对apk签名,cd到apk的目录下,
cd platforms/android/build/outputs/apk/
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release-key.keystore android-release-unsigned.apk bd-app
这个命令中需要传入证书名 release-key.keystore,要签名的 APK android-release-unsigned.apk,和别名 bd-app。签名过程中需要先后输入 keystore 和 key 的密码。命令运行完后,这个 APK 就已经改变了。但是这个过程没有生成新文件。
最后用 zipalign
压缩和优化APK,先把这个zipalign
文件找到 cd /用户/wxj/资源库/Android/sdk/build-tools
下, 看使用的哪个版本号,复制出zpialign文件来,放到上面的apk目录下,执行
./zipalign -v 4 android-release-unsigned.apk bd-app.apk
这样就生成一个叫bd-app.apk的文件,安装就可以了
提示签名不一致的情况,其实就是已经有一个安装了,要覆盖他,结果发现不一致,只要把前面安装的程序卸载了就可以了.
以后如何打包 ,如下命令,或者写到npm命令里
cordova build android --release -- --keystore="release-key.keystore" --alias=bd-app --storePassword=testt1 --password=testt2
或者在根目录下写一个配置文件 build.json
{ "android": { "release": { "keystore": "release-key.keystore", "alias": "bd-app", "storePassword": "testt1", "password": "testt2" } } }
把release-key.keystore
文件也放在根目录下,然后每次执行 cordova build android --release
,会在apk目录下生成两个文件,其中一个叫 android-release.apk
,这个就是新的包了.
可能是更简便的打包方式,使用 Gradle ,一个 Android 的自动化构建工具。cordova build android 在
platforms/android
目录下建立release-signing.properties
文件,内容类似下面这样:storeFile=release-key.keystore // 就是在build.gradle文件同目录下的keystore文件 storePassword=testt1 keyAlias=bd-app keyPassword=testt2
这个文件的名称和位置也是可以通过 Gradle 的配置 cdvReleaseSigningPropertiesFile
修改的
最后执行 cordova build android -release
ios
- 草鸡多,先在apple上注册个开发者账户,668,然后需要itunes,安装xcode
https://developer.apple.com
https://itunesconnect.apple.com/