微信小程序實戰教程
前言
小程序到如今已經發展了幾年了，幾乎變成前端人員必備的知識。最近重溫了微信小程序的文檔，決定使用原生微信小程序語法寫一個仿製知乎的項目練手，下面的教程分爲兩塊，分別是：css
- 微信小程序實戰教程之1.基礎知識。
- 微信小程序實戰教程之2.仿製知乎項目。
對微信小程序的目錄結構、語法等基礎知識還不瞭解的夥伴建議從1.基礎知識看起。前端
準備工做
- CSS採用SCSS編寫，對SCSS不熟悉的同窗也能夠直接使用CSS編寫樣式。
- 佈局採用彈性佈局 。
- JS使用ES6語法。
- 該項目主要寫前端部分，因此不寫後端接口，使用MockJS模擬後端接口返回數據。
下面的教程我主要講代碼結構與思路，不會無腦堆代碼。使用面向對象的設計模式，經過ES6提供的類與模塊概念，合理的組織/分離代碼。git
在看教程以前，能夠先將個人 項目下載下來放到微信開發者工具中運行，一邊看源代碼和效果一邊看教程。github
使用vscode開發微信小程序
使用什麼IDE是開發者本身的選擇，微信開發者工具使用起來總有一些不順手，因此我使用我比較熟悉的vscode進行開發，順便在這裏給使用vscode的夥伴推薦幾個實用插件：json
-
minapp小程序
提供微信小程序標籤、屬性的智能補全，同時會提供中文文檔的智能提示。後端
-
wechat-snippet微信小程序
提供微信小程序中代碼的智能補全，能夠做爲上一個插件的補充設計模式
-
wxmlbash
提供wxml文件的代碼高亮以及格式化代碼功能
-
Live Sass Compiler
提供scss文件轉換爲wxss文件的功能。這個插件默認是將scss文件轉換爲css文件，須要改成scss文件裝換爲wxss文件須要修改配置文件，在項目根目錄中找到.vscode文件夾（沒有的話直接建立一個），而後找到setting.json文件（沒有的話建立一個），修改文件內容爲：
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".wxss",
"savePath": null
}
]
}
複製代碼
效果
教程
交流
若是這篇文章幫到你了，以爲不錯的話來點個Star吧。 github.com/lizijie123