Android集成Cordova与Crosswalk

1. 介绍

1.1 Cordova

Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。Adobe将会继续以Cordova加上PhoneGap Build和Adobe Shadow的组合提供PhoneGap。
特性：
● 移动应用程序使用Html、Css、JS
● Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
● 一次开发多个平台
● 开源免费

1.2 Node.js

Node.js是基于Chrome的V8 JavaScript引擎的JavaScript运行时环境。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。Node.js使用事件驱动的非阻塞I / O模型，使其轻量级和高效。Node.js的包生态系统，npm，是世界上最大的开源库的生态系统。

1.3 Crosswalk

Crosswalk 作为一款开源的 web 引擎，正是为了跨越这些障碍而生。目前 Crosswalk 正式支
持的移动操作系统包括 Android 和 Tizen，在 Android 4.0 及以上的系统中使用 Crosswalk 的
Web 应用程序在 HTML5 方面可以有一致的体验，同时和系统的整合交互方面（比如启动画
面、权限管理、应用切换、社交分享等等）可以做到类似原生应用。

2. 开发环境及搭建

2.1 Node.js、Cordova安装

首先去Node.js的官网下载并安装，然后打开命令行输入 npm install -g cordova 安装Cordova

2.2 创建项目

打开命令行执行：

cordova create Android6.2.1 com.blog.test CordovaTest

创建一个项目 cordova create 【文件名】【包名】【项目名】

cordova platform add android@6.2.1

安装Android平台6.2.1版本
Cordova Android版本已于2017年4月05日更新到了6.2.1版本，建议大家使用该版本。

2.3 编译运行

2.3.1 编译

当遇到上面提示的问题时，需要在环境变量中设置gradle的文件位置。
如果已安装Android Studio：
在【系统变量】栏新建一个变量GRADLE_HOME 变量值是gradle的文件位置

在系统变量【Path】中添加变量值 “;%GRADLE_HOME%\bin”

最后在命令行中输入gradle -version，检查是否配置完毕

如果没有安装Android Studio的：
在Gradle官网下载一个版本并解压，之后按照上述内容配置环境变量即可。Gradle3.3下载

2.3.2 运行

使用真机运行
cordova run anroid
使用模拟器运行 
cordova emulate android
使用网页打开
cordova serve

2.4 插件相关

cordova plugin ls
显示已安装的插件
cordova plugin add cordova-plugin-crosswalk-webview
安装Crosswalk插件
cordova plugin rm cordova-plugin-camera
删除插件
cordova plugin update
更新所有插件

3. Cordova使用

3.1 config.xml文件加载

config.xml主要标签介绍 （具体请见http://cordova.apache.org/docs/en/6.x/config_ref/index.html）
widget：id填写app所有人的域名，version填写app的版本号
name：app名称
description：app描述，会在app stroe里显示
author：app作者相关信息，会在app stroe里显示
content：指定app开始指向页面
access：指定app可进行通信的域名，*为所有
preference：偏好设置，可针对不同平台进行个性化设置。
如下图所示，ConfigXmlParser负责解析config.xml文件，然后将preference标签下的内容拿给CordovaPreference。

3.2 CordovaWebView赋值、初始化

3.3 显示网页

3.3.1 方式一：直接继承CordovaActivity（官网推荐）

public class VideoActivity extends CordovaActivity {

    @BindView(R.id.video)
    FrameLayout video_layout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_video);
        ButterKnife.bind(this);
        loadUrl("https://www.baidu.com/");
    }

    @Override
    protected void createViews() {
        FrameLayout.LayoutParams params=new FrameLayout.LayoutParams
                (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        appView.getView().setLayoutParams(params);
        video_layout.addView(appView.getView());
        appView.getView().requestFocusFromTouch();
    }
}

3.3.2 方式二：自定义

public class VideoActivity extends BaseActivity {

    @BindView(R.id.video)
    FrameLayout video_layout;

    private CordovaWebView webView;
    private CordovaPreferences preferences;
    private List<PluginEntry> pluginEntries;
    private CordovaInterfaceImpl cordovaInterface;
    private boolean keepRunning=true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_video);

        init();
        cordovaInterface=makeCordovaInterface();
        if (savedInstanceState != null) {
            cordovaInterface.restoreInstanceState(savedInstanceState);
        }
        loadUrl("https://www.baidu.com/");
    }

    private void init(){
        ConfigXmlParser parser = new ConfigXmlParser();
        parser.parse(this);
        preferences = parser.getPreferences();
        pluginEntries=parser.getPluginEntries();
    }

    private void initWebView(){
        webView=new CordovaWebViewImpl(new XWalkWebViewEngine(this,preferences));
        FrameLayout.LayoutParams params=new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        webView.getView().setLayoutParams(params);
        video_layout.addView(webView.getView());

        if (preferences.contains("BackgroundColor")) {
            try {
                int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
                // Background of activity:
                webView.getView().setBackgroundColor(backgroundColor);
            }
            catch (NumberFormatException e){
                e.printStackTrace();
            }
        }
        webView.getView().requestFocusFromTouch();

        if(!webView.isInitialized()){
            webView.init(cordovaInterface,pluginEntries,preferences);
        }
        cordovaInterface.onCordovaInit(webView.getPluginManager());
        //音量控制
        // Wire the hardware volume controls to control media if desired.
        String volumePref = preferences.getString("DefaultVolumeStream", "");
        if ("media".equals(volumePref.toLowerCase(Locale.ENGLISH))) {
            setVolumeControlStream(AudioManager.STREAM_MUSIC);
        }
    }

    protected void loadUrl(String url){
        if(webView==null){
            initWebView();
        }
        webView.loadUrlIntoView(url,true);
    }
    //对照CordovaActivity中CordovaInterfaceImpl的实现及Activity的生命周期
    ....
}