【連載】滬江Web前端技術團隊打造【小程序實戰文章+視頻教程】登場啦！

小程序2017.08.31更新大版本，本系列文章暫停更新，正在製做最新版本內容，敬請期待吧

🇨🇳 微信小程序課程，面向全部具有前端基礎知識的同窗 🇨🇳

微信小程序自發布以來，廣受你們關注。小程序發佈初期，顛覆現有移動互聯網格局，讓不少開發者欣喜若狂。現在，隨着小程序入口愈來愈多的開放，愈來愈多的開發者加入到小程序的開發大軍中。滬江Web前端團隊打造了【小程序實戰文章+視頻教程】是爲初學者量身打造的一系列課程。

§ 核心人員

aximario

pavelShen

pangz1

tinyuen

roeis

sqzhuyi

longdiandian9

brucecham

§ 閱讀要求

讀者須要具有但不限於如下技能

• HTML
• JavaScript es6更佳
• CSS

一共四部分十五小節，適合七天的訓練營。
從如今開始，我僞裝你已經掌握了 html、 css以及 ES6 ☝️

§ 目標導向

本教程以實戰項目驅動，最終實現一個完整的小程序

列表頁面：請求接口，並展現列表頁面數據

詳情頁面：以文章id爲參數，獲取文章詳情

詳情頁面，點擊圖片，展現大圖

§ 教程大綱

• 第一章：小程序初級入門教程
  • appID準備
  • 工具安裝
  • 目錄說明
  • 小試牛刀
  • 發佈流程
• 第二章：小程序中級實戰教程：預備篇
  • 項目結構設計
  • 提取 util 公用方法
  • 封裝網絡請求及 mock 數據
• 第三章：小程序中級實戰教程：列表篇
  • 列表-靜態頁面製做
  • 列表-頁面邏輯處理
  • 列表-視圖與數據關聯
  • 列表-閱讀標識
• 第四章：小程序中級實戰教程：詳情篇
  • 詳情-頁面製做
  • 詳情-視圖渲染
  • 詳情-功能完善
• 第五章：課後做業練習

§ 學習方式

教程以 git 分支的方式管理，好比學習第三章第一節 列表-靜態頁面製做 時候，須要切換到 ch3-1 分支，而後把分支目錄 code/ 導入到微信開發工具編輯器，跟隨教程進行實戰代碼操做。操做以下：

1. 經過 git 把項目複製到本地

   git clone https://github.com/ikcamp/wechat-xcx-tutorial複製代碼

2. 切換目錄

   cd wechat-xcx-tutorial複製代碼

3. 在當前目錄下切換分支

   git checkout ch3-1複製代碼

注意： 每一分支的 code/ 內容，皆是上一節內容操做完成後的結果。好比 ch3-2/code 就是上一節課程 ch3-1/code 隨教程操做後的結果。

§ 教程完整代碼

教程的完整代碼在分支 完整代碼 中，請自行查閱

§ 課後做業

整個教程學習事後，能夠切換到 教程做業 分支，並完成做業，目錄下有相應的做業答案，請自行完成練習。

【下一章】【小程序實戰文章+視頻教程】第一章：小程序初級入門教程 - appID準備

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。