?? 微信小程式課程，面向所有具備前端基礎知識的同學 ??
iKcamp官網：www.ikcamp.com
訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程式｜基於最新版1.0開發者工具之初中級培訓教程分享》。 包含：文章、視訊、原始碼
閱讀要求
讀者需要具備但不限於以下技能
- HTML
- JavaScript
es6更佳 - CSS
一共四部分十五小節，適合七天的訓練營。
從現在開始，我假裝你已經掌握了 html、 css以及 ES6 ☝️
目標導向
本教程以實戰專案驅動，以滬江英語微信小程式專案框架為基礎，最終還原一個完整的小程式
列表頁面：請求介面，並展示列表頁面資料
詳情頁面：以文章id為引數，獲取文章詳情
詳情頁面，點選圖片，展示大圖
教程大綱
- 第一章：小程式初級入門教程
- >> appID準備（已更新至本文）
- 工具安裝
- 目錄說明
- 小試牛刀
- 釋出流程
- 第二章：小程式中級實戰教程：預備篇
- 專案結構設計
- 提取 util 公用方法
- 封裝網路請求及 mock 資料
- 第三章：小程式中級實戰教程：列表篇
- 列表-靜態頁面製作
- 列表-頁面邏輯處理
- 列表-檢視與資料關聯
- 列表-閱讀標識
- 第四章：小程式中級實戰教程：詳情篇
- 詳情-頁面製作
- 詳情-檢視渲染
- 詳情-功能完善
- 第五章：課後作業練習
教程完整程式碼
教程的完整程式碼在分支
完整程式碼中，請自行查閱
課後作業
整個教程學習過後，可以切換到
教程作業分支，並完成作業，目錄下有相應的作業答案，請自行完成練習。
核心人員
|
aximario |
pavelShen |
pangz1 |
tinyuen |
roeis |
sqzhuyi |
longdiandian9 |
brucecham |
第一章：小程式初級入門教程
小程式時代
小程式的優勢，網上各種文章新聞鋪天蓋地，這裡不再複述。
除了我們常見的功能外（音訊、視訊、圖片、畫布等），小程式可以做到如下但不限於這些事情：
- 網路：網路請求、上傳下載、
WebSocket（比如聊天室） - 資料：資料快取能力
- 位置：獲取位置、檢視位置、地圖呼叫
- 裝置：系統資訊、網路狀態、加速度計（重力感應）、羅盤、撥打電話、掃碼、藍芽、iBeacon、螢幕亮度、
振動、手機聯絡人（你的電話本） - 介面：可以做到很多與微信一樣效果的樣式，比如設定導航條、導航、動畫、繪圖等等
- 開放介面：登入、授權、使用者資訊、
微信支付、微信客服、轉發、二維碼功能、微信運動、收貨地址、卡券、設定 - 檔案操作能力、資料統計分析（pv、uv等）
小程式起手
之前小程式強制要求以公司機構申請 appID 方可開發和上線小程式專案，導致小程式遇冷。不過還好，現在小程式基本上放開了這塊的限制。
如果你想自己動手玩下小程式，找找感覺，沒有 appID 也可以做到。如果想要達到上線的效果，還是需要申請 appID 並進行專案的提交稽核。
這裡稍微提下 appID 的申請過程
- 開啟小程式註冊地址，瀏覽 3 秒後，請點選頁面右上角
立即註冊進入下一個頁面並選擇小程式，如下：
- 不用多說了，直接填寫資訊吧。需要注意的是：一個郵箱只能註冊一個小程式 。另外，多瞭解下協議內容，避免因一些小問題造成稽核不通過。
- 註冊成功後，會有個啟用連結傳送到註冊郵箱裡面，需要登入郵箱中驗證啟用。
- 查收郵件，並點選此處連結驗證啟用。
返回首頁，或直接訪問地址 mp.weixin.qq.com
- 資訊登記的主體型別，請根據自己的情況而定，本教程採用最基本的
個人型別，並填寫下面的真實資訊，需要注意的是，身份證和手機號最多能繫結 5 個小程式，也就是說，你想要開發第 6 個小程式，就需要換別人的證件資訊了。
繼續 進行提交，成功後會彈出如下框，直接 前往小程式
- 進入小程式後，從左側選單導航的
設定進入到開發設定，或直接在圖中所示位置進入開發設定，就可以看到小程式的appID了。
下期更新內容：小程式初級入門教程－
工具安裝+目錄說明
iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。
相關文章： 聽說 2017 你想寫前端？ 前端開發者指南（2017） 翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數語言程式設計
iKcamp最新活動
2019年，iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦！