第一个cordova的插件(用Toast+html实现helloWord)

最新推荐文章于 2023-01-06 10:48:17 发布

旭日0东升

最新推荐文章于 2023-01-06 10:48:17 发布

阅读量1.7k

点赞数

分类专栏： cordova 移动开发文章标签： cordova plugin

本文链接：https://blog.csdn.net/qq_15996553/article/details/52639838

版权

cordova 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

移动开发

1 篇文章 0 订阅

订阅专栏

本文介绍了如何从零开始创建一个Cordova插件，通过实现一个简单的Toast功能并结合HTML，展示了一个Cordova应用的基本流程。首先，安装Node.js和Cordova，接着创建项目并添加Android平台支持。在项目中编写Java代码，更新配置文件，最后在index.html中添加HTML代码，并在Android设备或模拟器上运行验证结果。

摘要由CSDN通过智能技术生成

实习中用到cordova的插件,闲来无事就研究下cordova的实现过程,作为一名菜鸟,欢迎大家的指点.大神勿喷.废话到此为止.进入正题:

一:cordova的安装与使用:

安装node.JS,(我个人感觉我们会用到里面的npm管理器.)

原因大家可以参考:http://www.zhihu.com/question/49709583

下载地址:https://nodejs.org/dist/v6.6.0/node-v6.6.0-x86.msi 或者主页:https://nodejs.org/en/

傻瓜式的安装过程就不放图片了.

2:安装cordova

用win+R调出<运行>,然后输入cmd运行;如下图:

然后,用命令行将目录切换到刚才nodeJS的安装路径下,如下图:

然后输入:npm install -g cordova

拿个小板凳坐等安装完成.

************************************************************华丽的分界线*********************************************************************

在上面我们完成完成cordova的安装,当然,他还需要jre,android-sdk的支持,大家可以自行百度.如果不会方法,大家可以自行百度..我们正式开始第一个plugin.

1.创建一个cordova的项目.用cmd命令行将路径切换到我们的工作路径:(再说句废话,看安装的环境,出现下图类似内容的的说明安装成功)

,切换我们的工作路径:并且创建我们的cordova的项目

指令样式: cordova create fristPlugin com.plugin fristPlugin

指令说明: cordova create <文件夹名> <包名> <app名>;

之后你如图所示:

说明:

hooks：存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build。没用过，不展开了。

platforms：平台目录，各自的平台代码就放在这里，可以放一下平台专属的代码，现在这个目录应该是空的，后面会介绍如何创建平台。

plugins：插件目录，安装的插件会放在这里。后面会有专门的文章介绍开发插件。

www：最重要的目录，存放项目主题的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件。

config.xml：主要是cordova的一些配置，比如：项目使用了哪些插件、应用图标icon和启动页面SplashScreen，修改app的版本，名字等信息，还有平台的配置

2.添加android平台的支持

先将cmd的路径切换到我们的的项目下 cd fristPlugin

然后输入:cordova platform add android --save-dev

这事表示我们android的环境已经搭建好了,当然成功的前提我们要有android-sdk和java-home的环境变量

3. 然后编译我们的项目 : cordova build android

然后我们在项目的plugin就可以看到android的文件夹.我们用android studio打开.终端(cmd)就可以关掉了

如图.表示我们已经完成android的编译

在android studio中打开我android的路径我的是:E:\WorkSpace\cordova\firstPlugin\platforms\android

打开后如图所示

3,我们fristPlugin的java目录下创建一个类FirstPluginActivity;,

在类中输入:

package com.jason.plugin;

import android.content.Context;
import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;

/**
 * Created by yangboxin on 2016/9/23.
 */
public class FirstPluginActivity extends CordovaPlugin{
    public boolean execute(String action , JSONArray args, CallbackContext callbackContext ){
        /*显示一个提示语*/
        Context Activity = this.cordova.getActivity().getApplicationContext();
        Toast.makeText(Activity, "你好！世界！", Toast.LENGTH_LONG).show();
        /*显示一个提示语*/

        return true;
    }
}

4.我们打开res下的config.xml的文件.在<widget></widget>添加.

 <feature name="PlugHelloWorld">
        <param name="android-package" value="com.jason.plugin.FirstPluginActivity" />
    </feature>

(如图)

,最后

打开arrests的www目录下的index.html用如下代码替换:

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>Hello World</title>
</head>
<script>
   function a1(){
            cordova.exec(null,null,"PlugHelloWorld",null,[]);
   }
</script>
<body>
<div class="app">
    <h1>Apache Cordova</h1>
    <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
        <input type="button" value="点击我测试插件运行效果！" οnclick="javascript:a1()"/>
    </div>
</div>
</body>
</html>

然后我们可以将其部署到手机或者模拟器上运行结果如图所示:

就这样,最简单的cordova的插件就实现了.原理今天不想写了.有机会在写.