cordova 混合开发
Published on: | Views: 59cordova也叫phonegap，可以用来打包网页生成android或ios或其他平台的APP，它提供了一些native api，可以让网页调用本地函数，极大地增强了网页的功能。 cordova的使用非常灵活，可以全部用网页和js来实现APP功能，也可以使用网页+本地代码的形式来实现。 cordova 的官方网站是http://cordova.apache.org，目前看来它的文档有些落后代码，一切以代码为准。
目录 1.工作环境建立 创建工程 生成APP 使用CordovaWebView js调用本地代码 本地代码调用js
1.工作环境建立：
sudo apt-get install nodejs
sudo apt-get install nodejs-legacy
sudo apt-get install npm
sudo npm install -g cordova
cordova platform add android
创建工程
cordova create dir_name package_name app_name
例如：
cordova create hello com.example.hello HelloWorld
会创建hello目录，在此目录中创建工程，com.example.hello这个是工程的包名，HelloWorld是应用的显示名字。
hello目录结构如下：
├── config.xml
├── hooks
│ └── README.md
├── platforms
├── plugins
└── www
├── css
│ └── index.css
├── img
│ └── logo.png
├── index.html
└── js
└── index.js
生成APP
cd hello
cordova build
此时会在platforms目录下生成android目录，这个就是android平台的APP工程目录。
├── AndroidManifest.xml
├── assets //所有的网页和js等文件放到此目录
├── build
├── build.gradle
├── cordova
├── CordovaLib
├── gradle
├── gradlew
├── libs
├── platform_www
├── project.properties
├── res //此目录下有一个xml/config.xml,这是cordova的全局配置
├── settings.gradle
└── src
这个时候build/outputs/apk/目录下已经创建了APK文件。
使用CordovaWebView
首先看了网上的资料，以为这是一个View，官网上也是这样写的：
<org.apache.cordova.engine.SystemWebView
android:id="@+id/home_fragment_webview"
android:layout_marginTop="@dimen/home_fragment_web_view_margin_top"
android:layout_marginBottom="@dimen/home_fragment_web_view_margin_bottom"
android:layout_below="@id/home_fragment_card_clock"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
SystemWebView继承了WebView 在代码中：
ConfigXmlParser parser=new ConfigXmlParser();
parser.parse(activity);//这里会解析res/xml/config.xml配置文件
CordovaWebView cordovaWebView= new CordovaWebViewImpl(new SystemWebViewEngine(systemWebView));//创建一个cordovawebview
cordovaWebView.init(new MyCordovaInterfaceImpl(activity), parser.getPluginEntries(), parser.getPreferences());//初始化
cordovaWebView.loadUrl(“file:///android_asset/www/index.html“);//加载网页
private static class MyCordovaInterfaceImpl extends CordovaInterfaceImpl{
private Activity mActivity;
public MyCordovaInterfaceImpl(Activity activity) {
super(activity);
mActivity=activity;
}
@Override
public Activity getActivity() {
return mActivity; //注意这里要返回activity
}
}
因为cordova默认不加载外部网页，需要自己定义一个插件plugin才能加载外部网页，否则会报错，自定义插件如下：
public class MyCordovaPlugin extends CordovaPlugin {
@Override
public Boolean shouldAllowNavigation(String url) {
return true;
}
@Override
public Boolean shouldAllowRequest(String url) {
return true;
}
}
在xml/config.xml中定义全局插件：
<feature name="myplugin">
<param name="android-package" value="com.example.MyCordovaPlugin"/>
<param name="onload" value="true"/>
</feature>
然后在代码中就可以自由加载外部网页了: cordovaWebView.loadUrl(“http://www.baidu.com/“);//加载外部网页 JS调用本地代码 在plugin中重写execute
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if(action.equals("message")){//响应action请求
//SingleToast.showShort(MainApplication.getInstance(),args.getString(0));
callbackContext.success("hahahaha"); //返回结果
return true; //一定要返回true，返回false表示invalid action
}
return false;
}
在js中可以直接调用，调用方法如下：
function message(){
cordova.exec(onMessageSuccess,onMessageError,"myplugin","message",["hello wrold"]);
}
function onMessageSuccess(result){
alert("成功啦：> "+result);
}
function onMessageError(result){
alert("失败了:( "+result);
}
exec函数定义如下：
exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);
本地代码调用JS 本地代码调用JS稍微复杂一点，原先可以用sendJavascript，但是现在已经被标记过时了，所以还是不要用为好，目前的方法如下： 在js中注册一个通道,并向本地代码发送一个oncalljs消息
cordova.require('cordova/channel').onCordovaReady.subscribe(function() {
cordova.exec(oncalljs, null, “myplugin”, “oncalljs”, []);
function oncalljs(message) {
//在这里响应来自本地代码的调用
if（message==”1”){
//...
}
}
});
然后在本地代码的exec函数中响应oncalljs，并保存调用上下文:
if(action.equals("oncalljs")){
mCallbackContext=callbackContext;
PluginResult dataResult = new PluginResult(PluginResult.Status.OK,"js call init ok");
dataResult.setKeepCallback(true);//非常重要
mCallbackContext.sendPluginResult(dataResult);
return true; //非常重要
}
之后，本地代码就可以调用JS了：
public void sendCmd(String cmd){
if(mCallbackContext!=null){
PluginResult dataResult = new PluginResult(PluginResult.Status.OK,cmd);
dataResult.setKeepCallback(true);//非常重要
mCallbackContext.sendPluginResult(dataResult);
}
}