ホームページ > 記事 > ウェブフロントエンド > Cordova を使い始めるための基本チュートリアル

Cordova を使い始めるための基本チュートリアル

小云云オリジナル: 2018-01-19 10:54:402412ブラウズ

この記事では、Cordova に関する基本的な入門チュートリアルと、その使用時に発生するいくつかの問題について、サンプルコードを通じて詳細に紹介します。この記事は、すべての人の学習や仕事に役立つ特定の学習価値があります。必要な方は以下のエディターと一緒に学びましょう。皆さんのお役に立てれば幸いです。

はじめに

今、コストを節約してプロジェクトを成功させるには、マルチプラットフォームの Cordova に適応するのは良い選択ではありません。個人的には今後のトレンドになるかもしれないと思っています！ Alipay や Taobao などの多くの有名なアプリには、多数の HTML5 ページが統合されています。例えば弊社の現状APPはh5ページがほとんどで、ネイティブアプリではどうすることもできない感じです。 Cordova を学ぶことの重要性は想像できるでしょう。

はじめに

Cordova は、一連のデバイス関連 API を提供します。この API セットを通じて、モバイルアプリケーションは JavaScript を通じてネイティブデバイス機能 (カメラ、マイクなど) にアクセスできます。 Cordova は、統合された JavaScript ライブラリのセットと、これらのライブラリ用のデバイス固有のネイティブコードバックエンドも提供します。 Cordova は、iOS、Android、ubuntu Phone OS、Blackberry、Windows Phone、Palm WebOS、Bada、Symbian のモバイルオペレーティングシステムをサポートしています。

開始するための最初のステップ: リソースライブラリをダウンロードしてプロジェクトに統合します

Cordova ライブラリのソースコードをダウンロードします。Github または公式 Web サイトからダウンロードできます。実は公式サイトのコードは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 を使用して以下を更新すると、エラーが表示されます。ただ注意してください！

platform: ios, '8.0'

pod 'Cordova', '~> 4.0.1'

はじめにステップ 2: Cordova4.0.1 ライブラリをプロジェクトに正しく統合する方法

1. xml 非常に重要

Config.xml は、Cordova アプリケーションの動作のさまざまな側面を制御するグローバル構成ファイルです。このプラットフォームに依存しない XML ファイルは、W3C のパッケージ化された Web アプリ (ウィジェット) 仕様に基づいて調整され、コア Cordova を指定するように拡張されています。 API 機能、プラグイン、およびプラットフォーム固有の設定。Cordova CLI (「コマンドラインインターフェイス」で説明) で作成されたプロジェクトの場合、このファイルは最上位ディレクトリにあります。

大まかな意味: config.xml はCordova アプリケーションの動作のさまざまな側面を制御するグローバル構成ファイル。このプラットフォームに依存しない XML ファイルは、W3C のパッケージ化された Web アプリケーション設定 (ウィジェット) 仕様に基づいており、コア Cordova API 機能、プラグイン、およびプラットフォーム固有の設定を指定するように拡張されています。 Cordova CLIで作成したプロジェクト（コマンドラインインターフェースで説明）

http://cordova.apache.org/docs/en/6.x/config_ref/index.html 公式の詳しい説明

2. html5ページを表示するコンテナここでは、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

問題

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

解決策

https://services.gradle.org/distributions/から最新の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

問題 3

問題

「cordova build android」を使用してパッケージ化すると、エラーが報告されます: エラー: Android SDK 内で gradle ラッパーが見つかりませんでした。

$ 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

解決策

Check /home/kongxx/Android/ Sdk /tools/templates/gradle/wrapper ディレクトリにディレクトリが存在しないので、android-studio 環境を確認したところ、plugins/android/lib/templates ディレクトリに上記の内容を含めることができることが分かったので、思い切ってコピーしました。

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

問題 4

問題

Cordova パッケージ使用時のエラー: エラー: spawn EACCES

$ 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

解決策

sudo chmod -Rf 755 ~/Android

問題 5

問題

Cordova でブラウザテストを使用すると、デフォルトで Google が起動します - Chrome ブラウザ、例:

cordova run browser

Solution

-target を使用して、使用するブラウザを指定できます。

cordova run browser --target=opera
cordova run browser --target=firefox

Cordova を使い始めるための基本チュートリアル

関連記事