Cesium + Cordova + VUE 环境开发Android

文章目录

安卓开发环境

安装NODE.js

https://nodejs.org

安装JDK

JDK8 SE
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

安装Android Studio

https://developer.android.google.cn/studio/
装好以后打开软件，在右下角configure中找到sdk manager，安装相应的

“SDK Platform” for API level android-2x
"Android SDK Platform-tools (latest)
“Android SDK Build-tools” (latest)

这里也可以等到下面的cordova检查依赖时候再去装。

下载SDK和其他插件

这里gradle有坑，需要提前到 http://services.gradle.org/distributions/ 下好要求的版本（我是4.6-all），放入这个用户路径下，最后一个文件夹可能为随机字符串，然后重新开启软件

在这里插入图片描述

安装Cordova

npm install -g cordova

新建项目
cordova create demo com.yourcom.demo cordovaDemo

cd demo进去以后增加平台：（如果缺少依赖会提示）
cordova platform add android --save

检查依赖项（注意上面的sdk依赖的安装方法）
cordova requirements

最终需要打包
cordova build

真机调试时，手机插上数据线，打包加真机。
cordova run

遇到了gradle 4.6强制变回4.1的问题

Demo\platforms\android\cordova\lib\builders\StudioBuilder.js 中，将
var distributionUrl = process.env[‘CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL’] || ‘https\?/services.gradle.org/distributions/gradle-4.1-all.zip’;
中的4.1改为4.6。

### Android Studio打开本项目，真机调试
[file] - [new] - import project(Gradle,…) 指向demo/platforms/android目录
插上手机，打开USB调试，shift+f9可以开始真机调试。（有冲突弃用）

使用Cordova插件

读取手机文件

安装插件

cordova plugin add cordova-plugin-file

读取绝对路径示例

index.js文件。读取手机存储Download/goto.txt中的内容。

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        alert('first')
        this.receivedEvent('deviceready');
        
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
        window.resolveLocalFileSystemURL('file:///storage/emulated/0/Download/goto.txt', this.gotFile, this.fail); //成功得到
        console.log('Received Event: ' + id);
    },
     fail:function(e) {
        alert('error to load file');
        debugger
    },
     gotFile:function(fileEntry) {
        fileEntry.file(function (file) {
            var reader = new FileReader();
            reader.onloadend = function (e) {
                var content = this.result;
                alert(content);
                debugger
            };
            reader.readAsText(file);
        });
    }
};

app.initialize();

与VUE混合开发

建项目

在demo目录下命令行执行（碰到失败情况可能要手动建目录，或者去掉首字母大写）：
vue create vueSource

配置

在vueSource/public/index.html中加入
<script type="text/javascript" src="cordova.js"></script>
修改vueSource/src/main.js中mount部分，设备ok再mount vue：（build时改为如下，浏览器调试时改回去）

document.addEventListener('deviceready', function(){
  new Vue({
    render: h => h(App),
  }).$mount('#app')
 // alert('ok')
},false)

修改vueSource/vue.config.js (在@vue-cli 3.0版本以上)：

// vue.config.js
module.exports = {
    baseUrl:'',
    outputDir :"../www"
  }

这样在vue的npm run build之后，上级目录可以直接cordova run/ cordova build,免去拷贝。
整套配置会报一个Uncaught SyntaxError: Unexpected token <，不影响使用