CreateCordovaPlugin2

创建一个拨打电话的cordova plugin

首先创建一个cordova 项目CallPhoneDemo 项目地址

cordova create CallPhoneDemo

cordova platform add android

cordova build

cordova run android

更改index.html,给定一个输入框输入电话号码,一个Button拨打输入的号码

1
2
3
4
  <div>
    <input type="text" placeholder="请输入电话号码" id="phoneNumber"><br>
    <button id="callPhoneNumber()"></button>
  </div>

使用plugman(不清楚用法: plugman --help), 创建一个CallPhonePlugin

项目地址

plugman create –name CallPhonePlugin –plugin_id com.plugin.callphone –plugin_version 0.0.1

使用android studio开发plugin时要注意除了导入cordova dev和android的jar包之外,还得将项目src目录Mark directory as sources root

在CallPhonePluin.js中添加 call方法,让cordova demo中能够调用

1
2
3
4
5
var exec = require('cordova/exec');
CallPhonePlugin = {}
CallPhonePlugin.call = function(phoneNumber, success, error) {
    exec(success, error, "CallPhonePlugin", "call", [phoneNumber]);
}

配置文件,plugin.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--对platform为android的配置-->
  <platform name="android">
        <!-- 配置调用CallPhonePlugin的call
        action时相应的类为com.plugin.CallPhonePlugin -->
        <config-file target="config.xml" parent="/*">
            <feature name="CallPhonePlugin">
                <param name="android-package" value="com.plugin.CallPhonePlugin"/>
            </feature>
        </config-file>
        <!-- 配置使用打电话的权限-->
        <config-file target="AndroidManifest.xml" parent="/*">
            <uses-permission android:name="android.permission.CALL_PHONE" />
        </config-file>
        <!--每建立一个java类,都得申明一下 -->
        <source-file src="src/com/plugin/CallPhonePlugin.java" target-dir="src/com/plugin"/>
    </platform>

编写CallPhonePlugin.java类,重写execute()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 @Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
     //通过判断外层调用的action,来调用对应的方法
    if(action.equalsIgnoreCase(CALL)) {
        String phoneNumber = args.getString(0).trim();
        callPhone(phoneNumber, callbackContext);
    }
    return true;
}

//拨打电话,并且将成功信息返回给页面
private void callPhone(String phoneNumber, CallbackContext callbackContext) {
    callbackContext.success("call phone success");
    Intent intent = new Intent();
    intent.setAction(Intent.ACTION_CALL);
    intent.setData(Uri.parse("tel:" + phoneNumber));
    cordova.getActivity().startActivity(intent);
}

在CallPhoneDemo项目中使用CallPhonePlugin

添加plugin:

cordova plugin add ../CallPhonePluin (如果是在本地同一目录)

cordova plugin add https://github.com/cordova-plugin/CallPhonePlugin (直接使用github项目)

删除plugin:

cordova plugin rm com.plugin.callphone (这里的删除需要使用plugin创建时的id)

在Demo项目中调用js, 编辑www/index.js

1
2
3
4
5
6
7
8
9
10
11
12
  var bt   = document.getElementById('callPhoneNumber');
  var _cb = function(result) {
    console.log(result);
  }

  //给button添加一个点击事件
  bt.addEventListener('click', function() {
    //phoneNumber最好在内部获取
    var phoneNumber = document.getElementById('phoneNumber').value;
    //调用plugin中CallPhonePlugin.js中定义好的方法
    CallPhonePlugin.call(phoneNumber, _cb, _cb);
  });

cordova build

cordova run android

为了添加,删除插件的方便,可以写一个shell脚本去自动执行安装命令

1
2
3
4
#!/bin/sh
cordova plugin rm com.plugin.callphone
cordova plugin add ../CallPhonePlugin
cordova run android

Demo运行, 输入电话号码,点击拨打, 拨打成功

Comments