cordova后台插件开发新手教程

news2024/11/25 10:40:55

typora-root-url: imags

cordova后台插件开发新手教程

预安装环境：JDK11、Android studios、nodo.js

一、环境搭建

1.安装Cordova

 npm install -g cordova

2.创建项目 cordova create

具体命令： cordova create 目录名包名项目名

执行结果终端：

D:\01work_file\05demo
λ  cordova create smartTest com.kemov.smartTest smartTest
Creating a new cordova project.

D:\01work_file\05demo
λ ls
smartTest/

D:\01work_file\05demo
λ cd smartTest\

D:\01work_file\05demo\smartTest  (com.kemov.smarttest@1.0.0)
λ ls
config.xml  package.json  www/

3.添加平台

D:\01work_file\05demo\smartTest  (com.kemov.smarttest@1.0.0)
λ cordova platform add android@^10.0.0
Using cordova-fetch for cordova-android@10.0.0
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.kemov.smartTest
        Name: smartTest
        Activity: MainActivity
        Android target: android-30
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@10.0.0
Discovered plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for android
Plugin doesn't support this project's cordova-android version. cordova-android: 10.0.0, failed version requirement: >=4.0.0 <10.0.0
Skipping 'cordova-plugin-whitelist' for android
Adding cordova-plugin-whitelist to package.json

D:\01work_file\05demo\smartTest  (com.kemov.smarttest@1.0.0)
λ ls
config.xml  node_modules/  package-lock.json  package.json  platforms/  plugins/  www/

4.通过AS软件打开android项目并编译APK

4.1 AS软件> File > open > 选择./platforms/android文件路径 > ok

4.2 等待gradle环境初始化完成 > Build> Build APK
在这里插入图片描述

二、后台插件开发及调试

1.自定义插件创建

D:\01work_file\05demo\smartTest  (com.kemov.smarttest@1.0.0)
λ plugman create --name SmartTestPlugin  --plugin_id com.kemov.smartTest  --plugin_version 1.0.0

D:\01work_file\05demo\smartTest  (com.kemov.smarttest@1.0.0)
λ ls 
SmartTestPlugin/  config.xml  node_modules/  package-lock.json  package.json  platforms/  plugins/  www/

D:\01work_file\05demo\smartTest\SmartTestPlugin
λ plugman platform add --platform_name android

D:\01work_file\05demo\smartTest\SmartTestPlugin
λ ls
plugin.xml  src/  www/

D:\01work_file\05demo\smartTest\SmartTestPlugin
λ npm init -yes
Wrote to D:\01work_file\05demo\smartTest\SmartTestPlugin\package.json:

{
  "name": "smarttestplugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

cordova plugin add SmartTestPlugin

在这里插入图片描述

2.后台调试

2.1 前端（html、js）按钮点击事件；

index.html

<button style="width: 100px; height: 50px; margin: 20px;" id="exportDocx">导出wordl</button>

js点击时间监听处理

 document.getElementById("exportDocx").addEventListener('click', function () {
		// Todu
        });

2.2 传递参数处理

简单数据接口直接代码定义，复杂的数据把数据的json写到txt中

 fetch('test/table.txt')
     .then(response => response.text())
     .then((data) => {
     	console.log("_wd111  1 " + data);
     	cordova.plugins.exportPlugin.exportDocx((data),
         (m) => {
            console.log("_wd callback sucsses" + m);
         },
         (e) => {
             console.error("_wd callback error " + e);
         });
     })
     .catch(error => console.log(error));

三、前后端联调

1.联调

1.1 后台提供逻辑代码的jar包

1.2 插件入口类

1.3 依赖配置，AndroidManifest.xml文件相关配置修改项

2.jar打包文件

编译后的插件文件打jar包（不报含插件入口类）

步骤：

编译apk
在终端中进入本项目 build/intermediates/javac/debug/classes 中
执行命令 jar -cvf class.jar com/kemov/smartTest/entry

D:\01work_file\gitworkspace\smartTestPlugin\smartTest\platforms\android\app\build\intermediates\javac\debug\classes (dev_1.0 -> origin)
λ pwd
D:\01work_file\gitworkspace\smartTestPlugin\smartTest\platforms\android\app\build\intermediates\javac\debug\classes

D:\01work_file\gitworkspace\smartTestPlugin\smartTest\platforms\android\app\build\intermediates\javac\debug\classes (dev_1.0 -> origin)
λ   jar -cvf  class.jar  com/kemov/smartTest/entry
已添加清单
正在添加: com/kemov/smartTest/entry/(输入 = 0) (输出 = 0)(存储了 0%)
正在添加: com/kemov/smartTest/entry/ExportCell.class(输入 = 2802) (输出 = 1039)(压缩了 62%)
正在添加: com/kemov/smartTest/entry/Table.class(输入 = 2588) (输出 = 968)(压缩了 62%)
正在添加: com/kemov/smartTest/entry/Task.class(输入 = 1924) (输出 = 733)(压缩了 61%)

D:\01work_file\gitworkspace\smartTestPlugin\smartTest\platforms\android\app\build\intermediates\javac\debug\classes (dev_1.0 -> origin)
λ ls
class.jar  com/

生成的 .jar文件可以用反编译器查看下

在这里插入图片描述

3.同步相关依赖

后台第三依赖在smartTest/platforms/android/app/build.gradle

dependencies {
    implementation fileTree(dir: 'libs', include: '*.jar')
    implementation "androidx.appcompat:appcompat:${cordovaConfig.ANDROIDX_APP_COMPAT_VERSION}"

    implementation 'org.apache.poi:poi-ooxml:5.2.3'
    implementation 'org.apache.poi:poi:5.2.3'
    implementation 'org.apache.poi:poi-scratchpad:5.2.3'
    implementation 'com.google.code.gson:gson:2.8.7'

    if (cordovaConfig.IS_GRADLE_PLUGIN_KOTLIN_ENABLED) {
        implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${cordovaConfig.KOTLIN_VERSION}"
    }

    // SUB-PROJECT DEPENDENCIES START
    implementation(project(path: ":CordovaLib"))
    // SUB-PROJECT DEPENDENCIES END
}