碼上快樂

相關內容    簡體    繁體

cordova開發自定義的插件

本文轉載自   查看原文   2016-06-06 21:06   6782 

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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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
 
 在CODE上查看代碼片派生到我的代碼片
  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>  

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Cordova自定義插件開發 Cordova自定義插件開發 iOS Cordova自定義插件開發 開發自己的cordova插件 ionic2 自定義cordova插件開發以及使用 （Android） vue開發自定義表單 Android開發自定義View 自定義 Cordova插件（基礎篇） cordova實現自定義插件（有例子） 如何用uniapp+vue開發自定義相機插件——拍照+錄像功能
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM