webApp对于原生功能的调用可以采用第三方的框架,例如phonegap或者cordova等,phonegap和cordova的操作模式类似,此处仅针对cordova进行讲解。
主要分为两步:1.创建cordova项目 2.封装cordova插件
cordova教程:https://www.w3cschool.cn/cordova/。官方已经封装了很多通用的功能插件,对于极个别特定的需求,需要自定义封装插件。
1.创建一个cordova的项目:
语法:cordova create LocalToast com.hjk.localToast HelloCordova
进入创建的目录LocalToast下,添加运行平台,此处以android举例,语法:cordova platform add android
开发平台添加完毕,打开android studio ,选择LocalToast下,platform下,android项目运行。将项目的视图模式切换为project,在src目录下创建包,org.apache.cordova.bluetooth目录,在toast目录下创建java文件,此处以HjkPlugin.java为例。
package org.apache.cordova.bluetooth;
import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class HjkPlugin extends CordovaPlugin {
@Override
public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {
//localTost 为对外调用的方法名
if("localTost".equals(action)){
Toast.makeText(cordova.getActivity(),"cordova plugin test :" + args.getString(0),Toast.LENGTH_LONG).show();
//callbackContext用来调用回调函数,success为调用成功的回调
callbackContext.success("toast success");
return true;
}
//error为返回错误时的回调
callbackContext.error("toast error");
return false;
}
}
2.创建一个plugin插件
在全局环境中安装plugman插件,语法:npm install -g plugman。使用plugman创建一个plugin插件,语法:
plugman create --name HjkPlugin --plugin_id HjkPlugin --plugin_version 1.0.0
创建好的插件目录结构如下:
src目录下还要创建目录android,表示为android的平台插件资源,同理,如果是ios,则在src下创建ios的目录。这些都是手动创建的。
将编辑好的java文件放置在android目录下,然后编辑www目录下的HjkPlugin.js文件,
var exec = require('cordova/exec');
exports.coolMethod = function(arg0, success, error) {
exec(success, error, "HjkPlugin", "coolMethod", [arg0]);
};
var hjkFunc = function(){};
// arg1:成功回调
// arg2:失败回调
// arg3:将要调用类配置的标识
// arg4:调用的原生方法名
// arg5:参数,json格式
hjkFunc.prototype.localTost=function(success, error) {
exec(success, error, "HjkToast", "showToast",[] );
};
var locshow = new hjkFunc();
module.exports = locshow;
编辑plugin.xml配置文件
HjkPlugin
最后对插件进行初始化,进入插件目录,使用cmd初始化,语法:npm init
4.将插件安装到cordova项目后,即可正常调用,安装语法:cordova plugin add F:\demo\Test\HjkPlugin
之后即可正常启动项目运行
提供初学者理解的自定义插件代码地址:
https://download.csdn.net/download/kangkang_style/10611753
深入一些的,可以查看下面这个demo:
https://download.csdn.net/download/kangkang_style/10611763