IT博客汇 | Cordova+Crosswalk打包WebApp

Cordova+Crosswalk打包WebApp

shendao发表于 2017-03-09 02:31:13

一、环境安装

安装Node.js
https://nodejs.org/en

安装Cordova
http://cordova.apache.org

安装Java JDK
http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

安装Android SDK
http://www.android-studio.org/

安装Ant
http://ant.apache.org/bindownload.cgi

1.Node.js安装

安装完后打开控制台，输入node -v，显示当前版本号，安装成功

2.Cordova安装

cordova使用npm安装，输入npm install -g cordova进行全局安装，安装完后如果出现下面提示，使用npm install minimatch@"3.0.2"升级一下minimatch

3.Java JDK安装

现在的jdk版本都是自动写入环境变量的，直接安装完就ok了。控制台输入java -version出现版本信息，即安装成功。输入javac出现帮助信息，即为配置成功。

如果没有自动配置成功，手动配置也蛮简单的。

新建JAVA_HOME环境变量，变量值为jdk的存放路径
系统变量Path里面加入jdk的bin目录%JAVA_HOME%/bin; 注意分号
系统变量CLASSPATH里面变量值的起始位置添加.;%JAVA_HOME%/lib;
保存完后输入javac测试是否配置成功

4.Android SDK安装

Android SDK由于被墙所以只有通过其他方式来下载，我这里直接通过镜像服务器下载包含SDK的AndroidStadio，连同开发工具一起下载。

下面两个选项是是否安装SDK和Android虚拟机，如果不需要就取消勾选

安装路径，sdk的路径里不能包含中文，前面的jdk也是一样

5.Ant安装

下载第一个zip的格式，解压即可，比较方便

环境配置：新建ANT_HOME环境变量，变量值为ant的存放路径；系统变量Path里面加入ant的bin目录%ANT_HOME%/bin;；系统变量CLASSPATH里面加入ant的lib目录%ANT_HOME%/lib;

输入ant，如果出现如下内容，说明安装成功：
Buildfile: build.xml does not exist!
Build failed

二、创建Cordova app

官方文档： http://cordova.apache.org/docs/en/6.x/guide/cli/index.html

1.新建Cordova app应用

新建一个目录，Shift+鼠标右键，在此处打开命令窗口

cordova create hello com.example.hello HelloWorld

创建一个HelloWorld的应用，hello文件夹名，com.example.hello包名，HelloWorld应用名

2.添加平台

cd hello

添加Android平台

cordova platform add android --save

检查当前添加的平台

cordova platform ls

3.创建app

cordova build android

4.运行app

需安装Android虚拟机，或真机打开USB调试模式

cordova run android

三、AndroidStudio导入Cordova项目

1.运行AndroidStudio

初次运行，新建一个测试项目，它会下载一些东西，等它全部下载完就ok了。

1.导入Cordova项目

File->New->Import Project，填上Crodova的项目路径，plaforms->android为项目路径
eg: D:/android/hello/platforms/android

导入后会出现一个问题，一直卡在Building gradle project info这里不动，原因是导入的这个项目使用的gradle版本与你拥有的gradle版本不一致，导致需要下载该项目需要的gradle版本，由于被墙就会一直卡住，直到下载完成。

解决方案：

用vpn翻墙

离线下载安装：参考这里离线安装gradle

降级处理：
·随便找到一个能运行的AS项目，比如刚创建的示例项目；
·打开gradle-wrapper.properties，文件目录：项目/gradle/wrapper/gradle-wrapper.properties；
·复制distributionUrl这一整行的内容，eg: distributionUrl=https/://services.gradle.org/distributions/gradle-2.10-all.zip
·打开你要导入的项目的gradle-wrapper.properties；
·用刚才复制的内容替换掉这一行即可
·重启AS，再次导入项目

导入完成后，有两个目录，CordovaLib是外部库

四、Cordova加载远程网站

1.修改默认加载页面

Corvoda应用的MainActivity.java有个loadUrl(launchUrl)的方法，将launchUrl修改为远程网站的地址，即可加载远程网站。eg:loadUrl(“https://www.leangoo.com“)；

或者修改项目的根文件夹里的config.xml文件，将content src指定为远程网站的地址<content src=”https://www.leangoo.com” />

这样运行后，直接在应用内部加载该网页。不过点网站里面的链接跳转会调用系统自带的浏览器打开，不是我们想要的效果。我们想在应用的内部直接跳转。

2.使用Cordova内部浏览器跳转链接

目前网上有两种解决方案，第一种是重写shouldOverrideUrlLoading方法，第二种是修改config.xml

重写shouldOverrideUrlLoading方法
之前的版本可以在OnCreate方法中重写shouldOverrideUrlLoading方法，最新的版本改动比较大，MainActivity.java是这样的：

import android.os.Bundle; import org.apache.cordova.*; public class MainActivity extends CordovaActivity {     @Override    public void onCreate(Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);        // Set by <content src="index.html" /> in config.xml        loadUrl(launchUrl);    }}

不过可以找到shouldOverrideUrlLoading方法，在SystemWebViewClient.java中，直接修改

@Override     public boolean shouldOverrideUrlLoading(WebView view, String url)  {     //return parentEngine.client.onNavigationAttempt(url);            view.loadUrl(url);             return true;    }

修改config.xml
在config.xml中添加<allow-navigation href="http://*/*" />

五、Cordova集成CrossWalk

Crodova app调用的是系统自带的webview浏览器，在一些低端Android机上的体验效果很差。对一些新的HTML5特性支持度都不高，CrossWalk正是为了解决这个痛点而诞生的。
CrossWalk 是什么？它是一个基于 Chromium 的浏览器组件，用来取代 Android4.x 中的 WebView 。
它的优势：
1 大幅度提升 Web 程序性能
2 支持最新的 HTML5 特性
3 解决不同设备的兼容性问题
它的缺点：
1 不支持 iOS ，也不支持 Android4.0 以下的版本
2 打包后的 apk 文件将增加近20M

1.安装CrossWalk插件

官方文档： https://crosswalk-project.org/documentation/cordova.html

cordova5.0支持npm安装crosswalk，下面介绍用npm建立一个集成crosswalk的cordova应用

 cordova create hello com.example.hello HelloWorld

 cd hello

 cordova platform add android

安装crosswalk插件

cordova plugin add cordova-plugin-crosswalk-webview

cordova build android

cordova run android

2.实现加载远程网站

集成了crosswalk后，loadUrl方法不能像之前那样在内部加载远程网站的地址了，打开应用直接跳出选择浏览器选项。在网上还没找到这方面的解决方案，看官方文档Android下面的Embedding Crosswalk这一节知道了原来crosswalk直接用load方法载入url。所以MainActivity.java要改造一下，不能用原来的方法了。

import android.os.Bundle; import org.apache.cordova.*; import org.xwalk.core.XWalkView; public class MainActivity extends CordovaActivity {       private XWalkView mXWalkView;       @Override       public void onCreate(Bundle savedInstanceState)       {           super.onCreate(savedInstanceState);           // Set by <content src="index.html" /> in config.xml   //loadUrl(launchUrl);           setContentView(R.layout.activity_main);          mXWalkView = (XWalkView) findViewById(R.id.activity_main);           mXWalkView.load(launchUrl, null);     }}

然后我们在res目录建一个layout文件夹，新建一个activity_main.xml文件，这里面放crosswalk的自定义控件：

<?xml version="1.0" encoding="utf-8"?> <org.xwalk.core.XWalkView android:id="@+id/activity_main"           xmlns:android="http://schemas.android.com/apk/res/android"         android:layout_width="fill_parent"       android:layout_height="fill_parent"> </org.xwalk.core.XWalkView>

同样将根目录下的config.xml修改content src修改为<content src=”https://www.leangoo.com” />