cordova后台插件开发新手教程


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
}

四、常见问题

**问题1:**第三方poi jar包与sdk最小支持版本26

**处理: **在cdv-gradle-config.json修改最小sdk版本配置 "MIN_SDK_VERSION": 26,

android版本权限问题由一开始的静态权限,后续是动态权限申请。

五、附录

1.cordova版本,Android VersionLibrary & Tooling Version版本适配

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

2.Android Gradle Plugin与Gradle版本、JDK版本对应关系

oid版本权限问题由一开始的静态权限,后续是动态权限申请。

五、附录

1.cordova版本,Android VersionLibrary & Tooling Version版本适配

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

2.Android Gradle Plugin与Gradle版本、JDK版本对应关系

https://blog.csdn.net/qq_42690281/article/details/131643663

相关推荐
m0_689618282 小时前
水凝胶发生器,不对称设计妙,医电应用前景广
笔记
Ace'2 小时前
每日一题&&学习笔记
笔记·学习
挥剑决浮云 -2 小时前
Linux 之 安装软件、GCC编译器、Linux 操作系统基础
linux·服务器·c语言·c++·经验分享·笔记
新晓·故知3 小时前
<基于递归实现线索二叉树的构造及遍历算法探讨>
数据结构·经验分享·笔记·算法·链表
魔理沙偷走了BUG4 小时前
【数学分析笔记】第4章第4节 复合函数求导法则及其应用(3)
笔记·数学分析
NuyoahC5 小时前
算法笔记(十一)——优先级队列(堆)
c++·笔记·算法·优先级队列
这可就有点麻烦了6 小时前
强化学习笔记之【TD3算法】
linux·笔记·算法·机器学习
Ljubim.te8 小时前
软件设计师——数据结构
数据结构·笔记
speop10 小时前
【笔记】I/O总结王道强化视频笔记
笔记·音视频