?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ??

iKcamp官網(wǎng)：http://www.ikcamp.com

訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。
包含：文章、視頻、源代碼

閱讀要求

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

• HTML
• JavaScript es6更佳
• CSS

一共四部分十五小節(jié)，適合七天的訓(xùn)練營(yíng)。
從現(xiàn)在開始，我假裝你已經(jīng)掌握了 html、 css以及 ES6 ??

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

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

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

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

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

教程大綱

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

教程完整代碼

教程的完整代碼在分支 完整代碼 中，請(qǐng)自行查閱

課后作業(yè)

整個(gè)教程學(xué)習(xí)過后，可以切換到 教程作業(yè) 分支，并完成作業(yè)，目錄下有相應(yīng)的作業(yè)答案，請(qǐng)自行完成練習(xí)。

核心人員

第一章：小程序初級(jí)入門教程 ?

小程序時(shí)代

小程序的優(yōu)勢(shì)，網(wǎng)上各種文章新聞鋪天蓋地，這里不再?gòu)?fù)述。
除了我們常見的功能外（音頻、視頻、圖片、畫布等），小程序可以做到如下但不限于這些事情：

• 網(wǎng)絡(luò)：網(wǎng)絡(luò)請(qǐng)求、上傳下載、 WebSocket（比如聊天室）
• 數(shù)據(jù)：數(shù)據(jù)緩存能力
• 位置：獲取位置、查看位置、地圖調(diào)用
• 設(shè)備：系統(tǒng)信息、網(wǎng)絡(luò)狀態(tài)、加速度計(jì)（重力感應(yīng)）、羅盤、撥打電話、掃碼、藍(lán)牙、iBeacon、屏幕亮度、 振動(dòng) 、手機(jī)聯(lián)系人（你的電話本）
• 界面：可以做到很多與微信一樣效果的樣式，比如設(shè)置導(dǎo)航條、導(dǎo)航、動(dòng)畫、繪圖等等
• 開放接口：登錄、授權(quán)、用戶信息、微信支付 、微信客服、轉(zhuǎn)發(fā)、二維碼功能、 微信運(yùn)動(dòng) 、收貨地址、卡券、設(shè)置
• 文件操作能力、數(shù)據(jù)統(tǒng)計(jì)分析（pv、uv等）
  
  

小程序起手

之前小程序強(qiáng)制要求以公司機(jī)構(gòu)申請(qǐng) appID 方可開發(fā)和上線小程序項(xiàng)目，導(dǎo)致小程序遇冷。不過還好，現(xiàn)在小程序基本上放開了這塊的限制。
如果你想自己動(dòng)手玩下小程序，找找感覺，沒有 appID 也可以做到。如果想要達(dá)到上線的效果，還是需要申請(qǐng) appID 并進(jìn)行項(xiàng)目的提交審核。

這里稍微提下 appID 的申請(qǐng)過程

打開小程序注冊(cè)地址，瀏覽 3 秒后，請(qǐng)點(diǎn)擊頁(yè)面右上角 立即注冊(cè) 進(jìn)入下一個(gè)頁(yè)面并選擇 小程序，如下：

不用多說了，直接填寫信息吧。需要注意的是：一個(gè)郵箱只能注冊(cè)一個(gè)小程序 。另外，多了解下協(xié)議內(nèi)容，避免因一些小問題造成審核不通過。

注冊(cè)成功后，會(huì)有個(gè)激活鏈接發(fā)送到注冊(cè)郵箱里面，需要登錄郵箱中驗(yàn)證激活。

查收郵件，并點(diǎn)擊此處鏈接驗(yàn)證激活。

點(diǎn)擊郵件的鏈接驗(yàn)證后，正常情況下，會(huì)跳轉(zhuǎn)到一個(gè)新的頁(yè)面，如果打開頁(yè)面后，沒有進(jìn)入到如下頁(yè)面，可以點(diǎn)擊頁(yè)面 返回首頁(yè)，或直接訪問地址 https://mp.weixin.qq.com

信息登記的主體類型，請(qǐng)根據(jù)自己的情況而定，本教程采用最基本的 個(gè)人 類型，并填寫下面的真實(shí)信息，需要注意的是，身份證 和 手機(jī)號(hào) 最多能綁定 5 個(gè)小程序，也就是說，你想要開發(fā)第 6 個(gè)小程序，就需要換別人的證件信息了。

信息填寫后，點(diǎn)擊 繼續(xù) 進(jìn)行提交，成功后會(huì)彈出如下框，直接 前往小程序

進(jìn)入小程序后，從左側(cè)菜單導(dǎo)航的 設(shè)置 進(jìn)入到 開發(fā)設(shè)置，或直接在圖中所示位置進(jìn)入 開發(fā)設(shè)置，就可以看到小程序的 appID了。

下期更新內(nèi)容：小程序初級(jí)入門教程－工具安裝+目錄說明+小試牛刀+發(fā)布流程

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。

---

相關(guān)文章：
聽說 2017 你想寫前端？
前端開發(fā)者指南（2017）
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級(jí)函數(shù)式編程

轉(zhuǎn)載于:https://www.cnblogs.com/ikcamp/p/7655545.html

總結(jié)

以上是生活随笔為你收集整理的iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。