零基礎(chǔ)學(xué)習(xí)開發(fā)Ionic app

  • 原文不知道什么原因被鎖定了，已發(fā)郵件咨詢原因，所以先再發(fā)一遍(┬＿┬)—（2019年2月21日）

本文合適誰？

  • 本文標(biāo)題強(qiáng)調(diào)了“零基礎(chǔ)學(xué)習(xí)”，所以本文適合想學(xué)前端的人，如公司前端實(shí)習(xí)生，后端開發(fā)人員
  • 如果你已經(jīng)是1年+前端開發(fā)者，可以忽略本文前半截內(nèi)容，直接跳到ionic app開發(fā)相關(guān)資源介紹，也可以給本文找毛病

本文目標(biāo)

  • 本文想讓沒有前端開發(fā)技能的人通過學(xué)習(xí)前端開發(fā)知識，來開發(fā)ionic app
  • 前端開發(fā)三大基礎(chǔ)技能知識分別是HTML、CSS和JavaScript，網(wǎng)上有超多學(xué)習(xí)資料，但是比較雜內(nèi)容也比較多，對前端新人來說不知道哪些是重點(diǎn)，哪些是常用的，哪些是必須要掌握的。本文則通過開發(fā)ionic app需要學(xué)習(xí)的知識，告訴你哪些是重點(diǎn)
  • 由于我們目標(biāo)是開發(fā)app，可以不考慮語法的瀏覽器兼容性問題，所以在開發(fā)時(shí)優(yōu)先使用新語法html5，css3和es6，所以針對新語法尤其es6需要重點(diǎn)學(xué)習(xí)

HTML

  • html是用來寫網(wǎng)頁結(jié)構(gòu)的，開發(fā)網(wǎng)頁的第一步我們會考慮這個(gè)網(wǎng)頁是什么樣子，比如網(wǎng)頁左邊是菜單，右邊是內(nèi)容，內(nèi)容里面有圖片和文字，這種布局都是各種html標(biāo)簽
  • 了解一下html的發(fā)展史：html發(fā)展史1、html發(fā)展史2
  • 學(xué)習(xí)html—菜鳥教程html篇
    下圖是菜鳥教程html篇菜單，其中紅色框內(nèi)是必須掌握的，如果菜鳥教程講的不夠清楚需要百度其他資料自行學(xué)習(xí)，如在MDN上搜索，黑色框內(nèi)可以不用看或者說暫時(shí)不用學(xué)習(xí)，剩余的需要了解學(xué)習(xí)
  • html學(xué)完后你應(yīng)該知道：html常用標(biāo)簽和html5語義化標(biāo)簽；內(nèi)聯(lián)元素和塊級元素分別有哪些，它們之間的差異；localStorage和 sessionStorage差異
  • 本節(jié)學(xué)習(xí)預(yù)計(jì)耗時(shí)2個(gè)工作日

CSS

  • html是用來寫網(wǎng)頁結(jié)構(gòu)的，那css是給結(jié)構(gòu)添加樣式的，如字體大小、背景顏色、標(biāo)簽占據(jù)的尺寸和間距等都是css樣式
  • 了解一下css發(fā)展史：css發(fā)展史1、css發(fā)展史2
  • 學(xué)習(xí)css—菜鳥教程css篇
    紅色框內(nèi)必知必會，黑色框內(nèi)暫時(shí)不學(xué)，其他的過一遍，如果某個(gè)知識點(diǎn)菜鳥教程沒講清楚則自行百度
  • css學(xué)完后你還應(yīng)該知道：css選擇器的優(yōu)先級，css盒子模型，css定位，css彈性布局（flex布局）
  • 本節(jié)學(xué)習(xí)預(yù)計(jì)耗時(shí)2個(gè)工作日

JavaScript

  • html+css寫出來的頁面是靜態(tài)網(wǎng)頁，使用JavaScript讓頁面動態(tài)化，如根據(jù)從后臺查詢出來的數(shù)據(jù)展示在頁面上
  • 了解一下JavaScript發(fā)展史：JavaScript發(fā)展史1、JavaScript發(fā)展史2
  • 學(xué)習(xí)JavaScript—菜鳥教程JavaScript篇
  • 本節(jié)學(xué)習(xí)預(yù)計(jì)耗時(shí)3個(gè)工作日

ES6

  • 學(xué)習(xí)ES6—菜鳥教程ES6篇
    如果菜鳥教程講的不夠明白，可以看這里：http://es6.ruanyifeng.com/
  • 學(xué)完ES6需要熟練使用箭頭函數(shù)和Promise
  • 本節(jié)學(xué)習(xí)預(yù)計(jì)耗時(shí)2個(gè)工作日

前端發(fā)展史

選擇瀏覽器

  • 既然是前端開發(fā)，前端的界面展示，調(diào)試工作都需要在瀏覽器環(huán)境下運(yùn)行，選擇一款合適的瀏覽器很重要
  • 關(guān)于瀏覽器和瀏覽器內(nèi)核點(diǎn)這里
  • 這里推薦使用chrome瀏覽器，國內(nèi)的360和QQ瀏覽器也都是在chrome內(nèi)核基礎(chǔ)上封裝的，所以我一般使用的是QQ瀏覽器，chrome作為備用，QQ瀏覽器同步書簽快，應(yīng)用商店不用翻墻，各種設(shè)置和快捷鍵更人性化

選擇IDE

  • 作為開發(fā)人員選擇一款I(lǐng)DE并能夠熟練使用時(shí)非常非常必要的
  • 據(jù)我了解目前流行的前端IDE有sublime text3、Visual Studio Code和WebStorm
  • 我這里推薦使用WebStorm，原因如下，至于你到底選擇哪個(gè)都可以
    1. 除了WebStorm其他兩款我基本沒用過，其他兩款比webstorm輕快，但沒有webstorm默認(rèn)集成的功能豐富
    2. WebStorm是jetbrains公司的一款產(chǎn)品，該公司還有寫java的IntelliJ IDEA,寫python的PyCharm甚至還有寫android的android studio，這些產(chǎn)品的風(fēng)格界面、設(shè)置功能大同小異，熟悉一個(gè)上手另一個(gè)很快

      注：該公司產(chǎn)品是收費(fèi)的，獲取注冊碼可以點(diǎn)這里

git

  • 安裝完WebStorm順便安裝git，git是下載代碼并管理代碼的工具，一般項(xiàng)目由多人開發(fā)，需要共享代碼與資源，以及避免代碼沖突；github是最知名的代碼托管服務(wù)器，你可以嘗試在github上搜索并下載代碼到本地
  • 點(diǎn)擊這里下載git，安裝過程是一路點(diǎn)下一步，不用更改配置
  • git工具有很多命令，學(xué)習(xí)起來不容易，有興趣可以看菜鳥教程或自行百度，WebStorm集成了git的常見操作會讓git使用起來很簡單，一般我們使用它更新代碼、上傳代碼、查看代碼歷史記錄

TypeScript

  • TypeScript語法是JavaScript的更高級版，因?yàn)楦呒壓芏嗾Z法瀏覽器不支持，但是TypeScript提供了編譯功能，其語法在瀏覽器環(huán)境運(yùn)行前，會先編譯成瀏覽器支持的語法，如es6或es5
  • 我們只需學(xué)TypeScript的基本語法即可，關(guān)于與項(xiàng)目集成和編譯選項(xiàng)的配置我們的app項(xiàng)目腳手架已經(jīng)配置好了
  • 學(xué)習(xí)TypeScript—TypeScript中文網(wǎng)
    如下圖TypeScript只需看紅色框內(nèi)的內(nèi)容，學(xué)的內(nèi)容不多，但是不簡單，請仔細(xì)閱讀
  • 本節(jié)學(xué)習(xí)預(yù)計(jì)耗時(shí)1個(gè)工作日

Angular

  • Angular目前(2018年11月27日)版本已經(jīng)是7.1.x，但自從Angular2以來，基本上是向下兼容的，語法大同小異，目前使用Angular版本4、5、6居多，Angular1基本上被淘汰了
  • 學(xué)習(xí)Angular—Angular中文網(wǎng)
    如下圖盡管只需看快速上手、教程和核心知識三個(gè)菜單下的內(nèi)容，Angular文檔內(nèi)容還是比較多的，但是文檔質(zhì)量很高，各位慢慢閱讀
    紅色區(qū)域內(nèi)必知必會，黑色區(qū)域內(nèi)暫時(shí)不用看，其余快速瀏覽一遍
  • 本節(jié)學(xué)習(xí)預(yù)計(jì)耗時(shí)4個(gè)工作日

Ionic

  • 關(guān)于ionic版本，目前(2018年11月27日)ionic穩(wěn)定版本是3.9.x，因?yàn)閕onic3和ionic2是向下兼容的，語法一致，所以ioinc2項(xiàng)目可以平滑升級到ioinc3；由于ionic1使用angular1，所以除了舊項(xiàng)目見得到，新項(xiàng)目肯定沒人用ionic1開發(fā)；ionic4預(yù)計(jì)到2019年初才能發(fā)布穩(wěn)定版，ionic4改動也比較大，ionic4專注做ui，至于選擇vue，react還是angular作為js框架由開發(fā)者自行選擇；所以我們主要學(xué)ionic3文檔進(jìn)行開發(fā)

  • 學(xué)習(xí)Ionic—Ionic官網(wǎng)

  • 現(xiàn)在（2019年2月12日 ）ionic已經(jīng)發(fā)布ionic4穩(wěn)定版本，如下圖在官網(wǎng)右上角可以切換到v3文檔

  • 現(xiàn)在（2019年2月20日 ）我正在使用ionic4搭建app開發(fā)模版。注意：本文后面的項(xiàng)目模版及本簡書教程大部分是基于ionic3開發(fā)的

  • 本節(jié)學(xué)習(xí)預(yù)計(jì)耗時(shí)2個(gè)工作日

Scss/Sass

  • Scss是css預(yù)編譯器，也可以說是css的高級版寫法，具體有啥高級特性，看完文檔你就知道了
  • 由于Scss完全兼容css語法，所以即使你不學(xué)scss，在.scss文件中寫css也是可以的，無非就是不用他的高級特性
  • Sass是Scss的簡化格式，Sass用空格縮減代替花括號｛｝
  • 學(xué)習(xí)Scss—Scss中文網(wǎng)
    如下圖只需看快速入門菜單即可

ionic開發(fā)學(xué)習(xí)資源鏈接匯總

http://www.itdecent.cn/p/7d1577539183

開始創(chuàng)建一個(gè)ionic app

學(xué)習(xí)ionic開發(fā)模版

  • 模版源碼地址：https://github.com/yanxiaojun617/ionic2_tabs/

  • 模版詳細(xì)介紹：http://www.itdecent.cn/p/1c6e5fe9e255

    該模版實(shí)現(xiàn)了app開發(fā)中常用功能，組件，第三方服務(wù)等
    下載該模版并運(yùn)行起來，根據(jù)里面的功能查看代碼學(xué)習(xí)，最后根據(jù)你的思路模仿此模版新建一個(gè)適合自己的模版，你就通關(guān)了

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容