初识cordova插件开发

最新推荐文章于 2019-12-03 14:41:47 发布

liyanjun201

最新推荐文章于 2019-12-03 14:41:47 发布

阅读量950

点赞数

分类专栏： ios插件开发文章标签： cordova 插件结构

本文链接：https://blog.csdn.net/liyanjun201/article/details/50578176

版权

ios插件开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文章本人从零开始做好的一个cordova插件。

一、简单hello插件开发步骤

1.在本地建立文件系统，目录结构如下

其中com.test.hello是根目录，下有两个文件夹src和www以及plugin.xml

2.编写plugin.xml

参考http://cordova.apache.org/docs/en/latest/plugin_ref/spec.html

<?xml version='1.0' encoding='utf-8' ?>
<!-- id是插件的唯一性表示 -->
<plugin id="com.test.hello" version="1.0.0" >
  <name>hello</name>
  <description>A Cordova Plugin for using hello SDK in cordova.</description>
  <author>liyanjun</author>
  <keywords>didi</keywords>
      <!-- 配置js，其中   -->
  <js-module name="helloSdk" src="www/hellosdk.js">
    <clobbers target="Hellosdk" />
  </js-module>


   <platform name="ios">
    <config-file target="config.xml" parent="/*">
      <feature name="helloSdk">
        <!-- 这个value要和源码的名字一样 -->
        <param name="ios-package" value="HelloSdk"/>
        <!--<param name="onload" value="true"/>-->
      </feature>
    </config-file>


<!-- 配置-info.plist    -->
<config-file target="*-Info.plist"  parent="CFBundleDevelopmentRegion">
      <string>zh_CN</string>
    </config-file>




  
<!-- 资源文件   -->
<!-- <resource-file src="src/ios/DIOpenSDK.bundle" /> -->


    <!-- 源码    -->
    <header-file src="src/ios/HelloSdk.h"/>
    <source-file src="src/ios/HelloSdk.m"/>


   <!-- 必须的frameworks -->
    <!--   <framework src="src/ios/DIOpenSDK.framework" custom="true"/> -->
      
</platform>


 
</plugin>

3.编写hellosdk.js

var exec = require('cordova/exec');

var openHello = {
  opennHello: function ( successCallback, errorCallback) {
    exec(successCallback, errorCallback, 'HelloSdk', 'openHello', []);
  }
};

module.exports = openHello;

4.编写helloSd

//
//  DidiView.h
//  didiPlugin
//
//  Created by yanjun.li on 16/1/7.
//
//


#import <Cordova/CDVPlugin.h>




@interface HelloSdk : CDVPlugin
-(void)openHello:(CDVInvokedUrlCommand *)command;


@end

//
//  HelloSdk
//
//  Created by yanjun.li on 16/1/7
//
//

#import "HelloSdk.h"
#import "AppDelegate.h"

@implementation HelloSdk



- (void)openHello:(CDVInvokedUrlCommand *)command;
{

//测试用，在页面显示弹框
    NSLog(@"test begin1231");
    UIAlertView *alertview = [[UIAlertView alloc] initWithTitle:@"标题" message:@"你好hello" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
    [alertview show];

    
}




@end

5.创建cordova测试工程

cordova create helloTest  com.test.hello

6.添加ios平台

cd helloTest/

cordova platform add ios

7.添加刚才编写的com.test.hello插件

cordova plugin add /Users/liyanjun/work/02ios/02BaiduMap/com.test.hello

8.修改cordova工程html文件

<!DOCTYPE html>






<html>
    <head>
        <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
        <meta charset="UTF-8"/>
        <script>
            function openHello(){
            HmsCalendar.openCalendar(getSuceess, getError, 2, banPick,'','');
            }
        function getSuceess(msg){
            alert("成功回调回来的消息123 ： 名："+msg);
        }
        function getError(msg){
            alert("错误回调回来的消息123 ："+msg);
        }
            </script>
        
        <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
                <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
                    <link rel="stylesheet" type="text/css" href="css/index.css">
                        <title>Hello World</title>
                        </head>
    <body>
        <div class="app">
            
            <Button οnclick="HmsCalendar.openCalendar(
                function(msg){
                alert(msg);
                },function(msg){
                alert(msg);
                },'1','','2020-01-02')">单选</button>
            
            <Button οnclick="HmsCalendar.openCalendar(
                function(msg){
                alert(msg);
                },function(msg){
                alert(msg);
                },'2','','')">多选</button>
            
                </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

9.运行测试

二、详细说明

1.关于codova工程如何查找js，以及如何通过js查找到我们的源文件HelloSdk。

答：cordova工程在执行cordova plugin add 的命令时，会修改starting/www/cordova_plugins.js。修改后的代码为

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/com.test.hello/www/hellosdk.js",
        "id": "com.test.hello.helloSdk",
        "pluginId": "com.test.hello",
        "clobbers": [
            "Hellosdk"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "cordova-plugin-whitelist": "1.2.1",
    "com.test.hello": "1.0.0"
}
// BOTTOM OF METADATA
});

index.html就是通过Hellosdk关键字找到js，然后调用js的openHello方法。

js的openHello方法就是查找我们的源文件。

三、OC实现cordova 回调

核心是通过 CDVPluginResult 的 resultWithStatus方法和 commandDelegate的sendPluginResult。

下面是我封装好的一个方法。

-(void)returnMess:(CDVInvokedUrlCommand *)command
         andError:(NSString*) error
       andSuccess:(NSDictionary*)successMsg
         andError:(NSString*)errorMsg{
    //   测试回调

//    ISContactItem
    CDVPluginResult* pluginResult                  = nil;
//    NSError*  error = nil;


    if (error == nil) {



//    正确消息是传入的字典，比较常用
    pluginResult        = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK
                           messageAsDictionary:successMsg];
//  也可以传入字符串

//        pluginResult       = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK
//                                               messageAsString:errorMsg];

    } else {
    pluginResult       = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR
                                         messageAsString:errorMsg];
    }

    [self.commandDelegate sendPluginResult:pluginResult
                                callbackId:command.callbackId];

}

其中正确消息返回的是字典类型，比较常用，可以用返回字符串

liyanjun201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识cordova插件开发

本文章本人从零开始做好的一个cordova插件。1.在本地建立文件系统，目录结构如下其中com.hand.scancard是根目录，下有两个文件夹src和www以及plugin.xml2.编写plugin.xml3.编写hellosdk.js4.编写helloSdk.h5.创建cordova测试工程6.添加ios平台7.添加刚才编写的com.test.hel
复制链接

扫一扫