使用 Cordova 开发混合应用

热度 ℃

除了使用给原生 Java/Swift 开发移动 App 外，还可以使用 html 来开发移动应用，也就是混合开发。现在比较主流的开源混合开发平台是 Cordova，它集成了应用创建、插件添加、插件定义、打包等命令，方便开发者使用。

Cordova 依赖于 Node ，需要先安装 NodeJS 环境!

HelloWorld

创建一个项目

1
cordova create HelloWorld

创建项目还可以传入其它参数，使用 cordova help create 可以查看具体的参数配置；

添加不同的平台

1
2
cd HelloWorld
cordova platform add ios android

打包运行

1
cordova run ios/android

添加插件

1
cordova plugin add cordova-plugin-device

删除插件

1
cordova plugin rm cordova-plugin-device

在 AndroidStudio 或者 XCode 中打开对应的平台运行 app 即可看到一个 HelloWorld 应用了。

插件开发

使用 Cordova 定义插件，需要依赖一个工具 plugman(非必须，也可以自己手动拷贝添加，但使用工具能显著提高我们的开发效率)。

plugman 工具安装

1
npm install plugman -g

定义插件

1
2
3
4
5
6
7
8
9
10
11
#创建插件
plugman create --name TestPlugin --plugin_id com.plugtest --plugin_version 0.0.1
#进入插件目录
cd TestPlugin
#plugin.xml 增加Android平台
plugman platform add --platform_name android
#plugin.xml 增加iOS平台
plugman platform add --platform_name ios

生成的文件结构为：

1
2
3
4
5
6
7
8
9
|TestPlugin
----|src
---------|android
--------------TestPlugin.java
---------|ios
--------------TestPlugin.m
----|www
---------|TestPlugin.js
----plugin.xml

plugman 有一个 bug，生成的 plugin.xml 文件需要修改一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.plugtest" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>TestPlugin</name>
    <js-module name="TestPlugin" src="www/TestPlugin.js">
        <clobbers target="cordova.plugins.TestPlugin"/>
    </js-module>
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="TestPlugin">
                <param name="android-package" value="com.plugtest.TestPlugin"/>
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"/>
        <source-file src="src/android/TestPlugin.java" target-dir="src/com/plugtest/TestPlugin"/>
    </platform>
    <platform name="ios">
        <config-file parent="/*" target="config.xml">
            <feature name="TestPlugin">
                <param name="ios-package" value="TestPlugin"/>
            </feature>
        </config-file>
        <source-file src="src/ios/TestPlugin.m"/>
    </platform>
</plugin>

修改

1
<source-file src="src/android/TestPlugin.java" target-dir="src/com/plugtest/TestPlugin"/>

=>

1
<source-file src="src/android/TestPlugin.java" target-dir="src/com/plugtest"/>

几个关键字

  • clobbers ：非常重要。前端工程师在使用的时候通过这个 clobbers 去调用 www/TestPlugin.js的公开方法
  • feature ：定义了（服务名）name
  • param name=”ios-package” value=”TestPlugin” 定义iOS平台下的底层实现类名为 ： TestPlugin
  • param name=”android-package” value=”com.plugtest.TestPlugin” 定义Android平台下的底层实现的 包名+类名 ：com.plugtest.TestPlugin

还可以对 config-file 标签做自定义。如果需要对 Android 的 AndroidManifest.xml 做修改，可以在此标签做。主要是 增加权限申明，注册activity，receiver 等。

添加插件

定义好插件之后，需要使用 cordova 命令将插件添加到项目中。

1
cordova plugin add TestPlugin

TestPlugin.js

1
2
3
4
5
var exec = require('cordova/exec');
exports.coolMethod = function(arg0, success, error) {
    exec(success, error, "TestPlugin", "coolMethod", [arg0]);
};

添加的插件默认添加上了一个方法 coolMethod，上面就是如何去定义一个方法。

exec 的5个参数分别是：成功Callback，错误Callback，插件名称，插件方法名，JS参数。

TestPlugin.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * This class echoes a string called from JavaScript.
 */
public class TestPlugin extends CordovaPlugin {
    final static String TAG = "TestPlugin";
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("coolMethod")) {
            String message = args.getString(0);
            Log.e(TAG, "test: " + message);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }
    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

JS-API

在JS中使用定义好的 api

1
2
3
cordova.plugins.TestPlugin.coolMethod('abcde', function (data) {
    console.log("test:" + data);
});