您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iProcess 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
     
   
 订阅
  捐助
cordova入门
 
579 次浏览     评价:  
2019-4-23
 
编辑推荐:
本文来自于cnblogs,文章介绍了Cordova安装和配置,以及项目的创建和操作,Cordova项目目录结构等相关内容。

Cordova入门

公司需要搞跨平台开发,之前的旧项目是采用Ionic(另一种跨平台方案)实现的,当初一头扎进去学习ionic,发现是个大坑,后来才发现,Ionic内部核心也是Cordova实现的,所以又一头扎进去,发现。。。。

无论如何,做下笔记

Cordova安装和配置

因为Cordova是由npm管理的,所以需要安装Nodejs环境,最好是最新的,在安装之前查看一下自己是否已经安装过NodeJs了(终端输入node -v,有输出则有安装)

如果有的话,别管什么版本了,卸载了吧,我保证比你可能会有两个nodejs版本或者安装了一个Ionic1(还有Ionic2,Ionic3)的时候感到轻松。

然后

安装最新的nodejs,他会自动包含npm了

终端npm install cordova -g

安装完毕。over

Cordova创建项目

可以很简单

终端进入你插件项目的目录cd ????

运行ionic create CordovaDemo

CordovaDemo:你项目的名字,项目包名,项目文件夹名

也可以稍微复杂一点

终端进入你插件项目的目录cd ????

运行ionic create CordovaDemo com.cordova.app HelloWorld

CordovaDemo:项目文件夹名

com.first.helloworld:项目包名

Helloworld:项目的名字

创建完毕。over

添加平台

创建的Cordova默认是没有任何平台的,我们需要为项目添加我们需要的平台:

进入目录cd CordovaDemo

添加安卓平台cordova platform add android

添加iOS平台cordova platform add ios

一般就这两个平台了

运行

也是很简单的。运行安卓cordova run android,运行ioscordova run ios

这里需要注意的是运行ios的时候我估计是需要证书等原因,反正我没能够在终端上直接运行的。我的解决办法是,我有XCode(iOS开发工具)~~

直接进入目录进入platforms,可以看到你的安卓和iOS平台,打开iOS里面其实就是一个iOS项目来的了。我们可以直接打开.xcworkspace后缀的文件就会运行xcode了,然后就是我的能做的事情了。

Cordova项目目录结构

刚刚我们安装和配置好一个Cordova项目之后,我们打开项目文件件应该这样的文件结构

一个个来介绍

config.xml

这个文件是cordova项目的配置文件,负责整个项目的一些配置信息,简单看一下我的一个项目的信息:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-navigation href="http://ionic.local/*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^6.2.3" />
<engine name="ios" spec="^4.4.0" />
<plugin name="com.telerik.plugins.nativepagetransitions" spec="git+https://github.com/Telerik-Verified-Plugins/NativePageTransitions.git" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>

讲一些主要的标签吧:

widget:id代表项目包名 version代表版本

name:项目名

description:项目描述

author:作者信息

content:src代表文件入口,默认是www目录下的index.html文件,也可以指定为域名。也就是我们所说的直接一个webview加载网站变身应用了

allow-navigation:页面跳转的时候是能够在应用内打开的地址(例如:如果上面的入口是baidu.com,如果你没添加这个的话,每次都会打开手机的浏览器打开网页)

platform:平台

allow-itent:平台下的服务

plugin:插件信息

主要修改的东西有:项目的包名(打包时候用到),项目名,入口文件,allow-navigation。其余的一般通过命令行添加自动生成。

hooks

不知道,没用过,看官方介绍吧,我不用这个东西依然能做个项目(简单的)。

说到这里,大家看官网的时候发现可以选择语言的,这里建议选择英文原版,因为。。。。。中文版的是有欠缺的。。。。官网。。。。

node_modules

用过npm都知道这个东西是什么来的了。主要是npm用来解决引入一些包的,可以不用特别在意,使用版本管理器的时候也会忽略这个文件夹内的管理,因为不同平台(mac,window,linus)下的包貌似会不同,他会将依赖的包写入一个文件内,等到下载项目的时候再根据环境导入不同的包。

所以才经常看到从github上面下载一些项目下来,都需要我们npm install了,这句命令就是根据他的文件引入对应环境的包了。

package.json

这个文件是一个描述文件,他是node的产物。简单看一下:

{
"name": "helloworld",
"displayName": "HelloCordova",
"version": "1.0.0",
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Apache Cordova Team",
"license": "Apache-2.0",
"dependencies": {
"com.telerik.plugins.nativepagetransitions": "git+https://github.com/Telerik-Verified-Plugins/NativePageTransitions.git",
"cordova-android": "^6.2.3",
"cordova-ios": "^4.4.0",
"cordova-plugin-whitelist": "^1.3.2"
},
"cordova": {
"plugins": {
"com.telerik.plugins.nativepagetransitions": {},
"cordova-plugin-whitelist": {}
},
"platforms": [
"android",
"ios"
]
}
}

可以看到,如果是一个原生开发人员,不懂得跨平台开发,不懂得node的,这个文件是看起来比较复杂的(我当初是这样的感觉)。不过其实他不需要我们一个个键值对打出来,他是自动生成的。

platforms

这个文件夹下的就是我们的各个平台的项目了。修改里面的东西需要原生开发经验。

plugins

这个文件夹是cordova的插件目录。

插件的作用:可以通过插件来使用js代码调用原生代码,由于可以通过原生代码调起设备的硬件,所以可以以此来使用js调起设备硬件。

我们所说Cordovad的一个架构应该是这样的

可以看到我们做的就是一个webapp,然后通过安卓或者ios的web控件(iOS的WKWebView或UIWebVIew,安卓就不知道了),来讲整个页面嵌入到原声应用当中,但是我们平常使用的HTML,CSS,JavaScript并不能够调用到设备的摄像头,设备信息,本地存储等功能,那么怎么办呢?这个时候就是我们插件出马了,我之前也自己整理过一个插件的编写,简单的来说就是通过js来调用原生代码(OC,Java)来实现这些功能的。所以编写插件需要原生开发经验,但是我们大部分时候不需要自己去编写,因为有插件库,一般使用的插件都会有的了。

添加插件的命令:

cordova plugin add cordova-plugin-device

推荐一些可能用到的插件:

cordova-plugin-device 基本设备信息

cordova-plugin-network-information 网络连接信息

cordova-plugin-battery-status 电池状态信息

cordova-plugin-device-motion 加速度信息

cordova-plugin-device-orientation 指南针信息

cordova-plugin-geolocation 定位数据

cordova-plugin-camera 相机

cordova-plugin-media-capture 媒体捕获

cordova-plugin-media 媒体播放器

cordova-plugin-file 访问文件

cordova-plugin-file-transfer 文件传递

cordova-plugin-dialogs 消息提示对话框

cordova-plugin-vibration 振动提醒

cordova-plugin-contacts 联系人

cordova-plugin-globalization 全球化

cordova-plugin-splashscreen 闪屏(启动画面)

cordova-plugin-inappbrower 浏览器

cordova-plugin-console 控制台

cordova-plugin-statusbar 状态栏

res

res也就是Resources了,专门放我们的资源的文件夹。里面一般就icon文件夹代表项目图片,screen文件夹代表项目的开启页面。

www

www文件夹就是我们真正编码的地方了。内部默认一个index.html作为项目的入口文件,其余的三个文件夹css,img,js也不用多说了,真正完成我们一个app的各个页面,各种功能就是在这里实现的了。

接下来主要解释一个index.html和index.js文件吧

index.html

这个文件是我们的默认首页文件,当然他也可以不是我们的首页文件。之前就说过,cordova项目的首页是在 config.xml 文件内的 content 的 src 属性内设置的。默认是 index.html 就是指这个文件了。

内容是:

<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

一眼看完,没多少东西解释的。

不过这里我觉得唯一要注意的地方,也是我当初刚学纠结的地方。就是引入的cordova.js文件

<script type="text/javascript" src="cordova.js"></script>

这句代码咋眼看上去没什么问题,由于我做项目的时候出现了一点问题,我怀疑是 cordova.js 没加载导致的,所以在找这句代码的时候才发现问题来了。

这个是 www 目录下的文件

忽视 .DS_Store 这个是mac系统的文件,与cordova无关,与项目无关

可以看到<script type="text/javascript" src="js/index.js"></script>这句代码引入的index.js是没有任何问题的。

可是!!!我的cordova.js文件呢???引入了一个没有的文件???

最终查出来,这个cordova.js文件他是会根据不同的平台而形成不同的cordova.js文件的。。。吐血。。。

可以看到,我最终生成的iOS平台下的目录

其他东西看不懂没关系,看到 www 目录下就好了,index.html 同级下生成了 cordova.js 文件了。

所以,如果遇到这个问题,别纠结这个文件为什么不存在了。

index.js

先看代码

var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
},

// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);
}
};

也不复杂,就一个对象,里面有几个方法罢了。

一开始调用 app.initialize() 方法,那就看这个方法做了什么,简单来说,添加一个事件绑定,当设备准备好之后调用 onDeviceReady 方法,而在这个方法内调用一些事件绑定而已了,一般在这里做的事情就判断一下我们插入的插件是否已经激活,以及做插件对应的事情了。

大概整个cordova项目就是这样的了,接下来总结一下Ionic的项目基本结构,over。

 
   
579 次浏览  评价: 差  订阅 捐助
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号