iKcamp出品｜全網最新｜微信小程序｜基於最新版1.0開發者工具之初中級培訓教程分享

🇨🇳 微信小程序課程，面向全部具有前端基礎知識的同窗 🇨🇳

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 的申請過程

1. 打開小程序註冊地址，瀏覽 3 秒後，請點擊頁面右上角 當即註冊 進入下一個頁面並選擇 小程序，以下：

2. 不用多說了，直接填寫信息吧。須要注意的是：一個郵箱只能註冊一個小程序 。另外，多瞭解下協議內容，避免因一些小問題形成審覈不經過。

3. 註冊成功後，會有個激活連接發送到註冊郵箱裏面，須要登陸郵箱中驗證激活。

4. 查收郵件，並點擊此處連接驗證激活。

5. 點擊郵件的連接驗證後，正常狀況下，會跳轉到一個新的頁面，若是打開頁面後，沒有進入到以下頁面，能夠點擊頁面 返回首頁，或直接訪問地址 mp.weixin.qq.com

6. 信息登記的主體類型，請根據本身的狀況而定，本教程採用最基本的 我的 類型，並填寫下面的真實信息，須要注意的是，身份證 和 手機號 最多能綁定 5 個小程序，也就是說，你想要開發第 6 個小程序，就須要換別人的證件信息了。

7. 信息填寫後，點擊 繼續 進行提交，成功後會彈出以下框，直接 前往小程序

8. 進入小程序後，從左側菜單導航的 設置 進入到 開發設置，或直接在圖中所示位置進入 開發設置，就能夠看到小程序的 appID了。

下期更新內容：小程序初級入門教程－工具安裝+目錄說明

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

---

相關文章： 據說 2017 你想寫前端？ 前端開發者指南（2017） 翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數式編程

iKcamp最新活動

報名地址：www.huodongxing.com/event/54099…

---

2019年，iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦！