array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 cordova开发自定义的插件 - 爱码网

cordova开发自定义的插件

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的例子 )

cordova开发自定义的插件

 

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

 

cordova开发自定义的插件

cordova开发自定义的插件

 

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

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

 

 

a. plugin.xml的配置

 

[html] view plain copy
 
 cordova开发自定义的插件cordova开发自定义的插件
  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
 
 cordova开发自定义的插件cordova开发自定义的插件
  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
 
 cordova开发自定义的插件cordova开发自定义的插件
  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
 
 cordova开发自定义的插件cordova开发自定义的插件
  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
 
 cordova开发自定义的插件cordova开发自定义的插件
  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
 
 cordova开发自定义的插件cordova开发自定义的插件
  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>  

 

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode