1. 程式人生 > >【cordova學習筆記02】自定義開發外掛,外掛集成了谷歌的RS232通訊操作的程式碼

【cordova學習筆記02】自定義開發外掛,外掛集成了谷歌的RS232通訊操作的程式碼

1、cordova開發的另外一個難點就在於如何自定義自己的外掛,將自己的原生Android程式碼抽離出來,做成外掛的形式整合到app。中。如何開發自定義外掛,請你先詳細地閱讀完這個網址:https://www.jianshu.com/p/02e17c392144裡面的內容。下面會以我開發RS232串列埠為例,去講解cordova外掛的自定義開發,什麼是RS232請自行百度。

2、自定義外掛開發,整合RS232串列埠通訊,讀取IC卡里面的唯一UUID。

A、首先安裝plumam命令列工具,npm install -g plugman。安裝完後到我cordova專案的根路徑下,使用plumam建立外掛的命令:plugman create --name serialPortPlugin --plugin_id com.running.serialport --plugin_version 1.0.0,會生成初始化外掛,如下圖:

cmd進入serialPortPlugin,執行plugman platform add --platform_name android,為外掛新增Android平臺

B、將我們相應的Android原生程式碼放入src/android裡面, 其中jni、jniLibs、android_serialport_api資料夾裡面的程式碼是谷歌開源RS232串列埠通訊程式碼。需要複製貼上進去。

C、配置plugin.xml,下面都備註得很清楚:

<?xml version='1.0' encoding='utf-8'?>
<!-- 修改id -->
<plugin xmlns:android="http://schemas.android.com/apk/res/android"
    id="cordova-plugin-serialport"
    version="1.0.0"
    xmlns="http://apache.org/cordova/ns/plugins/1.0">

    <name>serialPortPlugin</name>
    <js-module
        name="serialPortPlugin"
        src="www/serialPortPlugin.js">
        <clobbers target="cordova.plugins.SerialPortPlugin" />
    </js-module>
    <platform name="android">
        <config-file
            parent="/*"
            target="res/xml/config.xml">
            <feature name="serialPortPlugin">
                <param
                    name="android-package"
                    value="com.running.serialport.SerialPortPlugin" />
            </feature>
        </config-file>
        <config-file
            parent="/*"
            target="AndroidManifest.xml"></config-file>

        <!--src:java原始檔的路徑, target-dir:外掛安裝好後,原始檔的位置,要和上面的包名對應 ,下面類似 -->
        <source-file src="src/android/okhttp-3.2.0.jar" target-dir="libs"/>
        <source-file src="src/android/okio-1.6.0.jar" target-dir="libs"/>

        <source-file
            src="src/android/SerialPortPlugin.java"
            target-dir="src/com/running/serialport" />

        <!-- 串列埠類 -->
        <source-file
            src="src/android/android_serialport_api/SerialPort.java"
            target-dir="src/android_serialport_api" />
        <!-- 其他類 -->
        <source-file
            src="src/android/entity/KqInfor.java"
            target-dir="src/com/running/entity" />
        <source-file
            src="src/android/utils/ChangeTool.java"
            target-dir="src/com/running/utils" />
        <source-file
            src="src/android/utils/SerialPortUtils.java"
            target-dir="src/com/running/utils" />
        <source-file
            src="src/android/utils/SQLiteOpenHelperUtil.java"
            target-dir="src/com/running/utils" />


        <!-- jni類 -->
        <source-file src="src/jni/Android.mk" target-dir="libs/armeabi-v7a/"/>
        <source-file src="src/jni/Application.mk" target-dir="libs/armeabi-v7a/"/>
        <source-file src="src/jni/gen_SerialPort_h.sh" target-dir="libs/armeabi-v7a/"/>
        <source-file src="src/jni/SerialPort.c" target-dir="libs/armeabi-v7a/"/>
        <source-file src="src/jni/SerialPort.h" target-dir="libs/armeabi-v7a/"/>

        <source-file src="src/jniLibs/armeabi-v7a/libserial_port.so" target-dir="libs/armeabi-v7a/"/>
        <source-file src="src/jniLibs/armeabi/libserial_port.so" target-dir="libs/armeabi/"/>
        <source-file src="src/jniLibs/x86/libserial_port.so" target-dir="libs/x86/"/>

    </platform>
</plugin>

D、建立package.json檔案和修改package.json檔案

E、修改D:\cordovaProject\test\serialPortPlugin\www\serialPortPlugin.js,中的serialPortPlugin.js,這個js檔案是js和Android原生程式碼互動的橋樑。

F、安裝已經開發完成的外掛。cmd進入D:\cordovaProject\test\platforms\android,執行cordova plugin add D:\cordovaProject\test\serialPortPlugin,完成後就會見外掛加入到我們的Android專案裡面。

本專案還見資料傳輸到okhttp的jar包來上傳資料,因此,需要將它的包也放入src/android,對應路徑下,同時在plugin.xml裡面設定對應路徑。