【フロントエンド】Cordovaカスタムプラグイン開発手順(Androidベース)

12650 ワード
Android 先端
前言
Cordovaの概要
Apache Cordovaはオープンソースのモバイル開発フレームワークです.標準的なwebテクノロジー-HTML 5、CSS 3、JavaScriptでプラットフォーム間開発を行うことができます.各プラットフォームでのアプリケーションの具体的な実行はカプセル化され、センサ、データ、ネットワーク状態など、標準的なAPIバインドに依存して各デバイスにアクセスする機能に依存する.
プロジェクトのため、Cordovaプラグインを独自に開発する必要があります.以下、ネット上の資料を調べてまとめます.
きほんかんきょう
まず基本的な環境を確保する必要があります.筆者の基本的な環境はこうです.
  • Windows 10 x64
  • npm v3.10.10
  • node v6.11.2
  • Android Studio 2.2.3

    • cordovaのインストール
    次にnpmを使用してcordovaをインストールします
    npm install -g cordova

    テスト項目の作成
    まずhelloプロジェクトを作成し、次のステップは公式サイトcordovaからのステップです.
    Appの作成
    cordova create hello com.example.hello HelloWorld

    プラットフォームの追加
    その後、すべての後続コマンドがプロジェクトディレクトリ(helloディレクトリ)で実行されます.
    cd hello

    Androidプラットフォームの追加
    cordova platform add android --save

    現在のプラットフォームの設定状況を確認します
    cordova platform ls

    Android Studioにプロジェクトをインポート
  • Android Studio
    • を開く
  • メニューバーの「File」->「New」->「Import Project」
    • を選択
  • 「...helloplatformsandroid」ディレクトリ
    • を選択
  • 導入完了
    • プラグインの開発
    plumanのインストール
    npm install -g plugman

    プラグインの作成
    プラグインを作成するコマンドパラメータは次のとおりです.
    plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
  • :プラグイン名
  • :プラグインid
  • :バージョン
  • :オプション.プラグインアイテム
    • を作成する絶対パスまたは相対パスのディレクトリ
  • variable NAME=VALUE:オプション.著者情報および関連記述
    • のような追加の記述
    次の例を示します.
    plugman create --name HelloPlugin --plugin_id hello-plugin --plugin_version 0.0.1

    上記の例を実行すると、現在のディレクトリの下にHelloPluginフォルダが生成されます.ディレクトリ構造は次のとおりです.
    │  plugin.xml
│
├─src
└─www
        HelloPlugin.js

    Javaの作成
    仕様に基づいてプラグインを開発する必要があります.次に、HelloPlugin/srcディレクトリの下にandroidフォルダを作成し、Hello.javaファイルを新規作成します.内容と以下の通りです.
    package com.hello.toast;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class HelloPlugin extends CordovaPlugin {
    private CallbackContext mCallbackContext;

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        this.mCallbackContext = callbackContext;
        if ("coolMethod".equals(action)) {
            String msg = args.getString(0);
            Toast.makeText(cordova.getActivity(), msg, Toast.LENGTH_SHORT).show();
            callbackContext.success("success");
            return true;
        }
        mCallbackContext.error("error");
        return false;
    }
}
    if ("coolMethod".equals(action))は、HelloPlugin\www\HelloPlugin.jsのうちのexports.coolMethodおよびexec()の方法の第4のパラメータに対応することに留意されたい.HelloPlugin JavaクラスはHelloPlugin.jsファイル名に対応します.
    つまり、JavaのcoolMethodまたはクラス名を変更したり、JSの対応する名前を変更したりする必要があります.そうしないと、Javaクラスやメソッドが見つからない可能性があります.HelloPlugin\www\HelloPlugin.jsの完全なコードは次のとおりです.
    cordova.define("hello-plugin.HelloPlugin", function(require, exports, module) {
var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'HelloPlugin', 'coolMethod', [arg0]);
};

});

    修正plugin.xmlHelloPlugin/plugin.xmlファイルを開き、ラベルに次のコードを追加します.
    
    ...

    "android">  
        <source-file src="src/android/HelloPlugin.java" target-dir="src/com/hello/toast"/>  

        "res/xml/config.xml" parent="/*">  
            "HelloPlugin">  
                "android-package" value="com.hello.toast.HelloPlugin"/>

    プラグインの追加
    あとでプラグインを追加してテストできます
    cordova plugin add HelloPlugin

    プラグインを削除する必要がある場合は、次の操作を行います.
    cordova plugin remove HelloPlugin

    Android Studioを見て、ファイルが追加されました.
    プラグインの呼び出しindex.htmlのどこかに次の文を挿入してテストします.index.htmlはプロジェクトの作成時に自動的に生成されます.
    <Button onclick="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show ToastButton>

    たとえば、次の場所に挿入します.
    ...

<body>
<div class="app">
    <h1>Apache Cordovah1>
    <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Devicep>
        <p class="event received">Device is Readyp>
    div>
    <Button onclick="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show ToastButton>
div>

<script type="text/javascript" src="cordova.js">script>
<script type="text/javascript" src="js/index.js">script>
body>

...

    ボタンをクリックすると、オリジナルのToastがポップアップされます.
    注意事項
    次のエラーが発生した場合
    "Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
                                                             ", source: file:///android_asset/www/index.html (47)

    解決策は、index.htmlの第1行を注釈することである.
    <html>
    <head>
        
    ...
html>

    参考資料
  • 最初のApp
    • を作成
    UNIX Shells by Example(Fourth Edition)読書ノート-2.Shellsプログラミング快速入門(一)のC ShellとTC Shell
    HTMLの各バージョンDTDタイプの紹介とフォーマット