cordova 开发实战记录

背景：

本人刚休完陪产假。安安心心回来上班，第一天就被当头一棒，领导要求把一个web项目用cordova转为app,并要求当天就要上传App Store提审(╥╯^╰╥)。cordova是什么鬼呀，完全没听过呀，没办法，只能硬着头皮上啦，冲吧，皮卡丘！！！本文只为记录我的开发过程和步骤。

准备阶段：

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 + '%';
            //     }
            // });
        }

当然实际开发中会遇到各种的坑，我也是一步步被坑过来。接下来还要搞推送服务和扫一扫，又要开始各种百度，各种尝试了。。。