小程式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/
匯入到微信開發工具編輯器,跟隨教程進行實戰程式碼操作。操作如下:
通過
git
把專案複製到本地git clone https://github.com/ikcamp/wechat-xcx-tutorial複製程式碼
切換目錄
cd wechat-xcx-tutorial複製程式碼
在當前目錄下切換分支
git checkout ch3-1複製程式碼
注意: 每一分支的 code/
內容,皆是上一節內容操作完成後的結果。比如 ch3-2/code
就是上一節課程 ch3-1/code
隨教程操作後的結果。
§ 教程完整程式碼
教程的完整程式碼在分支
完整程式碼
中,請自行查閱
§ 課後作業
整個教程學習過後,可以切換到
教程作業
分支,並完成作業,目錄下有相應的作業答案,請自行完成練習。
【下一章】【小程式實戰文章+視訊教程】第一章:小程式初級入門教程 - appID準備
iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。