cordova开发环境搭建
最近我在尝试了解跨平台技术的发展,首先则是想到了cordova
。本文简单记录下cordova
环境搭建的过程。
安装cordova
首先是要npm
全局安装cordova
npm install -g cordova
创建应用
安装的cordova
类似于create-react-app
这种脚手架,可以通过命令行直接创建应用
cordova create myapp
添加平台支持
cordova
可以支持ios
, android
, web
三端。
cordova platform add ios
cordova platform add android
cordova platform add browser
进入android
目录下,可以看到很多.java
文件,而ios
目录下是很多的object-c
文件,browser
目录下则是熟悉的web
工程。
并且可以看到,每个平台下都有一个cordova
目录,我初步猜想,这应该是负责和不同平台通讯交互的cordova
核心。
运行App
Web
web
端是最直观最简单的,直接运行如下命令即可。
cordova run browser
Android
对于Android
和IOS
,我们则需要先检查相关环境是否安装正常。
$ cordova requirements
Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: not installed
Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Detected 'adb' command at C:\Windows\system32 but no 'platform-tools' directory found near.
Try reinstall Android SDK or update your PATH to include valid path to SDK\platform-tools directory.
Android target: not installed
android: Command failed with exit code ENOENT Error output:
'android' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
Gradle: not installed
Could not find gradle wrapper within Android SDK. Could not find Android SDK directory.
Might need to install Android SDK or set up 'ANDROID_HOME' env variable.
Requirements check results for browser:
Requirements check results for ios:
Apple macOS: not installed
Cordova tooling for iOS requires Apple macOS
Some of requirements check failed
可以看到,我的电脑环境并不满足android
和ios
平台的要求。
首先我们来满足下android
平台的环境要求。
JDK
首先是JDK
,可以通过java
和javac
命令来检查下。
C:\>java -version
java version "1.8.0_201"
Java(TM) SE Runtime Environment (build 1.8.0_201-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)
如果没安装,可以参考jdk下载与安装简明教程。
Gradle
Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。
具体安装过程可以参考gradle环境搭建。
Android SDK
首先我们安装Android Studio。根据安装指引,我们会安装好Android SDK
。
在此安装过程中,遇到了一个报错:
Android SDK Tools, SDK Patch Applier v4 and 5 more SDK components were not installed
感谢这位大佬提供的解决方案,迅速解决了问题,这里顺便记下SDK
的安装目录。
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk
接着我们需要在环境变量-系统变量-Path中新增两项:
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\platform-tools
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools
并且新增一项系统变量ANDROID_HOME,变量值为:
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk
试运行命令cordova run android
,出现了如下警告
$ cordova run android
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk (DEPRECATED)
Starting a Gradle Daemon (subsequent builds will be faster)
于是我又新增了一项系统变量ANDROID_SDK_ROOT,变量值与ANDROID_HOME一样。
重新跑cordova run android
命令,首先看到警告如下:
> Configure project :app
Checking the license for package Android SDK Platform 28 in C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\licenses
Warning: License for package Android SDK Platform 28 not accepted.
上网一查,原来是没有同意相关协议。我们来到C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools\bin
目录下运行命令行,输入sdkmanager --licenses
,然后就会弹出一堆协议,没办法,无脑输入y
同意吧。
再次运行cordova run android
,发现了新的报错信息:
No target specified and no devices found, deploying to emulator
No emulator images (avds) found.
1. Download desired System Image by running: "C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools\android.bat" sdk
2. Create an AVD by running: "C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
可以看到,是没有找到设备的原因。需要将手机连接到PC
,并且打开开发者选项,允许USB
调试。再次尝试,已经可以看到界面了。
Plugins
我们来试试调用一些原生API
,比如调用原生Dialog
, 调用相机等。我们先试下Dialog
。
Dialog
首先需要插件:
cordova plugin add cordova-plugin-dialogs
接着我们在deviceready
事件之后调用Dialog
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
navigator.notification.alert(
'欢迎欢迎!', // message
alertDismissed, // callback
'试下Dialog', // title
'好的' // buttonName
);
}
function alertDismissed() {
// 点击按钮后的回调
}
调试后发现弹出的中文乱码了,需要在index.html
加个meta
<meta charset="UTF-8">
Camera
接着我们试下调用相机,首先也是安装插件:
cordova plugin add cordova-plugin-camera
尝试调用相机拍照,并将得到的照片通过img
元素显示出来:
// Application Constructor
initialize: function() {
const _this = this;
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
// 点击按钮打开相机
document.querySelector('#btnOpenCamera').addEventListener('click', function() {
_this.openCamera()
})
},
openCamera: function() {
const cameraOptions = {
// 默认输出格式为base64
destinationType: Camera.DestinationType.DATA_URL,
// 输出png格式
encodingType: Camera.EncodingType.PNG
};
navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
// 相机拍照成功
function cameraSuccess(base64Str) {
console.log(base64Str)
// 给图片元素赋值src
document.querySelector('#captureImg').src = prefixBase64PNG(base64Str)
}
function cameraError(err) {
console.error(err)
}
function prefixBase64PNG(base64Str) {
return 'data:image/png;base64,' + base64Str;
}
}
效果如下:
IOS
还没钱买IOS
设备,尴尬。。。
扫一扫下方小程序码或搜索Tusi博客
,即刻阅读最新文章!
cordova开发环境搭建的更多相关文章
- Apache Cordova开发环境搭建(二)VS Code
原文:Apache Cordova开发环境搭建(二)VS Code 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011127019/articl ...
- Apache Cordova开发环境搭建(一)-Visual Studio
原文:Apache Cordova开发环境搭建(一)-Visual Studio 一.使用Visual Studio开发Apache Cordova手机App 1.版本要求,Visual Studio ...
- visual studio 2015 + Cordova 开发环境搭建
简单的写一些,备忘,太折腾了,特别是通过代理上网的我们国内的开发者 1.当然是安装Visual Studio 2015,别忘了选择Tools For Apache Cordova. 对于通过Proxy ...
- Cordova 开发环境搭建及创建第一个app
整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上操作过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装A ...
- Mac下Cordova开发环境搭建
xcode下载 从Mac App Store 下载Xcode,只需要在Store键入Xcode,下载第一个就ok了 cordova安装与配置 cordova需要node安装,使用Safari打开nod ...
- Ionic3开发环境搭建-VS Code
原文:Ionic3开发环境搭建-VS Code 一.Ionic3在VS Code中的开发环境搭建 1.全局安装Ionic包 npm install -g cordova ionic 使用 ionic ...
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- 搭建Cordova开发环境
Cordova是什么 Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头.加速计.它可以与UI框架(如jQuery Mobile ...
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
随机推荐
- 【iOS】得到当前年、月、周的第一天和最后一天
在写一个记账软件,其中有个统计功能.比如,统计某月的支出,需要知道某天所在的月的第一天和最后一天,以便从数据库中根据时间取数据. 话不多说,上代码: // // EBDate.h // ChargeM ...
- Spring 梳理-处理Multipart 请求
原理讲解 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"actio ...
- java 中使用StopWatch来计算时间差
以前在进行时间耗时时我们通常的做法是先给出计算前后两个的时间值,然后通过详见来计算耗时时长. eg: long start = System.currentTimeMillis(); ......业务 ...
- append追加的html片段,添加点击事件没有反应,解决!
对于追加的元素来说,属于未来展现的内容,我们此时不能使用一般点击事情处理,需要用未来事件绑定. 例如:我点击车牌号显示车辆详情,如下绑定. //绑定未来元素 $("body").d ...
- Nginx 配置项优化详解
(1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...
- 一个原生JS实现的不太成熟的贪吃蛇游戏
一个初初初初级前端民工 主要是记录一下写过的东西,复习用 大佬们如果看到代码哪里不符合规范,或者有更好写法的,欢迎各位批评指正 十分感谢 实现一个贪吃蛇游戏需要几步? 1.有地图 2.有蛇 3.有食物 ...
- js赋值,字典,数据类型和参数传递的简单熟悉
之所以这样分,原因是布尔类型和整数浮点数在内存里是直接赋值的,而数组实际上数组名指的是这个数组的地址 字符串同样是地址,字典也是. //熟悉赋值 var x=0; console.log(x); va ...
- Flume 学习笔记之 Flume NG概述及单节点安装
Flume NG概述: Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...
- BUUCTF刷题记录(Web方面)
WarmUp 首先查看源码,发现有source.php,跟进看看,发现了一堆代码 这个原本是phpmyadmin任意文件包含漏洞,这里面只不过是换汤不换药. 有兴趣的可以看一下之前我做的分析,http ...
- 从xxe-lab来深入学习xxe漏洞
这几天,想复习一下xxe的知识,于是把以前的一个靶场拿过来玩玩,顺便审计一下代码2333,靶场地址:https://github.com/c0ny1/xxe-lab 首先先练习的是php-xxe: 我 ...