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,安装相应的

  1. “SDK Platform” for API level android-2x
  2. "Android SDK Platform-tools (latest)
  3. “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 <,不影响使用。

发布了22 篇原创文章 · 获赞 8 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览