<dd id="bt93c"><center id="bt93c"></center></dd>
    1. <th id="bt93c"></th>
          1. <rp id="bt93c"><acronym id="bt93c"><u id="bt93c"></u></acronym></rp>

            自定義Cordova插件詳解

            小編:管理員 224閱讀 2022.09.13

            一、Cordova的基礎點

            在混合式應用中,我們通過現有的Cordova插件,可以輕松的在 H5 上調用手機native的功能,F有的Cordova插件能滿足平時大部分的開發需求,然而,有時候找不到合適的插件、或對找到的插件有不滿意的地方,那就要動手去做或改寫一個插件,這時候就要了解一些Cordova插件的相關知識。

            那Cordova插件的基礎要點是什么呢?其實就是把原生代碼調用方法映射為js的統一接口,供H5使用而已.

            Cordova 自定義插件的官方文檔

            二、觀察現有應用結構

            打開任意一個基于Cordova技術的hybird app的開發目錄,添加過平臺(android、ios等)和安裝過插件的話,你會發現結構大致是這樣子的:

            ├── platforms
            |    ├── android
            |    ├── ios
            |    └── ...
            ├── plugins
            |    ├── org.apache.cordova.device
            |    └── ...
            ├── config.xml
            └── www
            復制

            這里的 platforms 是我們應用支持的平臺目錄,plugins是我們安裝的插件目錄,config.xml 是應用的配置信息(應用名稱、描述等),www 是我們的 web 工程目錄。

            也就是說,如果我們創建一個新的插件并安裝,也會添加到plugins目錄中,同時修改其它文件信息。那下一步就來開始進行驗證。

            三、使用plugman開發Cordova插件

            一個獨立插件的目錄基本結構是這樣的:

            MyToast
            ├── src
            |    ├── android
            |    |    └── MyToast.java
            |    ├── ios
            |    └── ...
            ├── www
            |    └── MyToast.js
            └── plugin.xml
            復制

            src存放的是各平臺的原生代碼,plugin.xml為插件描述及配置文件,www是web工程目錄(其實主要就是MyToast.js這個js中間件),我們可以手動創建這幾個目錄及文件,然而這并不是一個好的方式,因為效率不高,推薦的方式是使用plumam。 1、首先安裝plumam命令行工具

            npm install -g plugman

            2、安裝完之后,創建plugin

            使用plumam創建插件的命令是:

            plugman create --name pluginName--plugin_id pluginID--plugin_version version[--path path] [--variable NAME=VALUE]

            參數說明:

            pluginName:插件名稱,如MyToast; pluginID:插件id, 如:org.demo.mytoast; version:版本號, 如:0.0.1; path:插件存放的絕對或相對路徑; variable NAME=VALUE:擴展參數,如說明或作者,如woodstream

            于是命令行中敲入以下代碼:plugman create --name MyToast --plugin_id org.demo.mytoast --plugin_version 0.0.1這樣將會在當前目錄創建一個MyToast插件,進入插件目錄,打開plugin.xml查看,注意以下內容及說明:

            plugin
            - id:插件唯一標識
            - version:版本號
            - js-module
                src:js中間件相對文件地址(www目錄下的那個js)
                name:模塊名稱
                clobbers/merges
                    target:H5通過它調用js中間件方法(ts調用方法的前綴)
            - platform
                name:對應平臺android | ios
                source-file
                    src:類名
                    tartget-dir:插件文件復制到到原生項目位置
                    feature
                         name:js中間件通過它調用原生方法(包名)
                    uses-permission:相關原生權限
            復制

            也就是說,我們可以寫這樣一個插件,不寫一句原生代碼,只是為了設置權限和拷貝文件。

            等你消化完plugin.xml文件后,敲入命令進入插件目錄:cd MyToast添加支持平臺plugman platform add --platform_name androidplugman platform add --platform_name ios這樣,就會分別創建src/android/MyToast.javasrc/ios/MyToast.m兩個文件,這里只演示android的代碼,所以打開MyToast.java觀察:

            public class MyToast extends CordovaPlugin {
            
              @Override
              public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
                if (action.equals("coolMethod")) {
                    String message = args.getString(0);
                    this.coolMethod(message, callbackContext);
                    return true;
                }
                return false;
              }
            
              private void coolMethod(String message, CallbackContext callbackContext) {
                if (message != null && message.length() > 0) {
                    callbackContext.success(message);
                } else {
                    callbackContext.error("Expected one non-empty string argument.");
                }
              }
            }
            復制

            其中execute是必須的方法,是和www目錄中的MyToast.js關聯打交道用的,至于MyToast.js和MyToast.java怎么關聯,是由Cordova解釋plugin.xml處理的,內部細節不需要知道,只需按方法格式編寫即可。CallbackContext為回調上下文,coolMethod為可選的默認生成的示例方法,一般里面就寫原生的代碼,我們把它改成我們想要的:showToast,然后補充基本的一些原生代碼,最后文件變成這樣:

            public class MyToast extends CordovaPlugin {
            
              @Override
              public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
                if (action.equals("showToast")) {
                    String message = args.getString(0);
                    this.showToast(message, callbackContext);
                    return true;
                }
                return false;
              }
            
              private void showToast(String message, CallbackContext callbackContext) {
                if (message != null && message.length() > 0) {
                    Activity activity = this.cordova.getActivity();
                    android.widget.Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();
                    callbackContext.success(message);
                } else {
                    callbackContext.error("Expected one non-empty string argument.");
                }
              }
            }
            復制

            然后再打開www/MyToast.js修改如下:

            //showToast為安裝后js調用的方法名,參數可以為任意多個
              exports.showToast = function(msg, success, error) {
                  //"showToast"為給MyToast.java判斷的action名
                  exec(success, error, "MyToast", "showToast", [msg]);
              };
            復制

            3、創建package.json文件 本來執行完上述步驟,一個插件就完成了的,但后來的Cordova版本要求添加一個package.json來管理插件,而plumam沒有給我們創建這樣一個文件,于是我們手動創建,借助npm init命令創建package.json。里面的參數從plugin.xml拿過來便是:

            {
             "name": "MyToast",
              "version": "0.0.1",
              "description": "demo",
              "cordova": {
                "id": "com.demo.mytoast",
                "platforms": [
                  "android"
                ]
              },
              "keywords": [],
              "author": "demo",
              "license": "MIT"
            }
            復制

            這樣一個插件就開發完成了。

            四、安裝已開發完成的插件

            如果沒有現成的項目,可以創建一個新的cordova項目來測試:cordova create hello com.example.hello HelloWorld然后像平常添加插件一樣,運行如下命令:(add 后面為插件所在本地或網絡路徑):cordova plugin add /Users/cordova/MyToast如果已有項目且是ionic項目,則命令前追加上ionic:ionic cordova plugin add /Users/cordova/MyToast

            在ionic2或以上使用時,打開任意一個ts文件,在頭部聲明如下:declare let cordova: any;然后調用即可:cordova.plugins.MyToast.showToast("hello"); //后兩個success, error參數省略不寫

            五、其他命令

            刪除插件:ionic cordova plugin remove XXXXX(你的plugin_id)查看已安裝插件ionic cordova plugin list

            關聯標簽:
            久久99久久99小草精品免费看

            <dd id="bt93c"><center id="bt93c"></center></dd>
            1. <th id="bt93c"></th>
                  1. <rp id="bt93c"><acronym id="bt93c"><u id="bt93c"></u></acronym></rp>