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
cordova platforms

进入android目录下,可以看到很多.java文件,而ios目录下是很多的object-c文件,browser目录下则是熟悉的web工程。

并且可以看到,每个平台下都有一个cordova目录,我初步猜想,这应该是负责和不同平台通讯交互的cordova核心。

运行App

Web

web端是最直观最简单的,直接运行如下命令即可。

cordova run browser

Android

对于AndroidIOS,我们则需要先检查相关环境是否安装正常。

$ 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

可以看到,我的电脑环境并不满足androidios平台的要求。

首先我们来满足下android平台的环境要求。

JDK

首先是JDK,可以通过javajavac命令来检查下。

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调试。再次尝试,已经可以看到界面了。

cordova app界面

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">

cordova_dialog

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;
    }
}

效果如下:

cordova_camera

IOS

还没钱买IOS设备,尴尬。。。


首发链接


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 77,383评论 1 169
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 25,958评论 1 141
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 28,731评论 0 100
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 16,068评论 0 86
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 21,280评论 0 144
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 17,523评论 0 87
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 10,350评论 2 161
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 9,746评论 0 76
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 8,245评论 5 109
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 11,526评论 0 127
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 10,297评论 1 123
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 11,100评论 0 127
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 5,962评论 0 17
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 8,760评论 2 114
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 11,824评论 3 121
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 7,613评论 0 3
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 7,815评论 0 75
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 12,263评论 2 132
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 12,946评论 2 130

推荐阅读更多精彩内容