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

  • HTML
  • JavaScript es6更佳
  • CSS

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

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

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

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

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

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

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

教程大綱 -完整視頻地址

  • 先進章：小程序初級入門教程
    • appID準(zhǔn)備
      • 文章視頻： camp.qianduan.group/xcx/1/1/1
    • 工具安裝
      • 文章視頻： camp.qianduan.group/xcx/1/1/2
    • 目錄說明
      • 文章視頻： camp.qianduan.group/xcx/1/1/3
    • 小試牛刀
      • 文章視頻： camp.qianduan.group/xcx/1/1/4
    • 發(fā)布流程
      • 文章視頻： camp.qianduan.group/xcx/1/1/5
  • 第二章：小程序中級實戰(zhàn)教程：預(yù)備篇
    • 項目結(jié)構(gòu)設(shè)計
      • 文章視頻： camp.qianduan.group/xcx/1/2/1
    • 提取 util 公用方法
      • 文章視頻： camp.qianduan.group/xcx/1/2/2
    • 封裝網(wǎng)絡(luò)請求及 mock 數(shù)據(jù)
      • 文章視頻： camp.qianduan.group/xcx/1/2/3
  • 第三章：小程序中級實戰(zhàn)教程：列表篇
    • 列表-靜態(tài)頁面制作
      • 文章視頻： camp.qianduan.group/xcx/1/3/1
    • 列表-頁面邏輯處理
      • 文章視頻： camp.qianduan.group/xcx/1/3/2
    • 列表-視圖與數(shù)據(jù)關(guān)聯(lián)
      • 文章視頻： camp.qianduan.group/xcx/1/3/3
    • 列表-閱讀標(biāo)識
      • 文章視頻： camp.qianduan.group/xcx/1/3/4
  • 第四章：小程序中級實戰(zhàn)教程：詳情篇
    • 詳情-頁面制作
      • 文章視頻： 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í)第三章先進節(jié) 列表-靜態(tài)頁面制作 時候，需要切換到 ch3-1 分支，然后把分支目錄 code/ 導(dǎo)入到微信開發(fā)工具編輯器，跟隨教程進行實戰(zhàn)代碼操作。操作如下：

  1. 通過 git 把項目復(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é)果。