文章目录
安卓开发环境
安装NODE.js
安装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 <
,不影响使用