iKcamp出品微信小程序教學共5章16小節彙總(含視頻)

<h2 align="center"> 🇨🇳 微信小程序課程，面向全部具有前端基礎知識的同窗 🇨🇳 </h2>

閱讀要求

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

• HTML
• JavaScript es6更佳
• CSS

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

<br>

目標導向

本教程以實戰項目驅動，以滬江英語微信小程序項目框架爲基礎，最終還原一個完整的小程序

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

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

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

教程大綱 - 完整視頻地址

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

學習方式

教程以 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 隨教程操做後的結果。  

<br>

<a>§ 教程完整代碼</a>

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

<br>

<a>§ 課後做業</a>

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

<br>

<a>§ 核心人員</a>

<table> <tbody> <tr> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/9a734087ebdc734c00b850e4561f9f01"> <br> <a href="https://github.com/aximario">aximario</a> <p></p> <p></p> </td> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/e2dfd0cd09608f7cb6788596615b5823"> <br> <a href="https://github.com/pavelShen">pavelShen</a> <p></p> <p></p> </td> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/d438e0a92b80501a9810fe9a505525ff"> <br> <a href="https://github.com/pangz1">pangz1</a> <p></p> <p></p> </td> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/1bac111148a845d14354b928949b643b"> <br> <a href="https://github.com/tinyuen">tinyuen</a> <p></p> <p></p> </td> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/f60c08f4075a83504d669d19690738d9"> <br> <a href="https://github.com/roeis">roeis</a> <p></p> <p></p> </td> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/28a19b2829af5cbb059451f0e37b62a5"> <br> <a href="https://github.com/sqzhuyi">sqzhuyi</a> <p></p> <p></p> </td> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/4686ec99e3b5a1a86767ee8a4a8a5d05"> <br> <a href="https://github.com/longdiandian9">longdiandian9</a> <p></p> <p></p> </td> <td align="center" valign="top"> <img width="85" height="85" src="https://user-gold-cdn.xitu.io/2017/11/6/887925bf222d1f0730a3231649e4ac3e"> <br> <a href="https://github.com/brucecham">brucecham</a> <p></p> <p></p> </td> </tr> </tbody> </table>

<br/>

§ 討論活動區

QQ羣：661407609

iKcamp官網：http://www.ikcamp.com

訪問官網更快閱讀所有免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基於最新版1.0開發者工具之初中級培訓教程分享》。 包含：文章、視頻、源代碼

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

【11月11號】上海iKcamp最新活動

報名地址：http://www.huodongxing.com/event/5409924174200

與「每天練口語」小程序總榜排名第4、教育類排名第一的研發團隊，面對面溝通交流。

合做社區