使用 crosswalk-cordova 打包sencha touch 项目,不再用担忧安卓兼容问题!

国内的安卓手机品牌众多,安卓操做系统碎片化也很严重,咱们使用sencha touch 开发的应用不可避免的出现了各类无解的兼容性问题。html

有时候我就在想,有没有既能支持cordova,又能让咱们把Chromium内核打包到应用里面的平台呢?这样就不用担忧兼容性了。java

最近阿赛向我推荐了Crosswalk,知足了个人愿望,不过惋惜的是,Crosswalk仅支持Android4.0+。而且这个是将Chromium内核打包到了应用中,因此安装包略大一些。node

 

Crosswalk是基于Chromium内核打造的一个跨平台HTML5运行平台,具备良好的HTML5特性支持和性能优点,目前主要Android和Tizen两个平台。python

Crosswalk能够与cordova集成使用,android

Crosswalk的官方网站是:https://crosswalk-project.org/git

在线帮助文档:https://crosswalk-project.org/#documentationapache

在这里咱们讲crosswalk-cordova的使用,crosswalk-cordova顾名思义就是crosswalk集成了cordovanpm

 

1.环境搭建(win环境)服务器

  a.Pythonoracle

    先下载Python,下载地址: http://www.python.org/downloads/

    安装到指定路径,例如F:\Python

    打开计算机属性——高级系统设置——环境变量

    配置环境变量        

      变量: Path                添加值:F:\Python

    配置完成,接下来验证配置是否成功。

    双击运行——输入cmd——回车——输入Python——回车,若是出现一堆英文,以下图所示,即表示配置成功。

          

 

  b.java

    先下载JAVA,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html

    安装到指定路径,例如F:\Java

    打开计算机属性——高级系统设置——环境变量(如上文)

    配置环境变量        

      变量: JAVA_HOME          值: 安装路径:F:\Java\jdk1.6.0_10

      变量: Path                添加值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

      变量: CLASSPATH     添加值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar  

    配置完成,接下来验证配置是否成功。

    双击运行——输入cmd——回车——输入javac——回车,若是出现一堆英文,以下图所示,即表示配置成功。

          

 

 

  c.Apache Ant

    下载Apache ant,地址: http://ant.apache.org/bindownload.cgi

    解压到指定路径,例如F:\apache-ant

    打开计算机属性——高级系统设置——环境变量(如上文)

    配置环境变量        

      变量: ANT_HOME          值: 你刚解压到的路径:F:\apache-ant

      变量: Path              添加值:%ANT_HOME%\bin   

    配置完成,接下来验证配置是否成功。

    双击运行——输入cmd——回车——输入ant——回车。

           若是没有指定build.xml就会输出:

         Buildfile: build.xml does not exist!         Build failed

       有指定会输出:

         BUILD SUCCESSFUL

  d.adt-eclipse

    下载adt-eclipse,地址http://developer.android.com/sdk/index.html(注:可能须要挂代理)

            解压到指定路径,例如F:\adt-eclipse,运行SDK Manager.exe

          

           安装下图所示文件便可知足咱们的需求,其余的随意

           由于谷歌有时候会被墙,因此在不能访问谷歌服务器时请修改hosts文件,参考:http://blog.csdn.net/chinaeran/article/details/10565055

    

          

          

          

    打开计算机属性——高级系统设置——环境变量(如上文)

    配置环境变量        

      变量:       ANDROID_HOME          值:F:\adt-eclipse\sdk(以你安装目录为准,确认里面有tools和add-ons等多个文件夹)

      变量:       Path                      添加值:F:\adt-eclipse\sdk\tools

      用户变量: PATH                           值:%ANDROID_HOME%\platform-tools

    配置完成,接下来验证配置是否成功。

    双击运行——输入cmd——回车——输入adb——回车,若是出现一堆英文,以下图所示,即表示配置成功。

           

 

  e.node.js

    下载,地址http://nodejs.org/

            直接安装便可

  f.git

           安装node.js后,双击运行——输入cmd——回车——输入

           npm install -g git 便可安装,也能够参考http://blog.chinaunix.net/uid-25806493-id-3319781.html安装

  g.crosswalk-cordova

    下载,地址https://crosswalk-project.org/#documentation/downloads

            选择Cordova Android (ARM) 7.36.154.13下载,如图

           

            任意解压便可,如D:\ASPX\crosswalk-cordova

 

2.建立项目

  

            a.双击运行——输入cmd——回车进入命令行工具中,

            输入:cd /d D:\ASPX\crosswalk-cordova\bin(D:\ASPX\crosswalk-cordova就是以前我解压的目录)

            注意:途中可能会报一个关于git的错误,翻译过来的意思是某个文件找不到,根据路径把对应的文件夹建立了就能够了。

            b.建立项目:

            输入:create D:\ASPX\HelloWorld org.crosswalkproject.sample HelloWorld (D:\ASPX\HelloWorld是项目路径 org.crosswalkproject.sample是包名  HelloWorld是项目名称)

            c.添加cordova插件:

            输入:cd /d D:\ASPX\HelloWorld\cordova (D:\ASPX\HelloWorld就是项目路径,在此输入version命令能够查看cordova版本号)

            在这里咱们须要用 plugman install --platform android --project . \ --plugin 插件地址 这个命令来添加插件,如添加摄像机插件

            plugman install --platform android --project . \ --plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git#r0.2.5

            具体插件对照表请在https://crosswalk-project.org/#wiki/Plugins-list-@-3.3.0-supported-by-crosswalk-cordova-android中查看

            在sencha touch中,插件的使用和直接使用 cordova 同样

3.项目打包

     经过上述过程生成的项目就是一个完整的安卓项目了,直接用adt-eclipse导入便可。

     整个导入打包过程能够参考http://www.cnblogs.com/mlzs/p/3437445.html,基本没有什么变化,惟一的区别就是导入的项目中多了一个xwalk_core_library,如图所示

            

相关文章
相关标签/搜索