cordva学習ノート(一)——初めて試した牛刀のcodova.js概要

前言
新会社の最初の任務に来て、hybrid App中間層の原理を研究して、中間層プラグインの開発をします.このミッションはとても面白いです.挑戦性もあります.前にDCloudで5+App開発をしたことがありますが、中間層のものは多くないです.このシリーズの文章はシリーズの初めのcorddova学習ノートに属しています.本文は主にゼロから一つのcordvaプロジェクトを構築し、cordva開発の基本内容を理解します.
最初のアプリを作成
Apache Cordovaはオープンソースのモバイル開発フレームです.標準的なウェブ技術-HTML 5、CSS 3とJavaScriptを使って、クロスプラットフォームの開発を許可します.各プラットフォームでのアプリケーションの具体的な実行は、パッケージ化され、各デバイスの機能には、例えば、センサ、データ、ネットワーク状態など、標準に適合したAPIバインディングによってアクセスされる.
Cordova公式サイト:http://cordova.apache.org/Cordova日本語ネットワーク:http://cordova.axuer.com/Cordova日本語ステーション:http://www.cordova.org.cn/
1.Cordova CLIのインストール

npm install -g cordova

インストールが完了したのはcordova -vでバージョン番号を確認できます.ここではV 6.5で構築されます.
2.新規プロジェクト

cordova create  [ID [NAME [CONFIG]]] [options]

Create a Cordova project:

PATH——プロジェクトパス

ID——apパッケージ名-used in

NAME——app名称

CONFIG——プロファイルアドレスjson string whose key/values will be includ in[PATH]/.codova/config.json

Options:

--template=...use a custom template located locallly,in NPM,or GitHub.

--copy-from=......deprecated,use--template instead.

--link-to=………...symlink to custom www asets without creating a copy.

Example:

cordova create hello-cordova io.zhaomenghuan HelloCordova

これはあなたのcorovaアプリケーションのために必要なディレクトリを作成します.デフォルトでは、corovacreateコマンドはウェブベースのアプリケーションの骨格を生成し、プロジェクトのホームページはwww/index.ファイルです.
3.プラットフォームの追加
すべての後続命令はプロジェクトディレクトリまたはプロジェクトディレクトリのサブディレクトリで実行されます.

cd hello-cordova

あなたのアプリにターゲットプラットフォームを追加します.私たちはiosとandroidのプラットフォームを追加し、彼らがconfig.xmlに保存されていることを確認します.

cordova platform add ios --save
cordova platform add android --save

addまたはremoveプラットフォームを実行するコマンドは、プロジェクトplatformsの内容に影響を及ぼします.このディレクトリには、各指定プラットフォームにサブディレクトリがあります.
注意:CLIを使ってアプリケーションを作成する時、ファイルを変更しないでください.アプリケーションの構築やプラグインの再インストールを準備すると、このディレクトリは通常書き換えられます.
現在のプラットフォームの設定状況を確認します.

cordova platform is

Installed platforms:
  android 6.1.2
Available platforms:
  amazon-fireos ~3.6.3 (deprecated)
  blackberry10 ~3.8.0
  browser ~4.1.0
  firefoxos ~3.6.3
  webos ~3.7.0
  windows ~4.4.0
  wp8 ~3.8.2 (deprecated)

インストール構築の先決条件:アプリを構築して実行するには、各プラットフォームのSDKをインストールする必要があります.また、ブラウザを使って開発すると、プラットフォームSDKは不要です.
プラットフォームの構築要求を満たしているかどうかを確認します.

cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-7,android-8,android-9,android-10,android-11,android-12,android-13,android-14,android-15,android-16,android-17,android-18,android-19,android-20,android-21,android-22,android-23,android-24,android-25
Gradle: installed

初めて使うと次のエラーが発生するかもしれません.

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 include path to valid SDK directory.

これは環境変数が設定されていないからです.

JAVA_を設置する.ホーム環境変数は、JDKインストールパス

に指定されています.

ANDROID_を設定します.ホーム環境変数は、Android SDKインストールパス

に指定されています.

Android SDKのtoolsとplotform-toolsディレクトリをあなたのPATH

に追加します.
Androidプラットフォーム下の環境構成については、ここではもはや説明しなく、具体的には参照することができる.

Androidプラットフォームの要求

iOSプラットフォームの要求

Windowsプラットフォームの要求

4.Appの構築
デフォルトでは、 cordva createはwebアプリケーションに基づく骨格を生産しています.プロジェクト開始ページはwww/index.にあります. ファイル任意の初期化タスクはwww/js/index.jsファイル中のdevicereadyイベントのイベントハンドリング関数にあるべきです.
以下のコマンドを実行して、追加されたすべてのプラットフォームを構築します.

cordova build

構築毎に制限プラットフォーム範囲を選択することができます.この例ではandroidです.

cordova build android

注意:初めて使用する場合、コマンドライン提示Downloading https://services.gradle.org/distributions/gradle-2.14.1-all.zipは、対応するgradleをダウンロードして自動的に解凍してインストールするもので、ネットワークの状況によっては時間がかかりすぎて、エラーが発生しやすい.
Cordovaを使ってAndroidプラットフォームをコンパイルしてヒントを与えます.Could not rerrive enough space for 2097152 KB object heap.

Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap

大体の意味はシステムメモリが足りなくてVM作成に失敗しました.ネットで何種類か試しましたが、だめです.最後にこの方法でいいです.
スタート->コントロールパネル->システム->詳細設定->環境変数->システム変数新規作成変数:変数名:_JAVA_OPTTIONS変数値:-Xmx 512 M
5.アプリを実行する
私たちは様々な方法で私たちのアプリを実行しています.様々な場面で異なる方法を使うと、私たちのアプリケーションの開発とテストに役立ちます.
コマンドラインで以下のコマンドを実行すると、Appを再構築し、特定のプラットフォームのシミュレータで確認できます.

cordova emulate android

あなたの携帯をパソコンに挿入して、携帯で直接にアプリをテストできます.

cordova run android

パッケージ操作を行う前に、ローカルサービスプレビューアプリUIを作成し、指定されたポートまたはデフォルト値を使って8000でローカルWebサーバwww/asetsを実行することができます.アクセス項目:http://HOST_IP:PORT/PLATFORM/www.

cordova serve [port]

参考文献:

Androidシミュレータ

を設定します.

Cordova runコマンド参照文書

Cordova emulateコマンド参照ドキュメント

6.プラグインのインストール
cordvaの強みは、カメラやアルバムなどのシステムの下部のAPIを呼び出して、プラグインをインストールすることによって、ウェブエンジニアリングの能力を拡張することができます.プラグイン管理は、cordova pluginコマンドにより実現される.
必要なプラグインをここで検索できます.

cordova {plugin | plugins} [
    add  [..] {--searchpath= | --noregistry | --link | --save | --browserify | --force} |
    {remove | rm} { | } --save |
    {list | ls} |
    search [] |
    save |
]

プラグインを追加:

cordova plugin add  [...]

プラグインを削除:

cordova plugin remove [...]

7.プラットフォームを中心としたワークフロー開発アプリ
上记はプラットフォーム(CLI)を跨ぐワークフローで行いますが、原则として自分でオリジナルレイヤーのカスタマイズコンポーネントを书く必要がないなら、私たちは完全にCLIだけで私たちの仕事を完成できます.もうすぐ私達のcordvaプロジェクトが原生工程に導入されます.例えば、私たちはandroid studioを使って、新しいcordvaプロジェクトを導入することができます.
カスタムプラグインの開発
公式推奨のプラグインは同じディレクトリ構造に従い、ルートディレクトリの下にplugin.xml配置ファイルがあり、srcディレクトリの下にプラットフォームの元のコードが置いてあります.www下にjsインターフェースコードを置いて、基本的な構成方法とコード構造は一定の規則に従います.
1.plugmanをインストールし、plugmanを使ってプラグインテンプレートを作成する

npm install -g plugman

例えば、ここでは、native UIのプラグインを作成します.

plugman create --name NativeUI --plugin_id cordova-plugin-nativeui --plugin_version 0.0.1

パラメータ紹介:plugin Name:プラグイン名:NativeUplugID:プラグインID:cordva-plugin-navieuioversion:バージョン:0.0.1 directory:絶対または相対パスのディレクトリで、プラグインプロジェクトvariable NAME=VALEを作成します.追加の説明は、著者情報と関連した説明のようです.
プラグインディレクトリに入る

cd NativeUI

plugin.xmlにAndroidプラットフォームを追加します.

plugman platform add --platform_name android

作成したプラグインのファイル構造は以下の通りです.

NativeUI：

├── src
    └── android
        └── NativeUI.java
├── www
    └── NativeUI.js
└── plugin.xml

2.プロファイルの変更plugin.xmlファイルフィールドの意味:
元素
説明
plugin
名前空間、ID、プラグインバージョンを指定します.定義でhttp://apache.org/cordova/ns/...名前空間pluginのIDは、corova pluginsコマンドの入力時にプラグインのリストに表示されます.
name
プラグインの名前を指定します.
description
プラグインの説明情報を指定します.
author
プラグインの作者の名前を指定します.
keywors
プラグインに関するキーワードを指定します.Cordova研究開発チームは公開、検索可能なプラグイン倉庫を設立しました.追加したキーワードはプラグインを倉庫に提出した後に発見されます.
license
プラグインの許可を指定します.
エンギンス
プラグインのサポートを定義するためのCordovaバージョンです.engine要素を追加して、各サポートのCordoverバージョンを定義します.
js-module
jsファイル名を指しますが、このファイルは自動的に> Cordova 。 <em>js-module</em> ， 。</td> </tr> <tr> <td align="center">info</td> <td align="left"> <em>description</em> 。</td> </tr> </tbody> </table> <pre><code><?xml version='1.0' encoding='utf-8'?> <plugin id="cordova-plugin-nativeui" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>NativeUI</name> <js-module name="NativeUI" src="www/NativeUI.js"> <clobbers target="agree.nativeUI" /> </js-module> <platform name="android"> <config-file parent="/*" target="res/xml/config.xml"> <feature name="NativeUI"> <param name="android-package" value="cn.com.agree.nativeui.NativeUI" /> </feature> </config-file> <config-file parent="/*" target="AndroidManifest.xml"></config-file> <source-file src="src/android/NativeUI.java" target-dir="src/cn/com/agree/nativeui" /> </platform> </plugin></code></pre> <p> ， ， ， ， plugin.xml 。</p> <ul> <li>id： ， ， <code>cordova-plugin-nativeui</code>， plugman 。</li> <li>name： 。</li> <li>clobbers->target： module.exports ， js 。 ， ， ， 。plugman id <code>-</code> `.' 。 js-module， js-module clobbers。</li> <li>feature -> param - > value Native ， ， plugman NativeUI ， <code>cordova-plugin-nativeui.NativeUI</code>， ， ：<code>cn.com.agree.nativeui.NativeUI</code>。 。</li> <li>source-file -> target-dir <code>target-dir</code> ： <code>src/cn/com/agree/nativeui</code>， native ： ：<code>package cn.com.agree.nativeui;</code> </li> <li>platform -> config-file <code>uses-permission</code>， ：</li> </ul> <pre><code><config-file target="AndroidManifest.xml" parent="/*"> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> </config-file></code></pre> <h3><strong>3. </strong></h3> <p> android ：</p> <p><span class="img-wrap"></span></p> <p>cordova.js Android ， cordova lib Copy <code>platforms\android\assets\www\cordova.js</code> 。 <code>platforms\android\platform_www\cordova.js</code>。 cordova.js ， cordova.js 。</p> <p> ， src ，assets/www web 。www plugins js ，cordova_plugins.js plugins 。 </p> <p>cordova_plugins.js ：</p> <pre><code>cordova.define('cordova/plugin_list', function(require, exports, module) { module.exports = [ { "id": "cordova-plugin-nativeui.NativeUI", "file": "plugins/cordova-plugin-nativeui/www/NativeUI.js", "pluginId": "cordova-plugin-nativeui", "clobbers": [ "agree.nativeUI" ] }, ... ]; module.exports.metadata = // TOP OF METADATA { "cordova-plugin-nativeui": "0.0.1", ... }; // BOTTOM OF METADATA });</code></pre> <h2>Android </h2> <p>Android Cordova-Android， Javscript-to-native Android WebView 。 Android CordovaPlugin Java ， 。</p> <h3><strong> </strong></h3> <p> JavaScript cordova.exec ， ：</p> <pre><code>cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);</code></pre> <ul> <li> <code>function(winParam) {}</code>: </li> <li> <code>function(error) {}</code>: </li> <li> <code>service</code>: </li> <li> <code>action</code>: js </li> <li> <code>[args]</code>: js </li> </ul> <p> WebView Android ， action ， args 。 Java jar ， Cordova-Android res / xml / config.xml 。 plugin.xml ， ：</p> <pre><code><feature name="<service_name>"> <param name="android-package" value="<full_name_including_namespace>" /> </feature></code></pre> <h3><strong> </strong></h3> <p> WebView 。 ， JavaScript ， config.xml onload name <param> “true”。</p> <pre><code><feature name="Echo"> <param name="android-package" value="<full_name_including_namespace>" /> <param name="onload" value="true" /> </feature></code></pre> <p> initialize ：</p> <pre><code>@Override public void initialize(CordovaInterface cordova, CordovaWebView webView) { super.initialize(cordova, webView); // your init code here }</code></pre> <p> Android ， （onResume，onDestroy ） 。 ， ， onReset（） 。 WebView ， ， JavaScript。</p> <h3><strong> Android Java </strong></h3> <p> JavaScript ， Java config.xml ， Android Java Plugin ？ JavaScript exec execute 。 </p> <p> JavaScript WebView ; WebCore ， 。 ， Activity runOnUiThread 。</p> <p> UI ， WebCore ， <code>cordova.getThreadPool()</code> <code>Cordova ExecutorService</code> 。</p> <pre><code>... @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("toast")) { this.toast(args.getString(0)); return true; } return false; } /** * Builds and shows a native Android toast with given Strings * * @param message The message the toast should display */ private void toast(final String message) { final CordovaInterface cordova = this.cordova; if (message != null && message.length() > 0) { final int duration = Toast.LENGTH_SHORT; Runnable runnable = new Runnable() { public void run() { Toast toast = Toast.makeText(cordova.getActivity().getApplicationContext(), message, duration); toast.show(); } }; cordova.getActivity().runOnUiThread(runnable); } } ...</code></pre> <p>js ：</p> <pre><code>var exec = require('cordova/exec'); module.exports = { toast: function(message) { exec(null, null, 'NativeUI', 'toast', [message]); } }</code></pre> <p><code>callbackContext.success</code> JavaScript ，<code>callbackContext.error</code> JavaScript 。</p> <h3><strong> </strong></h3> <p> Android ， plugin.xml ：</p> <ul> <li> <framework /> （ ， ）。 Gradle 。 gson，android-support-v4 google-play-services 。</li> <li> <lib-file /> jar （ ， ）。 （ ， ） ， 。 ， ， 。 ，Cordova ， 。</li> </ul> <h3><strong>Android </strong></h3> <p>Android Intent ， 。 CordovaInterface ， Android Activity。 Android Intent 。 CordovaInterface Activity， Intent 。</p> <p> Cordova 2.0 ， ， ctx 。 ctx Context ， getContext() getActivity() 。</p> <blockquote> <p><strong> （Cordova-Android 5.0.0+）</strong></p> </blockquote> <p>Android 6.0 "Marshmallow" ， 。 ， Cordova-Android 5.0.0 。</p> <p> ， ， ：</p> <pre><code>cordova.requestPermission(CordovaPlugin plugin, int requestCode, String permission);</code></pre> <p> ， ：</p> <pre><code>public static final String READ = Manifest.permission.READ_CONTACTS;</code></pre> <p> requestCode ：</p> <pre><code>public static final int SEARCH_REQ_CODE = 0;</code></pre> <p> ， exec ， ：</p> <pre><code>if(cordova.hasPermission(READ)) { search(executeArgs); } else { getReadPermission(SEARCH_REQ_CODE); }</code></pre> <p> ， requestPermission：</p> <pre><code>protected void getReadPermission(int requestCode) { cordova.requestPermission(this, requestCode, READ); }</code></pre> <p> 。 ， onRequestPermissionResult ， 。 ：</p> <pre><code>public void onRequestPermissionResult(int requestCode, String[] permissions, int[] grantResults) throws JSONException { for(int r:grantResults) { if(r == PackageManager.PERMISSION_DENIED) { this.callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.ERROR, PERMISSION_DENIED_ERROR)); return; } } switch(requestCode) { case SEARCH_REQ_CODE: search(executeArgs); break; case SAVE_REQ_CODE: save(executeArgs); break; case REMOVE_REQ_CODE: remove(executeArgs); break; } }</code></pre> <p> switch ， requestCode， 。 ， ， 。</p> <p> ， ， Geolocation ：</p> <pre><code>String [] permissions = { Manifest.permission.ACCESS_COARSE_LOCATION, Manifest.permission.ACCESS_FINE_LOCATION };</code></pre> <p> ， ：</p> <pre><code>cordova.requestPermissions(this, 0, permissions);</code></pre> <p> 。 ， ， 。</p> <h3><strong> </strong></h3> <p> Cordova ， 。 ，Android 。 ，CordovaPlugin 。 ， Cordova ， 。 ， ， CallbackContext 。 CordovaPlugin ：</p> <pre><code>/** * Called when the Activity is being destroyed (e.g. if a plugin calls out to an * external Activity and the OS kills the CordovaActivity in the background). * The plugin should save its state in this method only if it is awaiting the * result of an external Activity and needs to preserve some information so as * to handle that result; onRestoreStateForActivityResult() will only be called * if the plugin is the recipient of an Activity result * * @return Bundle containing the state of the plugin or null if state does not * need to be saved */ public Bundle onSaveInstanceState() {} /** * Called when a plugin is the recipient of an Activity result after the * CordovaActivity has been destroyed. The Bundle will be the same as the one * the plugin returned in onSaveInstanceState() * * @param state Bundle containing the state of the plugin * @param callbackContext Replacement Context to return the plugin result to */ public void onRestoreStateForActivityResult(Bundle state, CallbackContext callbackContext) {}</code></pre> <h2> </h2> <p>cordova ， ， cordova App， cordova ， cordova ， 。 ， ， ， ， 。</p> <p> ， ， ， ， 。 ！</p> <p><span class="img-wrap"><a href="https://img. .com/image/info9/cb4de933a8fc4c5d9d16fa5b970deed1.jpg" target="_blank"><img alt="cordova ( ) —— cordova.js _ 1 " title="clipboard.png" src="https://img. .com/image/info9/cb4de933a8fc4c5d9d16fa5b970deed1.jpg" width="612" height="384" style="border:1px solid black;"></a></span></p> <p> ：https://zhaomenghuan.github.io/</p> </div> </div> </div> </div> <!--PC WAP --> <div id="SOHUCS" sid="1175703622198046720"></div> <script type="text/javascript" src="/views/front/js/chanyan.js">

• ASMシリーズ4は、Methodコンポーネントの ロジックを しています。 lijingyao8206 バイトコード jvmAOPダイナミックエージェントASM
• javaプログラミング -- クラス java クラス の クラス
• web.xmlエラー crabdave web.xml
• クラスのカスタマイズ javaand roid
• CSSクリアフローの4つの IT JavaScriptUI。css
• Cygwinはwindowsのjdk を います。 _wy_ jdkwindowscygwin
• linuxでMavenをインストールします まぜんlinuxインストール
• tomcatのhttps 、sylog-ng aichenglong tomcathttpはhttpsにジャンプしますsyslong-ng syslog

： ABCDEFGHIJKLMNOPQRSTUVWXYZその

で されます.