Fun with cordova

Fun with cordova
Preface

It has been a long time since HTML5 and native code were used. Most of the people logging on are drooling. Those who actually work in this secret know the secrets. If HTML5 can completely replace native, what should we do with native? If HTML5 is completely unavailable, will so many awesome websites face each other? Therefore, webview is a control in android and ios, so you can use it properly. Webview is a control with a complete UI system and ecosystem. It is a lot of benefit to use it.

Okay, so the problem is coming. As a control, it is indispensable to interact with the native code. However, the common usage seems to be only used to open a webpage. This barely counts as "native code call js" and is still a one-time one. But how to play with "js call native? I once studied and wrote a tool https://github.com/fangj/WebViewJavascriptBridge on the basis of my predecessors, but it was not perfect. There is a ready-made cordova to use.

Before cordova. Let me talk about how webview interacts with native:

• Android

  Android-> JS: loadUrl
  JS-> Android: JavascriptInterface

  • IOS-> JS: loadUrl
    JS-> IOS: loadUrl, IOS intercepts custom schema

    The following is the official introduction:
    The main content is in the document.
    Http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface
    Http://cordova.apache.org/docs/en/4.0.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide
    Http://cordova.apache.org/docs/en/4.0.0/guide_platforms_android_plugin.md.html
    Http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_plugin.md.html

    • Use the command line tool to generate a cordova Project

      sudo npm install -g cordovacordova create hello com.example.hello HelloWorldcd hellocordova platform add ioscordova platform add androidcordova build

      At this time, the android and ios projects have been generated and can be opened and run with your IDE.

      • Start writing plug-ins. First, let's look at how to call in JS:

        cordova.exec(function(winParam) {},             function(error) {},             "service",             "action",             ["firstArgument", "secondArgument", 42, false]);

        Several parameters are: Successful callback. Failed callback. The object (service) to call ). Action ). Parameters of the method [...].

        • How to Write plug-ins in IOS

          Echo. h

              #import "CDVPlugin.h"    @interface Echo : CDVPlugin    - (void)echo:(CDVInvokedUrlCommand*)command;    @end

          Echo. m

              #import "Echo.h"    @implementation Echo    - (void)echo:(CDVInvokedUrlCommand*)command    {        CDVPluginResult* pluginResult = nil;        NSString* echo = [command.arguments objectAtIndex:0];        if (echo != nil && [echo length] > 0) {            NSLog(@"ios received %@",echo);            NSLog(@"ios send OK");            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];        } else {            NSLog(@"ios send fail");            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];        }        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];    }    @end

          There is also a key. Find config. xml in the ios project directory, and add the following sentence:

          Feature name is the plug-in name called in JS, and the value of ios-package is the class name corresponding to IOS.

          • How to Use plug-ins in Android
            Echo. java

            package org.apache.cordova.plugin;import android.util.Log;import org.apache.cordova.CallbackContext;import org.apache.cordova.CordovaPlugin;import org.json.JSONArray;import org.json.JSONException;/** * Created by fangjian on 14-11-28. */public class Echo extends CordovaPlugin {    @Override    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {        if (action.equals("echo")) {            String message = args.getString(0);            this.echo(message, callbackContext);            return true;        }        return false;    }
            private void echo(String message, CallbackContext callbackContext) {    if (message != null && message.length() > 0) {        Log.d("cordova plugin", "android sent OK");        callbackContext.success(message);    } else {        Log.d("cordova plugin", "android sent Fail");        callbackContext.error("Expected one non-empty string argument.");    }}
            }

            Similarly, you need to find config. xml in the Android project directory and add the following sentence:

            Android-package is the class name corresponding to android.

            • Get started
              Now you can play. For ios, you can enable safari to enter the Development Mode for debugging for chrome. You can open chrome and enter chrome: // inspect/for debugging. See: http://www.ituring.com.cn/article/130135http://www.ituring.com.cn/article/130379