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

iKcamp發表於2019-02-26

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

?? 微信小程式課程,面向所有具備前端基礎知識的同學 ??

微信小程式自發布以來,廣受大家關注。小程式釋出初期,顛覆現有移動網際網路格局,讓很多開發者欣喜若狂。如今,隨著小程式入口越來越多的開放,越來越多的開發者加入到小程式的開發大軍中。滬江Web前端團隊打造了【小程式實戰文章+視訊教程】是為初學者量身打造的一系列課程。

§ 核心人員


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


aximario




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


pavelShen




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


pangz1




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


tinyuen




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


roeis




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


sqzhuyi




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


longdiandian9




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


brucecham



§ 閱讀要求

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

  • HTML
  • JavaScript es6更佳
  • CSS

一共四部分十五小節,適合七天的訓練營。
從現在開始,我假裝你已經掌握了 htmlcss以及 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前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

相關文章