[Phonegap+Sencha Touch] 移动开发35 让phonegap的webview(安卓)使用chromium内核

应该都知道,phonegap/Cordova(安卓)只是给webapp加了一个壳而已,也就是webapp运行于webview之上。

安卓的webview虽然是webkit内核,但是自带的webview和移动版chrome浏览器的内核还是有区别的。使用过移动版chrome浏览器的人可以明显感觉到性能比自带浏览器(或者webview)要流畅得多。

安卓4.4及以上自带的webview已经是chromium内核了,而4.4以下却不是。所以安卓4.4使用phonegap打包的apk的时候,会感觉比4.4以下版本要快点,而且html5+css3支持的也更好。

下面介绍一个方法,让你的apk自带chromium内核,这样,你的apk在
安卓4.0及以上~4.4以下 的手机上用户体验更好。

因为移动版chrome浏览器只适用于安卓4.0及以上版本的系统,所以这个chromium内核也只适用于安卓4.0及以上版本。

首先,介绍一个东西,叫做crosswalk,下面是官网地址:

https://crosswalk-project.org/documentation/cordova.html

大家可以先看看上面链接里面的的介绍。

步骤:

1、下载Crosswalk Cordova for Android

选择Cordova Android (ARM)这个即可,x86的android设备不多。选择stable稳定版的下载,beta和canary版本可能会有一些bug。

2、把下载下来的zip解压,比如解压到D:\crosswalk-cordova-8.37.189.12-arm

3、创建一个phonegap项目,在E:\hello下面。

cd E:D:\crosswalk-cordova-8.37.189.12-arm\bin\create hello com.pushsoft.hello Hello

命令和phonegap/Cordova的命令差不多,只不过开头不是phonegap或者Cordova,而是D:\crosswalk-cordova-8.37.189.12-arm\bin\create(就是里面的create.bat文件)

4、可以用eclipse打开这个安卓项目,调试编译什么的(建议不要再用phonegap local build。。。我是没试过。。。你们可以试试)

这样这个安卓app就是chromium内核的了。

ps:

①、导出未签名的apk安装包,可以用eclipse右键点击项目-Android Tools-Export unsigned Application package

②、导出已签名的apk安装包(需要自己生成一个安卓证书),可以用eclipse右键点击项目-Android Tools-Export signed Application
package

下面介绍怎么把你现有的phonegap项目(暂且成为“原项目”),改为chromium内核的。

1、按照上面的方法,创建一个和你原来phonegap项目包名、程序名一样的项目(暂且成为“新项目”):

比如我原项目包名是com.pushsoft.myapp,程序名是MyApp,那么我这样建一个新项目:

cd E:D:\crosswalk-cordova-8.37.189.12-arm\bin\create MyApp com.pushsoft.myapp MyApp

2、把原项目下面的cordova和CordovaLib两个文件夹删除(或者移走),然后把新项目E:\MyApp下面的cordova和CordovaLib两个文件夹复制到原项目底下。

就是把带有chromium内核的Cordova库替换你原来项目的Cordova库

3、用eclipse打开替换过后的原项目吧,调试编译导出啥的。

ps:

①、带有chromium内核的apk包很大,大概会大16MB吧。这个包只适用于安卓4.0及以上系统,4.4及以上的不需要,因为4.4之后的安卓webview已经是chromium内核了

②、使用了chromium内核的phonegap项目,在使用某些phonegap插件的时候,会报错,比如FileTransfer插件。

FileTransfer插件需要修改一下,才可以适配,修改方法点击查看这里

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

欢迎加入Sencha Touch + Phonegap 群:194182999

共同学习交流(博主QQ:479858761

求赞助:

1、百度情感转账,只要支付1分钱,你得10元,我得5元

2、百度透明小金库,支付我1分钱,就可以赞助我

3、百度钱包支付1分钱,获得体彩顶呱刮兑换码。把兑换码发给我可以赞助我

时间: 2024-11-06 23:05:44

[Phonegap+Sencha Touch] 移动开发35 让phonegap的webview(安卓)使用chromium内核的相关文章

[Phonegap+Sencha Touch] 移动开发30、phonegap的camera插件的几个问题

<span style="font-size:14px;">navigator.camera.getPicture(function(uri){ //得到拍摄的图片路径 }, function(err){}, { quality: 70, allowEdit: true, //拍摄完进行裁剪编辑 targetWidth: 250, targetHeight: 250, destinationType: navigator.camera.DestinationType.FIL

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

[Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程序名称(图标下面的文字)也是"MyApp" 如果要换成其他名字,修改 MyApp\config.xml 文件,把顶部"<name>MyApp</name>"中间MyApp的改成需要的名字. 注意如果xml内容有中文,要改成utf-8编码,注意是文

[Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程序名称(图标以下的文字)也是"MyApp" 假设要换成其它名字,改动 MyApp\config.xml 文件,把顶部"<name>MyApp</name>"中间MyApp的改成须要的名字. 注意假设xml内容有中文,要改成utf-8编码,注意是文

[Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview点击穿透的缓解办法

安卓的webview和自带浏览器下有个奇怪的现象. 现象: 1.如果输入框input或者textarea的正上方(z轴方向,即上层)有个div,当点击这个div使得div隐藏了之后,input会得到焦点,导致软键盘弹出. 2.浏览视图点击某个地方切换到编辑视图,如果浏览视图点击的位置 在 编辑视图相应位置有个输入框,那么切换过去之后,编辑页的输入框会自动得到焦点. 这个体验很不舒服. 讨论: 这个不是点击事件的事件冒泡导致的(因为e.stopPropagation()和return false是

[Phonegap+Sencha Touch] 移动开发29 安卓navigator.camera.getPicture得到图片的真实路径

phonegap的拍照插件选择图库中的图片,代码如下: navigator.camera.getPicture(function(uri){ console.log(uri);//这里得到图片的uri }, function(err){ console.log(err); }, { quality: 70, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.Pictur

[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容

原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cordova-hot-code-push 以下是我对GitHub项目readme的翻译 ---------------------------------------------- Cordova Hot Code Push Plugin 此插件提供了能够使cordova app自己主动更新web内容的功

[Phonegap+Sencha Touch] 移动开发43 WebApp字体图标的制作

Sencha touch从2.2开始,里面用到的图标全部是字体图标(icon font),也就是字体文件里面的字符作为图标来用. 主要特性 字体是矢量的,使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小而不失真,适用于不同分辨率和尺寸的屏幕 自由的修改颜色 添加阴影效果 支持图片图标的其它属性,例如,透明度和旋转等等 可以添加text-stroke和background-clip:text等属性,只要浏览器支持 字体图标的用法 我们来看下sencha to