跨平台应用开发进阶(五十四)cordova自定义插件

文章目录

    • 一、前言
    • 二、cordova 自定义插件
      • 2.1 cordova 安装
      • 2.2 cordova 创建 android 工程
      • 2.3 使用 cordova 官方提供的插件
      • 2.4 创建自定义插件
    • 三、拓展阅读

一、前言

在前期博文《ReactNative进阶(一):ReactNative 学习资料汇总》中,提到目前主流的移动跨平台技术方案大体可以分为三类,

  • 使用原生内置浏览器加载HTML5的Hybrid技术方案,采用此种方案的主要有CordovaIonic微信小程序
  • 使用JavaScript语言进行开发,然后使用原生组件进行渲染,采用此方案的主要有React NativeWeex轻快应用
  • 使用自带渲染引擎自带原生组件来实现跨平台,采用此种方案的主要是Flutter

二、cordova 自定义插件

注意⚠️:存放自定义cordova插件目录不能有空格可能会报错!

2.1 cordova 安装

前提条件:已安装node.js
安装cordova使用node.jsnpm工具。打开控制台输入

npm install -g cordova

-g是全局安装cordova。安装完成后就可以在命令行使用cordova命令查看版本信息。

cordova -v

安装plugman
cordova需要用plugman来创建自定义插件。

npm install -g plugman

2.2 cordova 创建 android 工程

  1. 创建cordova工程
    首先在电脑中创建一个cordova工程的目录,然后进入到创建的目录里。之后就可以开始创建cordova工程,下面是创建工程的代码和实例图。
cordova create demo com.lmr.android

其中,

  • demo:工程名
  • com.lmr.android: 包名

创建插件
创建成功后的目录:

在这里插入图片描述
2. 生成 android 工程
先进入到刚刚创建的cordova目录中,然后开始创建android工程。

cordova platform add android

android --> 创建的平台名也可以是iOS等。

下图是创建成功的情况,失败的原因有可能是 android 开发环境没有配好。

在这里插入图片描述

生成之后开始导入到android studio中:

第一步:选择打开本地已有的android工程。

第二步:找到刚刚创建好的android工程导入。

导入之后目录如下:

在这里插入图片描述
至此就已经把cordova插件开头的部分创建好了。

2.3 使用 cordova 官方提供的插件

首先进入到创建好的android工程目录下,然后再进行添加插件操作:

cordova plugin add cordova-plugin-camera

应用 cordova plugin list 命令查看cordova插件列表。

若误添加插件,可通过 cordova plugin remove cordova-plugin-camera 删除已安装插件。

添加成功后的Android目录变化如下:

在这里插入图片描述

使用增加的插件
可以在官网查到 cordova官网。

使用插件的位置,在Android工程下找到index.htmlindex.js这两个文件。

使用位置
index.html文件中添加一个测试按钮。

<button id="test">test</button>

在index.js文件中添加:

//前面的test是之前那个button的按钮,后面的test是方法名,给按钮注册点击事件
document.getElementById("test").addEventListener("click",test);
//点击事件绑定的方法
function test(){//调用添加的camera插件// onSuccess:是调用成功的返回事件;onFail:是调用失败的返回事件navigator.camera.getPicture(onSuccess,onFail);
}
//成功的返回事件
function onSuccess() {console.log("Camera cleanup success.")
}
//失败的返回事件
function onFail(message) {alert('Failed because: ' + message);
}

然后运行起来项目。

2.4 创建自定义插件

注意⚠️:创建插件是先cd到你要创建的目录下,存放自定义cordova插件目录不能有中文和空格可能会报错!

先在电脑上创建一个cordova插件的目录,然后跳转到该目录,开始创建cordova插件。

创建自定义插件

plugman create --name toast-plugin --plugin_id toast-plugin --plugin_version 1.0.0
  • --name toast-plugin : 插件名

  • --plugin_id toast-plugin : 插件ID

  • --plugin_version 1.0.0 : 插件版本号

编写ToastDemo.java用于被调用
可以在刚刚创建的Android工程下面编写这个代码,具体代码如下:

execute方法是插件被调用时,会把操作和参数以及回调传递过来。

package com.shq1874009.android;import android.widget.Toast;import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONException;/*** ToastDemo** @author shq1874009* @date 2028-08-19*/
public class ToastDemo extends CordovaPlugin {@Overridepublic boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {if ("show".equals(action)){// 获取activity和context --> cordova.getActivity()和cordova.getContext()Toast.makeText(cordova.getContext(),args.getString(0),Toast.LENGTH_SHORT).show();return true;}return false;}
}

把这个文件复制到刚刚生成的插件目录下。

修改plugin.xml,如下:

<?xml version='1.0' encoding='utf-8'?>
<plugin id="toast-demo-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"><name>toast-demo-plugin</name><js-module name="ToastShow" src="www/toast-demo-plugin.js"><clobbers target="ToastShow" /></js-module><!--添加Android平台  --><platform name="android"><config-file target="res/xml/config.xml" parent="/*">  <!-- JS调用时的名字 --><feature name="ToastShow">  <!-- value:的值是对应的插件中ToastDemo.java存放的路径 --> <param name="android-package" value="com.shq1874009.android.ToastDemo"/></feature>  </config-file>  <!-- src:是插件里存放对应.java的路径, target-dir:安装插件时把.java文件存放的位置,要和上面的value路径对应 --><source-file src="src/android/ToastDemo.java" target-dir="src/com/shq1874009/android" /></platform> 
</plugin>

编辑www目录下的toast-demo-plugin.js文件
打开后是这样的:

var exec = require('cordova/exec');exports.coolMethod = function (arg0, success, error) {exec(success, error, 'toast-plugin', 'coolMethod', [arg0]);
};

修改为

var exec = require('cordova/exec');// ToastShow: 是plugin.xml文件中的feature标签 name属性
// show:是js中调用的方法名
// [arg0]: 表示一个参数,[arg0,arg1]:表示两个参数
exports.show = function (arg0, success, error) {exec(success, error, 'ToastShow', 'show', [arg0]);
};

初始化插件
进入到插件目录,初始化插件

npm init

效果图如下,输入信息时有括号的按照括号里面的输入,没有的可以跳过。

上面基本上就完成了一个简单的自定义插件的制作,接下来把插件添加到之前创建的Android工程中测试,制作是否成功。

添加的方法和上面一样,先进入到platforms目录下

然后输入

// 插件的本地目录
cordova plugin add D:\CordovaPlugin\plugins\toast-plugin

添加插件
然后在Android studio中调用测试。

ToastShow.show("123456");

三、拓展阅读

  • 《ReactNative进阶(一):ReactNative 学习资料汇总》
  • 官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/838562.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++基础与函数解析 | 函数的声明与定义 | 函数调用 | 函数详解 | 函数重载 | 重载解析 | 递归函数 | 内联函数 | 函数指针

文章目录 一、函数基础1.基本函数定义2.函数的声明与定义3.函数调用 二、函数详解1.参数2.函数体3.返回类型 三、函数重载与重载解析1.函数重载2.重载解析 四、函数相关的其他内容1.递归函数2.内联函数3.constexpr函数&#xff08;C11起&#xff09;4.consteval 函数 (C20 起 )…

Redis - hiredis源码安装和接口使用介绍

一、hiredis源码安装说明 本文创作基于 hiredisv1.2.0版本 1.简介 hiredis是一个用于与Redis交互的C语言客户端库。它提供了一组简单易用的API&#xff0c;使开发人员可以轻松地连接到Redis服务器&#xff0c;并执行各种操作&#xff0c;如设置和获取键值对、执行命令、订阅和…

C语言 | Leetcode C语言题解之第92题反转链表II

题目&#xff1a; 题解&#xff1a; struct ListNode *reverseBetween(struct ListNode *head, int left, int right) {// 因为头节点有可能发生变化&#xff0c;使用虚拟头节点可以避免复杂的分类讨论struct ListNode *dummyNode malloc(sizeof(struct ListNode));dummyNode…

案例实践 | 招商局集团基于长安链的双循环航运贸易应用

案例名称-招商局双循环航运贸易联盟链 ■ 建设单位 招商局集团 ■ 用户群体 货主企业、物流企业、基础设施运营商等各参与主体 ■ 应用成效 已赋能产业链上下游超1.2万家中小微企业&#xff0c;累计提供普惠金融超830亿元 案例背景 作为全球贸易大国&#xff0c;我国约…

uniapp外部scss文件使用scss语法不生效.

项目场景&#xff1a; 页面的样式重复我想提取出来作为公共样式 新建scss文件&#xff0c;然后引入&#xff0c;结果样式不生效 问题描述&#xff1a; uniapp官网示例引入css的方法 /* 绝对路径 */ import url(/common/uni.css); import url(/common/uni.css); /* 相对路径 …

风电功率预测 | 基于CNN卷积神经网络的风电功率预测(附matlab完整源码)

风电功率预测 风电功率预测完整代码风电功率预测 基于卷积神经网络(Convolutional Neural Network, CNN)的风电功率预测可以通过以下步骤实现: 数据准备:收集与风电场发电功率相关的数据,包括风速、风向、温度、湿度等气象数据以及风电场的历史功率数据。 数据预处理:对…

Cadence 16.6 绘制PCB封装时总是卡死的解决方法

Cadence 16.6 绘制PCB封装时总是卡死的解决方法 在用Cadence 16.6 PCB Editor绘制PCB封装时候&#xff0c;绘制一步卡死一步&#xff0c;不知道怎么回事儿&#xff0c;在咨询公司IT后&#xff0c;发现是WIN系统自带输入法的某些热键与PCB Editor有冲突&#xff0c;导致卡死。 …

Android视频开发入门指南

文章目录 1. 概述2. 视频播放与控制2.1 VideoView2.2 MediaPlayer 3. 视频录制与处理4. 视频编解码与格式转换4.1 MediaCodec4.2 FFmpeg 5. 视频流媒体与直播6. 进阶学习6.1 自定义视频播放器6.2 视频编解码6.3 视频流媒体和直播6.4 视频AI 7. 实践项目8. 结语 现在&#xff0c…

系统思考—团队学习

结束昨日435期JSTO“探索学习的新视界&#xff1a;硬核工具分享”&#xff0c;有伙伴分享的提升效率的AI工具&#xff0c;也有自我发现团队问题解决的工具&#xff0c;伙伴们都在各自的领域实践、吸收、反馈、复盘。这次的团队学习不仅是知识的传递&#xff0c;更是一场脑力激荡…

Flutter 中的 Drawer 小部件:全面指南

Flutter 中的 Drawer 小部件&#xff1a;全面指南 在移动应用设计中&#xff0c;Drawer 是一种常见的导航组件&#xff0c;它提供了一种从屏幕边缘滑出菜单的方式&#xff0c;让用户可以快速切换应用的不同部分。在 Flutter 中&#xff0c;Drawer 小部件实现了这一功能&#x…

线性系统(二)

线性系统&#xff08;二&#xff09; 1.直观理解线性方程组结构2. 不同解的结论3. 更一般的高斯-约旦消元法4.齐次线性方程组 链接: 线性系统&#xff08;一&#xff09; 1.直观理解线性方程组结构 长这样&#xff0c;方程就有解&#xff0c;即相交坐标。 长这样&#xff0c;…

LLAMA-Factory微调chatglm3-6b出现KeyError: ‘instruction‘错误

之前我也遇到过这样的错误就是在LLAMA-Factory微调chatglm3-6b时报错KeyError: ‘instruction‘。那时候是因为数据现存在少部分格式不同&#xff0c;这才导致KeyError: instruction错误。 但是候来又遇到了KeyError: ‘instruction‘&#xff0c;但这次没有格式不同的问题。 …

探测器 烟尘水汽 笔记

目录 探测器穿透水汽 1. 毫米波雷达 2. 红外摄像机 3. LIDAR&#xff08;光检测与测距&#xff09; 4. 热成像仪 5. 超声波传感器 探测器穿透烟尘 探测器穿透水汽 能穿透水汽的探测设备主要包括使用特定波段的雷达和红外技术的设备。这些技术能有效应对由雾、雨、水汽等…

[论文笔记]Corrective Retrieval Augmented Generation

引言 今天带来论文Corrective Retrieval Augmented Generation的笔记&#xff0c;这是一篇优化RAG的工作。 大型语言模型(LLMs) inevitable(不可避免)会出现幻觉&#xff0c;因为生成的文本的准确性不能仅仅由其参数化知识来确保。尽管检索增强生成(RAG)是LLMs的一个可行补充…

Kibana使用

一、什么是Kibana   Kibana 是一个开源的分析和可视化平台&#xff0c;Kibana 提供搜索、查看和与存储在 Elasticsearch 索引中的数据进行交互的功能。开发者或运维人员可以轻松地执行高级数据分析&#xff0c;并在各种图表、表格和地图中可视化数据。 Kibana使用&#xff1a…

Jenkins 忘记登录密码怎么办

在安装Jenkins中遇到忘记登录密码该怎么呢&#xff1f;下面是一个解决办法 1. 先停止jenkins服务 我是用tomcat启动的jenkis 2. 找到config.yaml文件 find / -name config.xml命令执行后找到如下结果&#xff1a; /root/.jenkins/config.xml /root/.jenkins/users/admin_839…

scanf读取标准输入

内容 scanf函数的原理 多种数据类型混合输入 常用的数据输入/输出函数 程序员可以给程序输入数据&#xff0c;程序处理后会返回一个输出。C语言通过函数库读取标准输入&#xff0c;然后通过对应函数处理将结果打印到屏幕上&#xff0c;printf函数可以将结果打印到屏幕上。下…

Java项目:基于ssm框架实现的家政服务网站管理系统分前后台(B/S架构+源码+数据库+毕业论文+答辩PPT)

一、项目简介 本项目是一套基于ssm框架实现的家政服务网站管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 二、技术实现 jdk版本&#xff1a;1.…

【jest 运行顺序之 beforeEach/beforeAll】

beforeEach()函数用于在每个测试运行之前运行一段代码。它允许我们在每个测试之前设置共享的测试环境或变量。这样可以确保每个测试都在相同的环境下开始。 beforeAll()函数在所有测试之前只运行一次&#xff0c;所以上下文会有影响。 同理afterEach&#xff0c;afterAll&…

半自动标注(使用自己的分割或检测模型推理完得到的矩阵再生成json文件)

前言 都知道标注很麻烦、很累&#xff0c;不然先训练一批&#xff0c;然后推理得到它的掩码图&#xff0c;先生成自动标注&#xff0c;再人工手动修改也许会快很多 半自动标注代码 这是我自己写的&#xff0c;是labelme的格式&#xff0c;大家想要修改成自己的json格式可以修…