Crosswalk--深度定制webview
前言: 最近项目中需要使用h5来开发定制Android平板的应用,无奈平板性能很差,在原生控件webview中运行动画效果不忍直视。于是想到使用第三方的控件:Crosswalk.
**简介**crosswalk是一款开源的web引擎,在Android4.0以上的系统中使用Crosswalk可以让应用程序在h5方面上获得一致性体验。
**优势**crosswalk采用的是Chromium内核(6周会更新一次),所以crosswalk会享有Chromium的功能和优势。支持最新的H5 API。
缺点由于crosswalk是将整个内核打包,所以应用的体积会很大。
Crosswalk的使用由两种方式:直接打包和嵌入式Crosswalk
2.1 直接打包
直接打包就是使用crosswalk命令直接运行WEBApp和对Android程序进行打包,这种开发方式适合那些对Android不了解或者不是很熟悉的开发人员使用。或者是对混合编程要求不是很高的项目都可以使用这种方式。下面介绍环境安装:
2.1.1 系统环境安装
- 安装JDK
下载地址 http://www.oracle.com/technetwork/java/javase/downloads/ (经测试在1.7和1.8上能正常使用) - 安装Apache Ant编译器
下载地址:http://www.apache.org/dist/ant/binaries/ (官方在1.9.3上测试正常工作:作者现在使用的是1.9.7) - 安装Android SDK
下载地址:http://developer.android.com/sdk/index.html (请自带梯子)下载Platform tools,Build tools ,SDK Platform - 安装node.js 和npm(包管理器)
下载地址: https://nodejs.org/en/download/
不需要了解相关node.js语法。 - 最后安装crosswalk-app-tools
下载方法:打开命令行,确保npm已经装上,执行命令:
npm install -g crosswalk-app-tools
在所有的都安装完成后我们可以使用crosswalk-app check android命令来检查是否所有都安装好。如果没有安装好,请重新安装。
注:如果已经安装好,但是还是显示没有安装,请检查是否在环境变量中配置
如果只有ERROR: Checking for lzma... null
错误,则可以正常进行下一步。
2.1.2 构建应用
在环境构建完毕后,可以开始初始化项目。
在命令行中切换到你保存的项目目录,使用命令
crosswalk-app create <package id>
可以初始化一个空项目,项目目录见下图:
初始化完项目我们开始构建项目了,首先我们会构建Web项目:
使用命令crosswalk-pkg <folder with manifest.json>
注意是manifest.json所在的目录,千万不要搞错了。
2.1.3 运行Android程序
首先确保连接上手机,可以是真机也可以是模拟器。
使用adb shell命令确定,如果没有,使用adb 命令尝试重连。
另外确保只连接一个设备,否则在runAndroid的时候将不知道选择哪个设备。
在上一步中我们已经将Android打包生成apk,在命令行中会输出对应的apk名称。
在这里我们根据所需要的平台选择对应的apk。
x86:adb install -r com.ab.myapp-0.1-debugx86.apk
具体的apk名称看上一步控制台的输出。
2.2 Embedding Crosswalk (嵌入式corsswalk)
Embedding Crosswalk需要Android开发知识,所以Android开发环境在此不再赘述。
官方的下载地址:https://crosswalk-project.org/documentation/downloads.php
需要根据自己需要的cpu架构选择不同的lib。
官方给的是一个eclipse项目,作为一个依赖去使用。但是现在我们早就弃用eclipse了,所以我们现在是用AS新建一个module将对应的功能放到新的module中去,然后让主module应用它。
2.2.1 需要的权限
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
2.2.2 调试内容
在加载之前调用下面代码:
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
然后使用chrome打开页面chrome://inspect
关于Embedding Api:https://crosswalk-project.org/apis/embeddingapidocs/reference/org/xwalk/core/XWalkView.html
- 上一篇:没有了
- 下一篇:没有了