Cordova Web App开发入门

作者: shaneZhang 分类: 互联网技术发布时间: 2016-07-05 10:01

Cordova Web App开发入门

涉及的框架及基础

ionic

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

1.ionic 基于Angular语法，简单易学。

2.ionic 是一个轻量级框架。

3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。

4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。

5.ionic 专注原生，让你看不出混合应用和原生的区别

6.ionic 提供了强大的命令行工具。

7.ionic 性能优越，运行速度快。
HTML/CSS

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;
    }

*js

*angular js

AngularJS 通过新的属性和表达式扩展了 HTML。AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。AngularJS 学习起来非常简单。后面我们会通过实例来讲解angular js的一些基本用法.

开始你的web app开发之旅

首先需要安装nodejs,如果没有安装请点击传送门
安装cordova和ionic


  // 第一次安装
  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

*创建应用并运行


  //  创建应用
  ionic start myApp tabs
  ionic platform add ios
  ionic build ios
  ionic emulate ios
  // 或者直接使用cordova的指令
  cordova platform add ios
  cordova run ios