零基础学习开发Ionic app

  • 原文不知道什么原因被锁定了,已发邮件咨询原因,所以先再发一遍(┬_┬)—(2019年2月21日)

本文合适谁?

  • 本文标题强调了“零基础学习”,所以本文适合想学前端的人,如公司前端实习生,后端开发人员
  • 如果你已经是1年+前端开发者,可以忽略本文前半截内容,直接跳到ionic app开发相关资源介绍,也可以给本文找毛病

本文目标

  • 本文想让没有前端开发技能的人通过学习前端开发知识,来开发ionic app
  • 前端开发三大基础技能知识分别是HTML、CSS和JavaScript,网上有超多学习资料,但是比较杂内容也比较多,对前端新人来说不知道哪些是重点,哪些是常用的,哪些是必须要掌握的。本文则通过开发ionic app需要学习的知识,告诉你哪些是重点
  • 由于我们目标是开发app,可以不考虑语法的浏览器兼容性问题,所以在开发时优先使用新语法html5,css3和es6,所以针对新语法尤其es6需要重点学习

HTML

  • html是用来写网页结构的,开发网页的第一步我们会考虑这个网页是什么样子,比如网页左边是菜单,右边是内容,内容里面有图片和文字,这种布局都是各种html标签
  • 了解一下html的发展史:html发展史1html发展史2
  • 学习html—菜鸟教程html篇
    下图是菜鸟教程html篇菜单,其中红色框内是必须掌握的,如果菜鸟教程讲的不够清楚需要百度其他资料自行学习,如在MDN上搜索,黑色框内可以不用看或者说暂时不用学习,剩余的需要了解学习
  • html学完后你应该知道:html常用标签和html5语义化标签;内联元素和块级元素分别有哪些,它们之间的差异;localStorage和 sessionStorage差异
  • 本节学习预计耗时2个工作日

CSS

  • html是用来写网页结构的,那css是给结构添加样式的,如字体大小、背景颜色、标签占据的尺寸和间距等都是css样式
  • 了解一下css发展史:css发展史1css发展史2
  • 学习css—菜鸟教程css篇
    红色框内必知必会,黑色框内暂时不学,其他的过一遍,如果某个知识点菜鸟教程没讲清楚则自行百度
  • css学完后你还应该知道:css选择器的优先级,css盒子模型,css定位,css弹性布局(flex布局)
  • 本节学习预计耗时2个工作日

JavaScript

ES6

前端发展史

选择浏览器

  • 既然是前端开发,前端的界面展示,调试工作都需要在浏览器环境下运行,选择一款合适的浏览器很重要
  • 关于浏览器和浏览器内核点这里
  • 这里推荐使用chrome浏览器,国内的360和QQ浏览器也都是在chrome内核基础上封装的,所以我一般使用的是QQ浏览器,chrome作为备用,QQ浏览器同步书签快,应用商店不用翻墙,各种设置和快捷键更人性化

选择IDE

  • 作为开发人员选择一款IDE并能够熟练使用时非常非常必要的
  • 据我了解目前流行的前端IDE有sublime text3Visual Studio CodeWebStorm
  • 我这里推荐使用WebStorm,原因如下,至于你到底选择哪个都可以
    1. 除了WebStorm其他两款我基本没用过,其他两款比webstorm轻快,但没有webstorm默认集成的功能丰富
    2. WebStorm是jetbrains公司的一款产品,该公司还有写java的IntelliJ IDEA,写python的PyCharm甚至还有写android的android studio,这些产品的风格界面、设置功能大同小异,熟悉一个上手另一个很快

      注:该公司产品是收费的,获取注册码可以点这里

git

  • 安装完WebStorm顺便安装git,git是下载代码并管理代码的工具,一般项目由多人开发,需要共享代码与资源,以及避免代码冲突;github是最知名的代码托管服务器,你可以尝试在github上搜索并下载代码到本地
  • 点击这里下载git,安装过程是一路点下一步,不用更改配置
  • git工具有很多命令,学习起来不容易,有兴趣可以看菜鸟教程或自行百度,WebStorm集成了git的常见操作会让git使用起来很简单,一般我们使用它更新代码、上传代码、查看代码历史记录

TypeScript

  • TypeScript语法是JavaScript的更高级版,因为更高级很多语法浏览器不支持,但是TypeScript提供了编译功能,其语法在浏览器环境运行前,会先编译成浏览器支持的语法,如es6或es5
  • 我们只需学TypeScript的基本语法即可,关于与项目集成和编译选项的配置我们的app项目脚手架已经配置好了
  • 学习TypeScript—TypeScript中文网
    如下图TypeScript只需看红色框内的内容,学的内容不多,但是不简单,请仔细阅读
  • 本节学习预计耗时1个工作日

Angular

  • Angular目前(2018年11月27日)版本已经是7.1.x,但自从Angular2以来,基本上是向下兼容的,语法大同小异,目前使用Angular版本4、5、6居多,Angular1基本上被淘汰了
  • 学习Angular—Angular中文网
    如下图尽管只需看快速上手教程核心知识三个菜单下的内容,Angular文档内容还是比较多的,但是文档质量很高,各位慢慢阅读
    红色区域内必知必会,黑色区域内暂时不用看,其余快速浏览一遍
  • 本节学习预计耗时4个工作日

Ionic

  • 关于ionic版本,目前(2018年11月27日)ionic稳定版本是3.9.x,因为ionic3和ionic2是向下兼容的,语法一致,所以ioinc2项目可以平滑升级到ioinc3;由于ionic1使用angular1,所以除了旧项目见得到,新项目肯定没人用ionic1开发;ionic4预计到2019年初才能发布稳定版,ionic4改动也比较大,ionic4专注做ui,至于选择vue,react还是angular作为js框架由开发者自行选择;所以我们主要学ionic3文档进行开发

  • 学习Ionic—Ionic官网

  • 现在(2019年2月12日 )ionic已经发布ionic4稳定版本,如下图在官网右上角可以切换到v3文档

  • 现在(2019年2月20日 )我正在使用ionic4搭建app开发模版。注意:本文后面的项目模版及本简书教程大部分是基于ionic3开发的

  • 本节学习预计耗时2个工作日

Scss/Sass

  • Scss是css预编译器,也可以说是css的高级版写法,具体有啥高级特性,看完文档你就知道了
  • 由于Scss完全兼容css语法,所以即使你不学scss,在.scss文件中写css也是可以的,无非就是不用他的高级特性
  • Sass是Scss的简化格式,Sass用空格缩减代替花括号{}
  • 学习Scss—Scss中文网
    如下图只需看快速入门菜单即可

ionic开发学习资源链接汇总

https://www.jianshu.com/p/7d1577539183

开始创建一个ionic app

学习ionic开发模版

推荐阅读更多精彩内容