cordova 混合开发

　　cordova也叫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);
　　    }
　　}