cordova webApp开发基础
基础环境 cordova的依赖环境需要安装nodejs和npm工具,在mac下可以通过brew来进行安装。
node -v
npm -v
如果没有安装的话可以参考这篇文章进行安装
开始安装cordova
// 第一次安装
npm install -g cordova
npm install -g ionic
npm install -g ios-sim
npm install bower
并将bower添加环境变量
// 更新
npm update -g cordova
npm update -g ionic
cordova create MyFirstApp // 创建项目
cd MyFirstApp // 进入项目目录
cordova platform add browser // 添加pc端的浏览器平台
cordova run browser // 运行项目
添加移动平台的工程配置
cd MyFirstApp // 进入项目目录
可以利用命令行查看支持的平台cordova platform
Installed platforms:
browser 4.1.0
ios 4.1.1
Available platforms:
amazon-fireos ~3.6.3 (deprecated)
android ~5.1.1
blackberry10 ~3.8.0
firefoxos ~3.6.3
osx ~4.0.1
webos ~3.7.0
通过ionic来运行
ionic platform add ios
ionic build ios
ionic emulate ios
// 或者直接使用cordova的指令
cordova platform add ios
cordova run ios
开发基础入门
ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。 ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。
具体demo可以参见ionic中文网 ionic-china
HTML 指超文本标签语言。HTML 5 是下一代的 HTML。CSS 指层叠样式表(Cascading Style Sheets)。CSS3 是最新的 CSS 标准。
在我们移动开发来说,html相当于是客户端开发的一些控件,而css则相当于是autolayout和属性设置。html比较常用,就不说了,下面着重对css案例做一下解析,如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
AngularJS 通过新的属性和表达式扩展了 HTML。AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。AngularJS 学习起来非常简单。后面我们会通过实例来讲解angular js的一些基本用法.
Cordova webApp的运行过程解析
项目结构解析
一般来说一个项目可能会使用一些第三方的插件问题,再加上各个开发运行的平台差异等特性,所以当大家一起合作开发的时候会维护一个共同的ReadMe文件,里面记录了包含的插件安装等使用方法。每个人都需要经过安装平台 -> 安装插件 -> 运行这个过程
安装相应的平台
cordova platforms 可以查看可以安装的平台
cordova platform add ios 安装iOS平台
cordova platform rm android --save 删除已经安装的平台
安装一些依赖插件等
cordova plugin add cordova-plugin-camera 安装相机插件
cordova plugin rm camera --save // 删除相机插件
cordova plugin ls 查看已经安装的插件
如果安装jpush插件
cordova plugin add jmessage-phonegap-plugin --variable APP_KEY=Your_app_key
运行工程
ionic build ios
cd platforms/ios
里面是个xcode工程
打开xcode工程,配置好签名bundleID等一系列的配置工作,可以运行调试并打包发布了