cordova开发自定义的插件

Posted 2020-07-22 Tony0571

1.环境搭建 （ios）   andriod(http://www.wenzhixin.net.cn/2014/03/20/cordova_my_plugin)

cordova插件开发前需要安装一些软件和配置环境

1.1 node.js环境搭建

到node.js官网(https://nodejs.org/)下载安装就好 ， 或者命令行  用homebrew 也很方便；百度一堆资料

 

1.2 cordova 的安装

在窗口输入下面命令全局安装cordova

npm install -g cordova

百度一堆资料

 

2.创建第一个应用

创建的命令是cordova create

列如：

cordova create hello com.cool.hello HelloWorld

 

 

• 第一个参数hello表示在工程目录中创建一个 hello 的文件夹
• 第二个参数com.cool.hello表示包名（反向域名），用于标志不同的 app
• 第三个参数HelloWorld表示项目的名称，可以在 config.xml 文件中修改

 

3.添加平台

3.1 进入创建的项目目录 

cd hello

3.2 查看已有的平台

 

cordova platforms list

3.3添加所需要的平台  

cordova platform add ios

 

如果想移除已经添加的平台的话 cordova platform remove ios 或者cordova platform rm ios

 

4.编译项目

编译项目命令

cordova build ios 

 

6.插件开发

前面说了这么多全都是准备工作，接下来是插件的具体开发过程

6.1 pluman的安装

npm install -g plugman

如果permission denied  （try:  sudo npm install -g plugman）

6.2 plugman安装完之后就可以创建一个插件了cordova plugin

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]

参数:
pluginName: 插件名字
pluginID: 插件id, egg : coolPlugin 
oversion: 版本, egg : 0.0.1
directory:一个绝对或相对路径的目录，该目录将创建插件项目
variable NAME=VALUE: 额外的描述，如作者信息和相关描述

egg : plugman create --name CoolPlugin --plugin_id coolPlugin --plugin_version 0.0.1 

 

生成的插件的目录如下： (这里复制 andriod的例子 )

 

但是遵循规范的话，一般在src目录下新建android目录，然后在android目录下新建类，如下图

 

 

HelloPlugin.js和plugin.xml的解释可以参考http://blog.csdn.net/itcatface/article/details/50520301，这边博文解释的非常详细

其中HelloPlugin.js和plugin.xml的相关配置如下

 

 

a. plugin.xml的配置

 

[html] view plain copy

 

 

1. <?xml version=‘1.0‘ encoding=‘utf-8‘?>  
2. <plugin id="coolPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <name>CoolPlugin</name>  
4.     <js-module name="CoolPlugin" src="www/CoolPlugin.js">  
5.         <clobbers target="cool.toast" />  
6.     </js-module>  
7.     <!-- android -->  
8.     <platform name="android">  
9.         <config-file target="res/xml/config.xml" parent="/*">  
10.             <feature name="CoolToast">  
11.                 <param name="android-package" value="com.cool.toast.ShowToast"/>  
12.             </feature>  
13.         </config-file>  
14.   
15.   
16.         <source-file src="src/android/ShowToast.java" target-dir="src/com/cool/toast" />  
17.   
18.   
19.         <config-file target="AndroidManifest.xml" parent="/*">    
20.             <uses-permission android:name="android.permission.READ_PHONE_STATE" />    
21.         </config-file>   
22.         <config-file target="AndroidManifest.xml" parent="/manifest/application">  
23.       
24.         <activity android:name="com.example.hello.TestActivity" />  
25.         </config-file>  
26.   
27.   
28.         <source-file src="src/android/TestActivity.java" target-dir="src/com/example/hello" />  
29.   
30.   
31.         <source-file src="src/android/layout/activity_text.xml" target-dir="res/layout" />  
32.     </platform>  
33. </plugin>  

 

对于plugin.xml的下面这几行配置有疑问的话可以参考http://blog.csdn.net/u013598660/article/details/50065937，里面讲的很详细

 

[html] view plain copy

 

 

1. <source-file src="src/android/TestActivity.java" target-dir="src/com/example/hello" />  
2. <config-file target="AndroidManifest.xml" parent="/*">    
3.             <uses-permission android:name="android.permission.READ_PHONE_STATE" />    
4.         </config-file>   

 

 

    b.HelloPlugin.js的配置

 

 

[javascript] view plain copy

 

 

1. var exec = require(‘cordova/exec‘);  
2. var myFunc = function(){};  
3.   
4.   
5. // arg1：成功回调  
6. // arg2：失败回调  
7. // arg3：将要调用类配置的标识  
8. // arg4：调用的原生方法名  
9. // arg5：参数，json格式  
10. myFunc.prototype.showToast=function(success, error) {  
11.     exec(success, error, "CoolToast", "showToast", []);  
12. };  
13.   
14.   
15. myFunc.prototype.showshowToast=function(text, lenth,success, error) {  
16.     exec(success, error, "CoolToast", "showshowToast", [text, lenth]);  
17. };  
18. myFunc.prototype.openActivity=function() {  
19.     exec(null, null, "CoolToast", "openActivity", []);  
20. };  
21. var showt = new myFunc();  
22. module.exports = showt;  

 

 

c 最后还有一个java类

里面的哪个TestActivity这个类是我测试用的，这里忽悠就好

 

 

[java] view plain copy

 

 

1. package com.cool.toast;  
2.   
3. import org.apache.cordova.CallbackContext;  
4. import org.apache.cordova.CordovaPlugin;  
5. import org.json.JSONArray;  
6. import org.json.JSONException;  
7. import com.example.hello.TestActivity;  
8. import android.content.Intent;  
9. import android.widget.Toast;  
10.   
11. public class ShowToast extends CordovaPlugin {  
12.   
13. @Override  
14. public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {  
15. // TODO Auto-generated method stub  
16. if("showToast".equals(action)){  
17. Toast.makeText(cordova.getActivity(), "show...", Toast.LENGTH_SHORT).show();  
18. callbackContext.success("success");  
19. return true;  
20. }else if("showshowToast".equals(action)){  
21. String str = args.getString(0);  
22. int len = args.getInt(1);  
23.   
24. if(len == 0){  
25. Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_SHORT).show();  
26. callbackContext.success("success" + str);  
27. return true;  
28. }else{  
29. Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_LONG).show();  
30. callbackContext.success("success" + str);  
31. return true;  
32. }  
33. }else if("openActivity".equals(action)){  
34. openActivity();  
35. callbackContext.success("success");  
36. return true;  
37. }  
38.  callbackContext.error("error");  
39.         return false;   
40. }  
41.   
42. private void openActivity() {  
43. Intent intent = new Intent(cordova.getActivity(),TestActivity.class);  
44. cordova.getActivity().startActivity(intent);  
45. }  
46.   
47. }  

 

6.3插件的安装

我的插件所在的路径是F:\CoolPlugin

首先切换到最初创建的hello目录   cd hello

执行插件安装命令 cordova plugin add F:\CoolPlugin  

执行完之后你就发现插件已经安装上去了

如果你想卸载插件的话，执行cordova plugin remove  你的plugin_id

egg:cordova plugin remove  coolPlugin

 

6.4插件的使用

 

 

[javascript] view plain copy

 

 

1. cool.toast.showToast();  
2.   cool.toast.showshowToast("hello",0, function(msg) {  
3.                 alert(msg);  
4.             }, function(msg) {  
5.                 alert(msg);  
6.             });  
7.   
8. cool.toast.openActivity();  

 

 

在F:\hello\platforms\android\assets\www下的index.html的中

 

egg:

 

[html] view plain copy

 

 

1. <!DOCTYPE html>  
2. <html>  
3.     <head>  
4.   
5.   
6.         <meta http-equiv="Content-Security-Policy" content="default-src ‘self‘ data: gap: https://ssl.gstatic.com ‘unsafe-eval‘; style-src ‘self‘ ‘unsafe-inline‘; media-src *">  
7.         <meta name="format-detection" content="telephone=no">  
8.         <meta name="msapplication-tap-highlight" content="no">  
9.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">  
10.         <link rel="stylesheet" type="text/css" href="css/index.css">  
11.         <title>Hello World</title>  
12.         <script type="text/javascript" charset="utf-8">        
13.          // Wait for device API libraries to load        
14.         //        
15.         document.addEventListener("deviceready", onDeviceReady, false);        
16.         function click1(){  
17.             cool.toast.showToast();  
18.         }  
19.         function click2(){  
20.            cool.toast.showshowToast("hello",0, function(msg) {  
21.                 alert(msg);  
22.             }, function(msg) {  
23.                 alert(msg);  
24.             });  
25.         }  
26.         function click3(){  
27.             cool.toast.openActivity();  
28.         }  
29.     </script>  
30.     </head>  
31.     <body>  
32.         <div class="app">  
33.             <h1>Apache Cordova</h1>  
34.             <div id="deviceready" class="blink">  
35.                 <p class="event listening">Connecting to Device</p>  
36.                 <p class="event received">Device is Ready</p>  
37.             </div>  
38.         </div>  
39.         <script type="text/javascript" src="cordova.js"></script>  
40.         <script type="text/javascript" src="js/index.js"></script>  
41.         <a href="#" onclick="click1(); return false;">show Toast</a>  
42.         <hr>  
43.         <a href="#" onclick="click2(); return false;">click with back data</a>  
44.         <hr>  
45.         <a href="#" onclick="click3(); return false;">open activity</a>  
46.     </body>  
47. </html>