cordova 混合开发

　　cordova也叫phonegap，可以用来打包网页生成android或ios或其他平台的APP，它提供了一些native api，可以让网页调用本地函数，极大地增强了网页的功能。

cordova的使用非常灵活，可以全部用网页和js来实现APP功能，也可以使用网页+本地代码的形式来实现。

　　cordova 的官方网站是http://cordova.apache.org，目前看来它的文档有些落后代码，一切以代码为准。

目录

1.工作环境建立

创建工程

生成APP

使用CordovaWebView

js调用本地代码

本地代码调用js

1.工作环境建立：

　　

[code]   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，官网上也是这样写的：

　　

[code]<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

　　

　　在代码中：

　　

[code]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才能加载外部网页，否则会报错，自定义插件如下：

　　

[code]public class MyCordovaPlugin extends CordovaPlugin {
　　
　　    @Override
　　    public Boolean shouldAllowNavigation(String url) {
　　        return true;
　　    }
　　
　　    @Override
　　    public Boolean shouldAllowRequest(String url) {
　　        return true;
　　    }
　　}

　　在xml/config.xml中定义全局插件：

　　

[code]    <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

　　

[code]@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中可以直接调用，调用方法如下：

　　

[code]function message(){
　　    cordova.exec(onMessageSuccess,onMessageError,"myplugin","message",["hello wrold"]);
　　}
　　function onMessageSuccess(result){
　　    alert("成功啦：>  "+result);
　　}
　　function onMessageError(result){
　　    alert("失败了:(  "+result);
　　}

　　exec函数定义如下：

　　

[code]exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);

本地代码调用JS

　　本地代码调用JS稍微复杂一点，原先可以用sendJavascript，但是现在已经被标记过时了，所以还是不要用为好，目前的方法如下：

　　在js中注册一个通道,并向本地代码发送一个oncalljs消息

　

[code]　cordova.require('cordova/channel').onCordovaReady.subscribe(function() {
　　        cordova.exec(oncalljs, null, “myplugin”, “oncalljs”, []);
　　            function oncalljs(message) {
　　                //在这里响应来自本地代码的调用
　　if（message==”1”){
　　   //...
　　}
　　            }
　　    });

　　然后在本地代码的exec函数中响应oncalljs，并保存调用上下文:

　　

[code]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);
　　    }
　　}