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;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_video);ButterKnife.bind(this);loadUrl("https://www.baidu.com/");}@Overrideprotected 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;@Overrideprotected 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的生命周期....
}