背景:
本人刚休完陪产假。安安心心回来上班,第一天就被当头一棒,领导要求把一个web项目用cordova转为app,并要求 当天 就要上传App Store提审(╥╯^╰╥)。cordova是什么鬼呀,完全没听过呀,没办法,只能硬着头皮上啦,冲吧,皮卡丘!!! 本文只为记录我的开发过程和步骤。
准备阶段:
ios平台 下载安装Xcode开发工具
安卓平台 下载安装Android Studio开发工具
安装Cordova
Cordova命令行工具作为npm
包分发。
安装cordova命令行工具,通过下面这些步骤:
- 下载和安装Node.js。安装完成后你可以在命令行中使用
node
和npm
。 - (可选)下载和安装git client, 如果你没有。安装成功后,你可以在命令行中使用
git
。 这个命令行使用下载git仓库中的资源。 - 安装
cordova
模块使用Nodejs的npm
工具。cordova
模块会被npm
工具自动下载。
- 在OS X和Linux上:
$ sudo npm install -g cordova
- 在Windows上:
C:\>npm install -g cordova
创建App
cd到源代码的目录中,并创建你的cordova项目,我是在桌面创建了名为cordovaApp
的项目文件夹
~ $ cd /Users/elab/Desktop/cordovaApp
~ cordovaApp $ cordova create hello com.example.hello HelloWorld
- 其中 hello 是创建的项目文件名
- com.example.hello 是 app的bundleId
- HelloWorld 是app的默认名称
添加平台
- iOS平台: 首先先进入刚刚创建的项目的hello文件夹 ~
添加iOS平台
$ cordova platform add ios --save
终端提示反馈 缺少插件,那就添加插件
$ cordova plugin add cordova-plugin-whitelist
然后在运行
$ cordova platform add ios --save
OK了,iOS平台添加成功
可以看下平台构建app的先决条件是否都满足
$ cordova requirements
因为我的mac电脑一直都是用来做iOS开发,所以需要安装的环境配置都是完整的
- 安卓平台
$ cordova platform add android --save
构建版本
$ cordova build
$ cordova run
也可以根据平台单独构建版本
iOS:
$ cordova build ios
$ cordova run ios
安卓:
$ cordova build android
$ cordova run android
可能用到的插件:
适配全面屏:
cordova plugin add cordova-plugin-whitelist
cordova plugin add cordova-plugin-splashscreen
cordova plugin add cordova-plugin-statusbar
安卓版本更新: 一、Android App 升级执行流程
- 获取本地版本号
- 请求服务器获取服务器版本号
- 本地版本和服务器版本不一致提示升级,弹窗提示用户是否更新
- 用户确定升级,调用文件传输方法下载 apk 文件
- 监听下载进度
- 下载完成打开 Apk 进行安装
二、自动升级 APP 需要的插件
- cordova-plugin-app-version github.com/whiteoctobe…
- cordova-plugin-file-opener2 github.com/pwlin/cordo…
- cordova-plugin-file-transfer github.com/apache/cord…
- cordova-plugin-file github.com/apache/cord…
demo:
index.html
<body>
<div id="app"></div>
<script src="cordova.js"></script>
</body>
index.vue
getVersion(){
let that = this;
cordova.getAppVersion.getVersionNumber().then(function(version) {
// 获取服务器版本(一般通过接口获取)
//比对当前版本是否是最新版本
that.downloadApp();
});
}
downloadApp() {
this.centerDialogVisible = false;
Toast('正在更新版本');
let that = this;
let apkUrl = 'https://xxxx.com.release-app.apk' // apk下载链接
let fileUrl = cordova.file.dataDirectory + 'test.apk';
var fileTransfer = new FileTransfer();
fileTransfer.download(
apkUrl,
fileUrl,
function(entry) {
that.tipString = '文件保存位置: ' + entry.toURL();
cordova.plugins.fileOpener2.open(
entry.toURL(),
'application/vnd.android.package-archive',
{
error() {
// that.tipString = '安装文件打开失败';
},
success: function() {
// that.tipString = '安装文件打开成功';
}
}
);
},
function(error) {
// that.tipString = JSON.stringify(error) + '';
},null,{}
);
// fileTransfer.onProgress(event => {
// // that.tipString = '开始下载进度';
// let num = Math.ceil((event.loaded / event.total) * 100); //转化成1-100的进度
// if (num === 100) {
// that.updateString = '下载完成';
// } else {
// that.updateString = '下载进度:' + num + '%';
// }
// });
}
当然实际开发中会遇到各种的坑,我也是一步步被坑过来。接下来还要搞推送服务和扫一扫,又要开始各种百度,各种尝试了。。。