집 > 기사 > 웹 프론트엔드 > cordova 시작을 위한 기본 튜토리얼

cordova 시작을 위한 기본 튜토리얼

小云云원래의: 2018-01-19 10:54:402411검색

이 글에서는 주로 Cordova에 대한 기본 튜토리얼과 사용 시 발생하는 몇 가지 문제를 샘플 코드를 통해 단계별로 자세히 소개합니다. 학습이나 업무에 필요한 모든 사람에게 도움이 될 것입니다. 아래 에디터와 함께 배워보세요. 그것이 모두에게 도움이 되기를 바랍니다.

머리말

지금 비용을 절약하고 프로젝트에 성공하기 위해서는 멀티 플랫폼 코르도바에 적응하는 것은 좋은 선택이 아닙니다. 개인적으로 앞으로 트렌드가 될 것 같아요! Alipay, Taobao 등 잘 알려진 많은 앱이 수많은 HTML5 페이지를 통합했습니다! 예를 들어 우리 회사의 현재 앱은 대부분 h5 페이지인데, 네이티브 앱에서는 별로 할 일이 없는 것처럼 느껴집니다. 코르도바 학습의 중요성을 상상할 수 있습니다!

소개

Cordova는 이 API 세트를 통해 모바일 애플리케이션이 JavaScript를 통해 카메라, 마이크 등과 같은 기본 장치 기능에 액세스할 수 있도록 하는 장치 관련 API 세트를 제공합니다. Cordova는 또한 통합된 JavaScript 라이브러리 세트와 이러한 라이브러리에 대한 장치별 기본 코드 백엔드를 제공합니다. Cordova는 iOS, Android, ubuntu 전화 OS, Blackberry, Windows Phone, Palm WebOS, Bada 및 Symbian과 같은 모바일 운영 체제를 지원합니다.

시작하기 위한 첫 번째 단계: 리소스 라이브러리를 다운로드하고 프로젝트에 통합하세요.

cordova 라이브러리의 소스 코드를 다운로드하려면 github 또는 공식 웹사이트에서 다운로드할 수 있습니다. 실제로 공식 홈페이지의 코드는 github에도 게시되어 있습니다!

공식 홈페이지: http://cordova.apache.org/

github 리소스 다운로드 주소: https://github.com/apache/cordova-ios

타사 라이브러리 관리를 위해 CocoaPods를 사용했습니다. cordova3.8.0이 며칠 전에 4.0.1로 업데이트되었습니다. 4.0.1은 8.0 이상만 지원합니다. CocoaPods를 사용하여 아래 업데이트를 수행하면 오류 메시지가 표시됩니다! 주의하세요!

플랫폼: ios, '8.0'

pod 'Cordova', '~> 4.0.1'

2단계: 프로젝트에 cordova4.0.1 라이브러리를 올바르게 통합하는 방법

1. 중요

Config.xml은 Cordova 애플리케이션 동작의 여러 측면을 제어하는 전역 구성 파일입니다. 이 플랫폼 독립적인 XML 파일은 W3C의 패키지 웹 앱(위젯) 사양을 기반으로 정렬되고 핵심 Cordova API 기능을 지정하도록 확장됩니다. , 플러그인 및 플랫폼별 설정. Cordova CLI(명령줄 인터페이스에 설명됨)로 생성된 프로젝트의 경우 이 파일은 최상위 디렉터리에서 찾을 수 있습니다.

대략 의미: config.xml은 전역 구성입니다. Cordova 애플리케이션 동작의 여러 측면을 제어하는 파일입니다. 이 플랫폼 독립적 XML 파일은 W3C의 패키지 웹 애플리케이션 설정(위젯) 사양을 기반으로 하며 핵심 Cordova API 기능, 플러그인 및 플랫폼별 설정을 지정하도록 확장됩니다. Cordova CLI로 생성된 프로젝트(명령줄 인터페이스에 설명됨)

http://cordova.apache.org/docs/en/6.x/config_ref/index.html 공식 상세 설명

2. html5 표시 및 제어를 위해 CDVViewController 클래스를 사용하려면 여기에 필요합니다. 물론 일부 사용자 정의 기능을 수행하기 위해 CDVViewController 클래스를 상속하도록 컨테이너를 사용자 정의할 수도 있습니다.

사용 방법은 다음과 같습니다.

self.cordovaManageVC= [[CordovaManageVCalloc]init];

self.cordovaManageVC.startPage=@"http://www.baidu.com";

[self.navigationControllerpushViewController:self.cordovaManageVCanimated:YES];

3. 사용자 에이전트 설정

- (instancetype)init {

self= [superinit];

if(self!=nil) {

//设置用户代理 如不设置无法调用与H5定制的JavaScript方法进行交互

NSString* original = [CDVUserAgentUtiloriginalUserAgent];

NSString* userAgent = [originalstringByAppendingString:@"delegateUserName"];

self.baseUserAgent= userAgent;

}

returnself;

}

4. 사용자 정의 플러그인은 cordova의 CDVPlugin 클래스를 사용해야 하며 CDVPlugin을 통합하려면 하위 클래스를 사용해야 합니다.

/**

*返回控件

*

*@param command

*/

- (void)back:(CDVInvokedUrlCommand*)command;

사용자 정의가 완료된 후 confing.xml에 구성하세요

위는 cordova의 가장 기본적인 사용법입니다.

Cordova를 사용할 때 발생하는 몇 가지 문제

문제 1

문제

[Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclde path to valid SDK directory.]
ERROR building one of the platforms: Error: cmd: Command failed with exit code

해결 방법

ANDROID_HOME=D:\apps\Android\sdk
PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

문제 2

문제

아아아아

Solution

From https://services.gradle.org/distributions/ 최신 gradle 패키지를 다운로드하여 설치하세요.

Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

문제 3

문제

패키징에 "cordova build android"를 사용하면 오류가 보고됩니다. 오류: Android SDK에서 Gradle 래퍼를 찾을 수 없습니다.

ANDROID_HOME=/home/kongxx/Android/Sdk
GRADLE_HOME=/apps/gradle-3.2.1
PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools:$GRADLE_HOME/bin

Solution

/home/kongxx/Android/ 확인 Sdk /tools/templates/gradle/wrapper 디렉터리가 존재하지 않아서 android-studio 환경을 확인해 본 결과 위의 내용이 플러그인/android/lib/templates 디렉터리에 포함될 수 있다는 것을 발견하여 과감히 복사했습니다. .

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper

문제 4

Problem

Cordova 패키징 사용 시 오류: 오류: EACCES

$ cp -rf android-studio/plugins/android/lib/templates /home/kongxx/Android/Sdk/tools/

Solution

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Subproject Path: CordovaLib
Error: spawn EACCES

Problem 5

Problem

Cordova에서 브라우저 테스트를 사용할 때 Google은 기본적으로 시작됩니다. -Chrome 브라우저, 예:

sudo chmod -Rf 755 ~/Android

Solution

–target을 사용하여 사용하려는 브라우저를 지정할 수 있습니다.

cordova run browser

cordova 시작을 위한 기본 튜토리얼

관련 기사