讀者需要具備但不限于以下技能

  • HTML
  • JavaScript es6更佳
  • CSS

一共四部分十五小節(jié)，適合七天的訓(xùn)練營(yíng)。

從現(xiàn)在開(kāi)始，我假裝你已經(jīng)掌握了 html 、 css 以及 ES6 :point_up:

目標(biāo)導(dǎo)向

本教程以實(shí)戰(zhàn)項(xiàng)目驅(qū)動(dòng)，以滬江英語(yǔ)微信小程序項(xiàng)目框架為基礎(chǔ)，最終還原一個(gè)完整的小程序

列表頁(yè)面：請(qǐng)求接口，并展示列表頁(yè)面數(shù)據(jù)

詳情頁(yè)面：以文章id為參數(shù)，獲取文章詳情

詳情頁(yè)面，點(diǎn)擊圖片，展示大圖

教程大綱 -完整視頻地址

  • 先進(jìn)章：小程序初級(jí)入門(mén)教程
    • appID準(zhǔn)備
      • 文章視頻： camp.qianduan.group/xcx/1/1/1
    • 工具安裝
      • 文章視頻： camp.qianduan.group/xcx/1/1/2
    • 目錄說(shuō)明
      • 文章視頻： camp.qianduan.group/xcx/1/1/3
    • 小試牛刀
      • 文章視頻： camp.qianduan.group/xcx/1/1/4
    • 發(fā)布流程
      • 文章視頻： camp.qianduan.group/xcx/1/1/5
  • 第二章：小程序中級(jí)實(shí)戰(zhàn)教程：預(yù)備篇
    • 項(xiàng)目結(jié)構(gòu)設(shè)計(jì)
      • 文章視頻： camp.qianduan.group/xcx/1/2/1
    • 提取 util 公用方法
      • 文章視頻： camp.qianduan.group/xcx/1/2/2
    • 封裝網(wǎng)絡(luò)請(qǐng)求及 mock 數(shù)據(jù)
      • 文章視頻： camp.qianduan.group/xcx/1/2/3
  • 第三章：小程序中級(jí)實(shí)戰(zhàn)教程：列表篇
    • 列表-靜態(tài)頁(yè)面制作
      • 文章視頻： camp.qianduan.group/xcx/1/3/1
    • 列表-頁(yè)面邏輯處理
      • 文章視頻： camp.qianduan.group/xcx/1/3/2
    • 列表-視圖與數(shù)據(jù)關(guān)聯(lián)
      • 文章視頻： camp.qianduan.group/xcx/1/3/3
    • 列表-閱讀標(biāo)識(shí)
      • 文章視頻： camp.qianduan.group/xcx/1/3/4
  • 第四章：小程序中級(jí)實(shí)戰(zhàn)教程：詳情篇
    • 詳情-頁(yè)面制作
      • 文章視頻： camp.qianduan.group/xcx/1/4/1
    • 詳情-視圖渲染
      • 文章視頻： camp.qianduan.group/xcx/1/4/2
    • 詳情-功能完善
      • 文章視頻： camp.qianduan.group/xcx/1/4/3
  • 第五章： 課后作業(yè)練習(xí)

學(xué)習(xí)方式

教程以 git 分支的方式管理，比如學(xué)習(xí)第三章先進(jìn)節(jié) 列表-靜態(tài)頁(yè)面制作 時(shí)候，需要切換到 ch3-1 分支，然后把分支目錄 code/ 導(dǎo)入到微信開(kāi)發(fā)工具編輯器，跟隨教程進(jìn)行實(shí)戰(zhàn)代碼操作。操作如下：

  1. 通過(guò) git 把項(xiàng)目復(fù)制到本地 

    git clone https://github.com/ikcamp/wechat-xcx-tutorial

  2. 切換目錄

    cd wechat-xcx-tutorial

  3. 在當(dāng)前目錄下切換分支

    git checkout ch3-1

注意：每一分支的 code/ 內(nèi)容，皆是上一節(jié)內(nèi)容操作完成后的結(jié)果。比如 ch3-2/code 就是上一節(jié)課程 ch3-1/code 隨教程操作后的結(jié)果。