• 小程式前端開發實戰
  • 前期工作
  • 小程式程式碼框架

更新時間：2021年6月26日

說明：寫作此係列有兩個目的，①複習微信小程式開發技術（前端+後端）；②為微信小程式初學者提供一些幫助。以後一定要養成通過寫部落格記錄學習過程的好習慣，不然時間長了真的會忘……

我學習的課程是“學堂線上”上的學做小程式——實戰篇：樹洞小程式

axlsdtkl/wechat-mini這是下面這位大佬上傳到github上的treehole專案，如果覺得跟著視訊敲程式碼太慢了，可以下載下來跟著課程閱讀原始碼。

課程前三章分別是：①課程導論；②如何開始第一步；③產品原型設計實踐，如果想系統地瞭解開發一個微信小程式的過程，這部分內容還是有必要學習下的。我們從第四章

小程式前端開發實戰

這一章介紹了微信小程式開發者工具的使用、小程式程式碼框架、以及html+css+js的入門知識。

小程式前端開發推薦工具包括：

• 微信開發者工具（小程式開發工具）
• iconfont-阿里巴巴向量圖示庫（小圖示獲取網站）
• CSS取色器（線上獲取/檢視顏色）

前期工作

微信小程式的接入流程包括：註冊；小程式資訊完善；開發小程式；提交稽核和釋出。

開發小程式前要先完成小程式註冊。進入註冊頁面微信小程式，按照步驟完成：帳號資訊；郵箱啟用；資訊登記三步。之後掃碼登入，並完善小程式資訊，點選下圖中的開發設定可以檢視AppID，類似微信小程式的“身份證號”。

開啟微信開發者工具，選擇小程式專案，填寫表單後建立小程式。如果不使用雲開發技術，就選擇“不使用雲服務”選項。

點選“新建”，進入開發介面。快捷鍵Alt+Shift+F可以格式化程式碼。開發者文件微信開放文件可以幫助我們完成小程式的開發。

⭐開始 | 微信開放文件

小程式程式碼框架

微信小程式實質上是一款基於web技術的應用程式。微信小程式 ≈ 網站前端，他們使用的開發語言，程式碼結構以及程式碼的執行機制是一樣的。

微信小程式程式碼框架介紹：

⭐小程式程式碼構成 | 微信開放文件

待續……