App开发如何扩展和使用本地插件(Cordova plugin),基于完全开源免费的框架为例

WeX5移动开发云 发布于 2015/04/14 14:34
阅读 29K+
收藏 7

App开发尽量考虑国际上、业界主流的技术架构;这样,未来的扩展、升级、维护,也都不用太担心;而且,基于cordova这些主流技术,国内外可利用的现成资源会非常丰富。

本案例由全开源的WeX5应用框架综合提供; WeX5混合模式app开发,底层基于cordova/phonegap,所以开发本地插件只需要按照相应规范就可以。整个框架也好,插件也好,每行源代码都可自己修改,全免费,没有任何收费的地方。

主要内容:

一、 如何开发本地插件

二、 哪里有免费的插件资源

三、插件如何安装到WeX5

四、如何使用安装好的插件

五、安装好的插件的App作为模版App


一、 如何开发本地插件

在实际的项目开发中,需要用到 cordova 的插件,进行各个不同平台的辅助开发,我们可以通过 plugins.cordova.io 对现有插件的搜索,以及安装。

插件的安装和使用,详细可以通过查阅 Cordova 的官网文档 The Command-Line Interface .

但是更多的时候,我们需要开发属于我们自己的插件。通过查看官方文档 Plugin Development Guide,你会发现,坑爹啊,这文档怎么还是以前 2.x 的开发文档??自己在编写插件的过程中,花了不少时间,在这里讲一下如何开发属于自己的插件。

通过命令行创建 app 应用之后,你会发现目录结构是这样子的:

1
2
3
4
5
6
7
8
9
10
├── platforms
|    ├── android
|    ├── ios
|    ├── wp7
|    └── ...
├── plugins
|    ├── org.apache.cordova.device
|    └── ...
├── config.xml
└── www

这里的 platforms 是我们应用支持的平台目录,plugins 是我们安装的插件目录,config.xml 是应用的配置信息(应用名称、描述等),www 是我们的 web 工程目录。

我们知道,Cordova 3.x 的插件机制改变了,只需要通过简单的命令行即可安装和删除所需要的插件,而我们自己开发的插件,最终是要添加到 plugins 目录中的。

那么,就让一起开始,制作属于我们自己的插件 吧,这里以 ExtraInfo(获取 app 额外信息) 为例子,我们在当前目录下(当然可以放在别的目录下)创建 ExtraInfo 文件夹,先看下具体的目录结构:

1
2
3
4
5
6
7
8
9
ExtraInfo
├── src
|    ├── android
|    |    └── ExtraInfo.java
|    ├── ios
|    └── ...
├── www
|    └── ExtraInfo.js
└── plugin.xml

这里的 src 对应不同的平台,www 放我们的 javascript 文件,plugin.xml 是插件的配置文件。

先来看看 plugin.xml 的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xmlversion="1.0"encoding="utf-8"?>
<pluginid="cn.net.wenzhixin.cordova"version="0.0.1"
        xmlns=" http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android=" http://schemas.android.com/apk/res/android">
    <name>ExtraInfo</name>
    <description>Description</description>
    <js-modulename="ExtraInfo"src="www/ExtraInfo.js">
        <clobberstarget="cordova.plugins.ExtraInfo"/>
    </js-module>
    <platformname="android">
        <config-fileparent="/*"target="res/xml/config.xml">
            <featurename="ExtraInfo">
                <paramname="android-package"value="cn.net.wenzhixin.cordova.ExtraInfo"/>
            </feature>
        </config-file>
        <source-filesrc="src/android/ExtraInfo.java"target-dir="src/cn/net/wenzhixin/cordova"/>
    </platform>
</plugin>

有几个关键的字段需要解释下:

  • id: 插件的标识,即发布到 plugins.cordova.io 的 ID
  • name:插件的名称
  • description:描述信息
  • js-module:对应我们的 javascript 文件,src 属性指向 www/ExtraInfo.js
  • platform:支持的平台,这里仅仅用到了 android

	

这里是插件的配置信息,最后会添加到 res/xml/config.xml 文件中,并且将我们的 src/android/ExtraInfo.java,复制到 android 的 package 包中。 接下来,ExtraInfo.js 的内容很简单:

1
2
3
4
5
var exec = require('cordova/exec');
 
exports.getExtra = function(success, error) {
    exec(success, error,"ExtraInfo","getExtra", []);
};

用过 Nodejs 或者了解过 AMD、CMD 的话(当然,没了解过也没关系),一定会觉得很熟悉。简单的说,require 用于引入我们的类,exports 用于导出我们的方法。这里对外公开了 getExtra 方法,以便我们在 app 中可以用到。

最后看 ExtraInfo.java 的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
publicclassExtraInfoextendsCordovaPlugin {
  
    publicbooleanexecute(String action, JSONArray args, CallbackContext callbackContext)
            throwsJSONException {
        Activity activity =this.cordova.getActivity();
        if(action.equals("getExtra")) {
            Intent i = activity.getIntent();
            if(i.hasExtra(Intent.EXTRA_TEXT)) {
                callbackContext.success(i.getStringExtra(Intent.EXTRA_TEXT));
            }else{
                callbackContext.error("");
            }
            returntrue;
        }
        returnfalse;
    }
}

继承了 CordovaPlugin 类,并重写 execute 方法,使用 action 来判断我们在 javascript 中调用的方法名,成功的话调用callbackContext.success(message),失败调用 callbackContext.error(message) 方法,分别对应 javascript 文件中的success 和 error 回调函数。

当然,这里只用到 android 平台,其他的平台也是一样的,ios 使用 object-c、wp7 使用 c# 语言,例子见Plugin Development Guide

到了这里,我们的插件就编写完成了。可以通过下面的命令添加插件:

cordova plugin add ExtraInfo #目录名称,也可以是 git 的地址

查看我们的 plugins 目录,会发现在该目录下已经华丽丽地生成我们自己的插件 cn.net.wenzhixin.cordova 了。

对了,好像把最关键的事情给忘记了,这里貌似还没提到我们应该如何在 app 中使用自己的插件呢。前面提到说按照文档来坑爹了,是因为使用 window.getExtra,会报 getExtra is not defined 的错误。

通过查看生成的文件信息,可以知道,应该这样使用我们的插件:

1
2
3
4
5
6
7
8
9
document.addEventListener('deviceready', function() {
    var extraInfo = cordova.require('cn.net.wenzhixin.cordova.ExtraInfo');
  
    extraInfo.getExtra(function(message) {
        // alert(message);
    }, function(message) {
        // alert(message);
    });
});

最后,像平时的开发,觉得及时更新文档还是比较重要的,虽然自己花了不少时间,不过至少更加明白了 Cordova 插件的原理,同时也希望本文可以帮到你。

二、 哪里有免费的插件资源

cordova官方插件库:http://plugins.cordova.io/#/

github搜索:https://github.com

baidu、google搜索

三、插件如何安装到WeX5

这里以常用的条形码扫描为例介绍。

1. http://plugins.cordova.io/#/package/com.phonegap.plugins.barcodescanner下载好源代码,并把插件的目录名改为和id相同,这里是com.phonegap.plugins.barcodescanner。id可以打开源代码中的plugin.xml看,根节点plugin的id属性值就是。

2. 把插件目录复制到model/Native/plugins目录下

四、如何使用安装好的插件

自定义插件需要通过源代码模式使用,具体使用如下:

1. 在Native下新建App,选择原代码模式,在新建向导第二页,新建App时可选择,编辑App不能修改

2. 在新建向导选择插件的页面,去掉“自动选择使用到的Cordova插件”选项,选择新增名字为BarcodeScanner的插件,系统会把插件整合到自己新建的App中,该App已经具有对应插件的能力。名字BarcodeScanner是在plugin.xml中的name节点上定义。

3. 在需要使用插件的页面对应的js中,如下代码引用:

1
require("cordova!com.phonegap.plugins.barcodescanner");

再参考插件的文档,书写对应的js。对于barcodesacnner,代码如下:

1
2
3
4
5
6
7
8
9
10
11
cordova.plugins.barcodeScanner.scan(
  function(result) {
    alert("We got a barcode\n"+
    "Result: "+ result.text +"\n"+
    "Format: "+ result.format +"\n"+
    "Cancelled: "+ result.cancelled);
  },
  function(error) {
    alert("Scanning failed: "+ error);
  }
);

在.w对应的js中,对于barcodesanner,上面代码一般会写到某个组件的click事件上,而有的插件需要在页面初始化时执行,那可以写到model的onLoad事件中

4. 通过打包服务器打包生成App;由于新建的是源码模式,也可以自己把新建好的工程导入到ADT或者XCode中编译发布App。打包服务器安装和下载

五、安装好的插件的App作为模版App

Native/templates/normal/x5-std.apk.t  Android不选择增强型浏览器使用的App模版

Native/templates/normal/x5.apk.t          Adnroid选择增强型浏览器使用的App模版

Native/templates/normal/x5.ipa.t            IOS的App模版

可以把上面步骤四生成的App替换到上面对应位置,例如andoird的就直接用x5.apk.t的名字,那后续不通过服务器打包模式打包也将有上面集成的插件能力。

加载中
0
金盖山人
金盖山人
楼主 请抽时间对比一下WeX5、南京烽火,还有其他很多框架,有点晕,不知道孰优孰劣。
0
WeX5移动开发云
WeX5移动开发云

你好,这里说说WeX5的一些特点吧:

1)开源:WeX5完全开源,Apache开源,没有任何收费的地方,从底层到应用,每一行源代码都在开发者手上

2)标准:是基于业界已为主流、成熟的技术(如bootsrap、cordova等)之上进行深度性能优化,WeX5不单独创造自己的标准

  WeX5坚持用最好的轮子打造最优秀的车子,让大家放心赚取票子。

至于详细对比情况....算了;建议最好还是单独联系沟通,你懂的!


赵伟强
WeX5垃圾的要命。
0
a
ad-min
使用cordova plugin add Info 出错Error: Registry returned 404 for GET on 
https://registry.npmjs.org/Info是怎么回事
WeX5移动开发云
WeX5移动开发云
我转给相关技术看看;你也可以考虑在我们官网论坛寻求帮助
0
侯文斌
侯文斌
不知道有没有cordova-plugin调用JNI的例子?还是到了插件层就和JNI开发一样的?
侯文斌
侯文斌
回复 @007slm : 哦,已实验
0
007slm
插件层就是原生开发,插件只是把java /objective c 的api 包装成js的api给前端调用,所以插件调用jni和原生一样。
0
堤岸小跑
堤岸小跑
ionic 个人感觉最好 
0
q
qingyun102

你好,我这边创建cordova插件并且安装,但是js里面调用没有效果,下面打开alert语句没有执行,怎么回事呢?

document.addEventListener('deviceready', function() {

    var extraInfo = cordova.require('cn.net.wenzhixin.cordova.ExtraInfo');

    extraInfo.getExtra(function(message) {

        // alert(message);

    }, function(message) {

        // alert(message);

    });

});

个人建议:那些java代码最好把import也贴出来,对于不会java的朋友来说会好很多,谢谢!

返回顶部
顶部