Cordova學習--iOS自定義外掛

susie_cc發表於2018-06-29
iOS

上一篇文章中我們已經成功建立了一個App，在這一篇中，我們實現自定義原生外掛，由js呼叫原生外掛。在這裡我們實現功能如下

Cordova學習--iOS自定義外掛

一、建立外掛檔案 在plugins資料夾下建立外掛EchoPlugin，繼承自CDVPlugin，檔案建立完成以後會報找不到標頭檔案的錯誤，把#import <Cordova/Cordova.h>替換成#import <Cordova/CDVPlugin.h>即可

Cordova學習--iOS自定義外掛

二、宣告方法實現外掛程式碼

在EchoPlugin.h檔案中宣告一個方法，作為原生外掛對外暴露的介面供js程式碼呼叫，在.m檔案中實現該方法實現iOS原生功能。

主要實現程式碼如下：

- (void)echo:(CDVInvokedUrlCommand*)command
{
    CDVPluginResult *pluginResult = nil;
    NSString *echo = [command.arguments objectAtIndex:0];
    
    if (echo!=nil&&[echo length]>0) {
        
        FirstViewController *testVC = [[FirstViewController alloc] init];
        UINavigationController *navVC = [[UINavigationController alloc] initWithRootViewController:testVC];
        
        [self.viewController presentViewController:navVC animated:YES completion:^{
            CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
            [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
        }];
        
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
    }else
    {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
    }
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
複製程式碼

三、配置外掛

  1. 修改config.xml檔案 外掛的功能實現以後，我們需要在專案中配置外掛供js呼叫。首先配置config.xml檔案，新增如下程式碼：
    <platform name="ios">
        <config-file parent="/*" target="config.xml">
<!--            feature的name值應該和在index.html檔案中執行的exec時呼叫的service保持一致-->
            <feature name="EchoPlugin">
<!--                value值和自定義外掛的類名保持一致-->
                <param name="ios-package" value="EchoPlugin" />
            </feature>
        </config-file>
    </platform>
複製程式碼

注意：
要配置App最外層的config.xml檔案，最外層的是全域性檔案，修改並編譯之後會在staging下的配置檔案中同樣寫入配置程式碼。如果單獨修改staging資料夾下的config.xml檔案，編譯之後會被最全域性的config.xml覆蓋恢復原樣。

Cordova學習--iOS自定義外掛

  1. 修改index.html

index.html頁面是Cordova建立的應用程式的入口，我們可以修改這個頁面呼叫iOS原生功能。從js對映到外掛類通過exec函式實現

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);
複製程式碼

說明：
successFunction：成功的回撥函式
failFunction：失敗的回撥函式
service：呼叫原生程式碼的服務名，和config.xml檔案中的feature的name值保持一致
action：要呼叫的外掛方法
args：要呼叫方法的引數,是一個陣列

修改index.html頁面如下：

<!DOCTYPE html>
<html>
    <head>
        <title>EchoPlugin</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script type="text/javascript" charset="utf-8">
                
            function EchoPlugin() {
                cordova.exec(testSuccess,testFailed,"EchoPlugin","echo",["我是JS傳的引數！"]);
            }
            
            function testSuccess(msg) {
                alert(msg);
            }
            
            function testFailed(msg) {
                alert('failed: ' + msg);
            }
            </script>
    </head>
    
    <body style="padding-top:50px">
        <button style="font-size:17px;" onclick="EchoPlugin();">Use iOS Plugin</button> <br>
    </body>
</html>
複製程式碼

注意： 修改index.html頁面也要修改最外層的全域性頁面

到此，第二篇文章結束。

相關文章