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

一些中文参考资料

1.w3school

2.ionic中文网

3.菜鸟教程

4.好用的一些组件

5.angularjs 中文网

本页面支持AMP友好显示:Cordova Web App开发入门

如果觉得我的文章对您有用,请随意打赏。如果有其他问题请联系博主QQ(909491009)或者下方留言!

发表评论

电子邮件地址不会被公开。 必填项已用*标注