一、概述
1、移动端的开发模式
- Native App
传统的原生APP开发模式,Android基于Java语言,底层调用Google的API;iOS基于OC或者Swift语言,底层调用Apple官方提供的API。体验最好。
- Web App
移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指SPA(SinglePageApplication)模式开发出的网站。体验最差。
- Hybrid App
混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,具有跨平台效果。
- React Native App
Facebook开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。
React Native不属于Hybrid 开发。虽然同样是一处编写,处处运行,但是 Hybrid是 HTML 和原生代码混合实现,而React Native只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。
2、Cordova 基本介绍
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。
使用Apache Cordova的人群:
- 移动应用开发者,想扩展一个应用的使用平台,而不通过每个平台的语言和工具集重新实现。
- web开发者,想包装部署自己的web App将其分发到各个应用商店门户。
- 移动应用开发者,有兴趣混合原生应用组建和一个WebView(一个特别的浏览器窗口) 可以接触设备A级PI,或者你想开发一个原生和WebView组件之间的插件接口。
3、架构
这是cordova应用程序的几个组成部分。下面这幅图是cordova应用架构的高级视图。
4、更多介绍信息
二、Cordova 安装(以MAC为例)
1、安装node环境
详细可参考以下链接的 第四步 1-4点:
Leader 俊:VirtualBox虚拟机下Ubuntu系统配置Vue.js开发环境zhuanlan.zhihu.com/p/25861375
安装完成,用如下命令检查node和npm的安装是否成功:
node -v
npm -v
2、安装git(选择安装)
mac和linux都自带git,使用以下命令检查git的安装:
git --version
3、安装Cordova
# 全局安装cordova
npm install -g cordova
# 查看cordova是否安装成功
cordova -v
# 更新cordova (推荐)
npm update cordova -g
三、创建Cordova工程
1、 创建项目
在终端进入你想要创建项目的目录,执行如下命令
cordova create hello com.example.hello HelloWorld
参数说明:
【hello】:<必填>工程的文件夹名,会创建一个同名文件夹
【com.example.hello】:<非必填>应用程序的id名,与Xcode中类似,可以在 config.xml 中修改,如果不指定的话默认为 io.cordova.hellocordova
【HelloWorld】:<非必填>App的名称,也可在 config.xml 中修改
2、添加平台
为项目添加运行的平台,如ios和android:
# 进入我们刚刚创建的项目目录
cd hello
# 添加平台
cordova platform add ios --save # 添加ios平台
cordova platform add android --save # 添加android平台
# 检查当前平台设置情况
cordova platform ls
注意:在使用CLI创建应用的时候,
不要修改
/platforms/
目录中的任何文件。当准备构建应用或者重新安装插件时这个目录通常会被重写。
3、工程目录
4、ios工程目录说明
使用xcode打开 platform/ios/HelloWord.xcworkspace 从而打开项目,默认的Cordova工程展示如下:
- 可以看到 Staging 文件夹下面有个 www 文件夹和一个 config.xml 文件(B区)。
- 而在 Staging 文件夹外也有个 www 文件夹和一个 config.xml 文件(A区)。
- 实际上Staging 外的www文件夹就是项目hello/下的, Staging 下的www文件夹是在platforms/ios里的, Staging 下的config.xml 金仅作用于iOS平台,主要是配置插件。
- 也就是说每次Cordova编译的时候,或者更新工程、安装插件时都会重新把 A区 里的文件覆盖到各个平台下的文件(B区)。
- 而且如果同时只编辑单个平台工程文件夹下的html页面,也不符合一次编写,同时编译发布多平台的跨平台应用开发思想。
- 所以一般都是编辑外面的(A区)www文件夹里的文件,然后重新 build 工程。
四、Cordova项目实践demo
1、cordova生命周期介绍
cordova提供APP状态的监测(ios),包括:
【deviceready】:当Cordova加载完成会触发
【pause】:当应用程序进入到后台会触发
【resumes】:应用程序从后台进入到前台会触发
2、demo实践
第一步:修改index.html
我们将 hello/www/index.html 页面修改为如下内容,展示APP的状态监测:
<!DOCTYPE html>
<html>
<head>
<title>Pause Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
//页面加载后添加各事件监听
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("resume", onResume, false);
document.addEventListener("pause", onPause, false);
}
//Cordova加载完毕
function onDeviceReady() {
alert("Cordova加载完毕!");
}
//进入后台
function onPause() {
console.log("应用进入到后台!");
}
//恢复到前台
function onResume() {
alert("应用回到前台运行!");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
第二步:构建项目
在开发完页面后,我们需要构建项目将新的修改部署到各个平台的项目中
Tips: ios运行可以安装XCode,android运行可以安装android studio,这里不做工具的安装说明。
构建项目:
# 构建所有平台(android & ios),需在项目目录hello/下执行
cordova build
# 或者可以选择单独构建某个平台
cordova build ios # 单独构建ios平台
cordova build android # 单独构建android平台
第三步:运行项目
以用XCode运行ios平台为例,用 使用xcode打开 platform/ios/HelloWord.xcworkspace ,点击运行:
此时,XCode会打开ios模拟器,初始页面会如下展示:
至此,我们的第一个cordova的实例项目完成。
四、浏览器访问和调试
运行如下命令输出访问地址:
cordova serve
五、cordova代码热更新
Leader 俊:cordova代码热更新 https://zhuanlan.zhihu.com/p/48316142
本文参考:
1、http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html