内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

Cordova iOS插件开发流程

2018-06-08 17:20 出处:清屏网 人气: 评论(0

用cordova做地图定位,由于phonegap100上没有合适自己的插件,iOS的定位已经做好了,要是把它做成插件就好将结果调到H5界面上去了。于是捣鼓了一个多星期,终于将一个地图定位插件做好了。下面分享一下这个插件开发过程。

第一步,是在创建xcode工程 完成地图定位功能,实现功能后,并进行真机测试,达到自己想要的要求。

第二步,创建一些文件夹以及文件,文件夹结构如下图所示:

这个插件我把它命名为Map, 里边包含src 和www两个文件夹。src这个文件夹主要是用来存放对应平台的原生工程文件。如果你需要使用安卓或者WP的支持也可以。我这里只做了iOS的。www,这个文件夹是一个js文件。

创建一个plugin.xml文件 和 Map.js文件

plugin.xml文件里边的内容:

<?xml version="1.0" encoding="UTF-8"?>


<plugin nbsp="" xmlns="http://apache.org/cordova/ns/plugins/1.0" id="cordova-plugin-Map" version="1.1.1-dev">
 

    
 <name>
  Map
 </name>
    
 <description>
  Cordova Map Plugin
 </description>
    
 <author>
  YT
 </author>
    
 <license>
  Apache 2.0
 </license>
    
 <keywords>
  cordova,QRCode
 </keywords>
    
 <repo>
  https://git@github.com:OceanOver/QRCode.git
 </repo>

    
 <js-module nbsp="" src="www/Map.js" name="Map">
  
        
  <clobbers nbsp="" target="Map" />
    
 </js-module>

     
 <!-- ios -->
     
 <platform nbsp="" name="ios">
  
         
  <config-file nbsp="" target="config.xml" parent="/*">
   
             
   <feature nbsp="" name="Map">
    
                 
    <param nbsp="" name="ios-package" value="CDVMap" />
             
   </feature>
         
  </config-file>

         
  <header-file nbsp="" src="src/ios/CDVMap.h" />
         
  <source-file nbsp="" src="src/ios/CDVMap.m" />
         
  <header-file nbsp="" src="src/ios/LocationViewController.h" />
         
  <source-file nbsp="" src="src/ios/LocationViewController.m" />

         
  <framework nbsp="" src="CoreLocation.framework" />
         
  <framework nbsp="" src="MapKit.framework" />
     
 </platform>

</plugin>

注意:如果你的工程需要添加依赖库 必须卸载这里才可以,然后添加的时候就可以自动导入了。

CDVMap.h的代码,这个类继承自Cordova/CDVPlugin.h

//
//  CDVMap.h
//  HelloWorld
//
//  Created by JUST-IMAC on 16/3/17.
//
//

#import 
<cordova cdvplugin="" h="">
 

@interface CDVMap : CDVPlugin

- (void)map:(CDVInvokedUrlCommand*)command;

@end

//
//  CDVMap.m
//  HelloWorld
//
//  Created by JUST-IMAC on 16/3/17.
//
//

CDVMap.m的代码
#import "CDVMap.h"
#import "LocationViewController.h"

@interface CDVMap ()

@end

@implementation CDVMap

- (void)map:(CDVInvokedUrlCommand*)command {
    NSString *callBackId = command.callbackId;
 //将callbackId;传入你的控制器中
    LocationViewController *qrCodeController = [[LocationViewController alloc] init];
    qrCodeController.callBackId = callBackId;
    qrCodeController.qrCode = self;
 //调用原生控制器
    [self.viewController presentViewController:qrCodeController animated:YES completion:nil];
}

@end


 LocationViewController.h的代码
//
//  LocationViewController.h
//  系统地图定位
//
//  Created by admin on 16/7/9.
//  Copyright © 2016年 davidde. All rights reserved.
//

#import 
 <uikit uikit="" h="">
  
#import "CDVMap.h"
@interface LocationViewController : UIViewController
//这两个参数是必须的
@property(nonatomic,weak) CDVMap *qrCode;
@property(nonatomic,copy) NSString *callBackId;
@end
 </uikit>
</cordova>

LocationViewController.m的代码

这里边的代码我就不贴了,

这里我需要在原生地图中获取得到的定位信息,传到h5界面中处理。

于是调用

Map.js里边的代码

这里不需要上传到git,所以不需要做package.json文件里边的处理

到此一个插件已经基本上做好了

接下来是调用这个插件了

在终端cd 到你工程文件夹目录

输入命令

sudo ionic plugin add [插件所在的目录]

目录直接将你的[Map这个插件拖进去就而已了]

完成之后打开platforms中的iOS目录找到你的项目工程就可以看到你的插件安装成功了

在plugin文件夹中你会看到你所添加的插件cordoba-plugin-Map这个文件夹

此时 就是在js中调用了

<input nbsp="" type="button" onclick="getInfo()" value="地图" /> 
  

分享给小伙伴们:
本文标签: CordovaiOS

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号