Cordova入门及环境部署

zhanghaibo369

于 2021-08-27 08:57:42 发布

阅读量478

点赞数

分类专栏： cordova 文章标签： ios

原文链接：https://zhuanlan.zhihu.com/p/48306521

版权

cordova 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了Cordova的开发模式，包括NativeApp、WebApp、HybridApp和ReactNative的差异。重点讲解了Cordova的原理、架构以及如何在Mac环境下安装和创建Cordova工程。通过一个简单的生命周期监测demo，展示了如何构建和运行Cordova项目。最后提到了代码热更新和调试方法，帮助开发者更好地理解和运用Cordova进行跨平台移动应用开发。

摘要由CSDN通过智能技术生成

一、概述

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应用架构的高级视图。

二、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

2、https://blog.csdn.net/csdn100861/article/details/78585333

zhanghaibo369

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Cordova入门及环境部署

一、概述1、移动端的开发模式Native App传统的原生APP开发模式,Android基于Java语言,底层调用Google的API;iOS基于OC或者Swift语言,底层调用Apple官方提供的API。体验最好。Web App移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指SPA(SinglePageApplication)模式开发出的网站。体验最差。Hybrid App混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5..
复制链接

扫一扫