Cordova iOS插件開發(fā)流程

用cordova做地圖定位，由于phonegap100上沒有合適自己的插件，iOS的定位已經(jīng)做好了，要是把它做成插件就好將結(jié)果調(diào)到H5界面上去了。于是搗鼓了一個(gè)多星期，終于將一個(gè)地圖定位插件做好了。下面分享一下這個(gè)插件開發(fā)過程。
第一步，是在創(chuàng)建xcode工程 完成地圖定位功能，實(shí)現(xiàn)功能后，并進(jìn)行真機(jī)測(cè)試，達(dá)到自己想要的要求。
第二步，創(chuàng)建一些文件夾以及文件，文件夾結(jié)構(gòu)如下圖所示：


224439.png

這個(gè)插件我把它命名為Map, 里邊包含src 和www兩個(gè)文件夾。src這個(gè)文件夾主要是用來存放對(duì)應(yīng)平臺(tái)的原生工程文件。如果你需要使用安卓或者WP的支持也可以。我這里只做了iOS的。www，這個(gè)文件夾是一個(gè)js文件。
創(chuàng)建一個(gè)plugin.xml文件 和 Map.js文件
plugin.xml文件里邊的內(nèi)容：

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

<plugin 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 src="www/Map.js" name="Map">
        <clobbers target="Map" />
    </js-module>

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

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

         <framework src="CoreLocation.framework" />
         <framework src="MapKit.framework" />
     </platform>
</plugin>
615A269A-EE53-4143-849E-2DF7FDBE533F.png

注意：如果你的工程需要添加依賴庫 必須寫在這里才可以，然后添加的時(shí)候就可以自動(dòng)導(dǎo)入了。
CDVMap.h的代碼，這個(gè)類繼承自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;
 //調(diào)用原生控制器
    [self.viewController presentViewController:qrCodeController animated:YES completion:nil];
}

@end



 LocationViewController.h的代碼
//
//  LocationViewController.h
//  系統(tǒng)地圖定位
//
//  Created by admin on 16/7/9.
//  Copyright ? 2016年 davidde. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "CDVMap.h"
@interface LocationViewController : UIViewController
//這兩個(gè)參數(shù)是必須的
@property(nonatomic,weak) CDVMap *qrCode;
@property(nonatomic,copy) NSString *callBackId;
@end

LocationViewController.m的代碼
這里邊的代碼我就不貼了，
這里我需要在原生地圖中獲取得到的定位信息，傳到h5界面中處理。
于是調(diào)用
Map.js里邊的代碼


665009B4-81FF-4646-BABF-0B8447B30A72.png

這里不需要上傳到git,所以不需要做package.json文件里邊的處理

到此一個(gè)插件已經(jīng)基本上做好了

接下來是調(diào)用這個(gè)插件了
在終端cd 到你工程文件夾目錄
輸入命令

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

目錄直接將你的[Map這個(gè)插件拖進(jìn)去就而已了]
完成之后打開platforms中的iOS目錄找到你的項(xiàng)目工程就可以看到你的插件安裝成功了
在plugin文件夾中你會(huì)看到你所添加的插件cordoba-plugin-Map這個(gè)文件夾
此時(shí) 就是在js中調(diào)用了

<input type="button" onclick="getInfo()" value="地圖"> 
  <script>
      function getInfo() {
          
        Map.map(success);

         function success(info) {
           
            alert(info);
            
            
         }
    };
  </script>

用cordova做地圖定位，由于phonegap100上沒有合適自己的插件，iOS的定位已經(jīng)做好了，要是把它做成插件就好將結(jié)果調(diào)到H5界面上去了。于是搗鼓了一個(gè)多星期，終于將一個(gè)地圖定位插件做好了。下面分享一下這個(gè)插件開發(fā)過程。
第一步，是在創(chuàng)建xcode工程 完成地圖定位功能，實(shí)現(xiàn)功能后，并進(jìn)行真機(jī)測(cè)試，達(dá)到自己想要的要求。
第二步，創(chuàng)建一些文件夾以及文件，文件夾結(jié)構(gòu)如下圖所示：


224439.png

這個(gè)插件我把它命名為Map, 里邊包含src 和www兩個(gè)文件夾。src這個(gè)文件夾主要是用來存放對(duì)應(yīng)平臺(tái)的原生工程文件。如果你需要使用安卓或者WP的支持也可以。我這里只做了iOS的。www，這個(gè)文件夾是一個(gè)js文件。
創(chuàng)建一個(gè)plugin.xml文件 和 Map.js文件
plugin.xml文件里邊的內(nèi)容：

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

<plugin 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 src="www/Map.js" name="Map">
        <clobbers target="Map" />
    </js-module>

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

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

         <framework src="CoreLocation.framework" />
         <framework src="MapKit.framework" />
     </platform>
</plugin>
615A269A-EE53-4143-849E-2DF7FDBE533F.png

注意：如果你的工程需要添加依賴庫 必須卸載這里才可以，然后添加的時(shí)候就可以自動(dòng)導(dǎo)入了。
CDVMap.h的代碼，這個(gè)類繼承自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;
 //調(diào)用原生控制器
    [self.viewController presentViewController:qrCodeController animated:YES completion:nil];
}

@end



 LocationViewController.h的代碼
//
//  LocationViewController.h
//  系統(tǒng)地圖定位
//
//  Created by admin on 16/7/9.
//  Copyright ? 2016年 davidde. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "CDVMap.h"
@interface LocationViewController : UIViewController
//這兩個(gè)參數(shù)是必須的
@property(nonatomic,weak) CDVMap *qrCode;
@property(nonatomic,copy) NSString *callBackId;
@end

LocationViewController.m的代碼
這里邊的代碼我就不貼了，
這里我需要在原生地圖中獲取得到的定位信息，傳到h5界面中處理。
于是調(diào)用
Map.js里邊的代碼


665009B4-81FF-4646-BABF-0B8447B30A72.png

這里不需要上傳到git,所以不需要做package.json文件里邊的處理

到此一個(gè)插件已經(jīng)基本上做好了

接下來是調(diào)用這個(gè)插件了
在終端cd 到你工程文件夾目錄
輸入命令

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

目錄直接將你的[Map這個(gè)插件拖進(jìn)去就而已了]
完成之后打開platforms中的iOS目錄找到你的項(xiàng)目工程就可以看到你的插件安裝成功了
在plugin文件夾中你會(huì)看到你所添加的插件cordoba-plugin-Map這個(gè)文件夾
此時(shí) 就是在js中調(diào)用了

<input type="button" onclick="getInfo()" value="地圖"> 
  <script>
      function getInfo() {
          
        Map.map(success);

         function success(info) {
           
            alert(info);
            
            
         }
    };
  </script>

此時(shí)就可以成功調(diào)用了。如果你還需要修改你的插件，還可以在工程里邊修改，這里就不做太多描述了。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容