微信小程式，是騰訊在微信app內部打造的一個平臺或者說容器，相當於把一個應用當作了一個相對開放的作業系統，來承載不同的應用（但小程式多了一個小字，意味著它必然會有很多的約束）。從技術實現上，它可能並不是那麼的驚世駭俗，但這個思路和開發平臺式的app，則是開創性的。這意味著app突破了作業系統的束縛，構建自己的平臺，同時也冒著極大的風險（比如被蘋果應用商店下架）。我相信這是長期博弈和平衡的結果，也意味著微信和騰訊絕不是手機開發商可以忽視的力量，強大如蘋果，也需要和微信進行合作，給它讓渡了極大的空間。

上面的基本屬於技術無關的扯淡，下面開始正題。

小程式開發的主要概念：

1. wxss+wxml+js+json (其實還有個wxs,是自定義的簡單語法，用於增強wxml的邏輯特性，屬於錦上添花的東西，不是必要的，這裡不介紹了，感興趣可以自行了解下)

小程式並非類似vue/react的元件式的物理檔案結構，而是將樣式和結構、邏輯都分離，其設計哲學更類似傳統的web開發而非現代的元件開發模式。這可能會讓一些人覺得不太舒服，但現在規則制定者是微信，我們沒有別的選擇（真的沒有？不可能，在前端領域沒有這種說法，我們一天可以湧現出十個新輪子！分分鐘給你封裝一套出來！ mpvue/wepy瞭解一下？喜歡折騰的同學可以搞起來）。

wxss: 類似於css，支援大部分css的功能，有一些擴充套件（比如匯入）

wxml: 類似於html，在其中也可以嵌入簡單的語法（支援if/else和for）和資料繫結，這點又類似vue。

js: 這個沒什麼好說的了，js語法，但樣例程式碼好像都是es5語法，說明小程式沒有更親近es6（沒有把es6作為default）。

json: 使用json作為配置檔案(工程相關等，輔助上面幾個，比如引入自定義元件、定義預設行為等)。

2.關於元件 （component）: 小程式最核心的東西可能就是官方提供的這些元件了，通過它們來搭建出我們想要的UI和功能。我們也可以自定義元件用來複用。這裡的component 和 react裡面的概念不完全一樣。

3. 關於頁面 （page）: 這裡的頁面就是我們理解的頁面，包含了頁面和相關的功能。每一個頁面都有自己獨立的wxss+wxml+js+json。從這個角度來看，小程式的開發還是模組化的。

--------------------------------華麗的分割線--------------------------------

對於一個移動應用開發，主要分為兩個部分： UI + 業務邏輯

小程式的UI: wxss實現了樣式，wxml實現了結構，在wxml裡面使用官方元件和自定義元件。

業務邏輯：通過js來構建model和資料流、操作等，並繫結到wxml。

所以，對於一個小程式的開發，我們可以總結一些簡單的步驟：

1. 拆分需要實現的頁面(需要實現幾個頁面，分別定義page)，頁面內規劃簡單的結構，通過哪些元件實現

2. 對各個頁面先實現wxml， 在wxss裡面寫好佔位的css class， 後續進行填充和修改

3. 對各個頁面規劃需要的model和資料流、操作，實現xxxPage.js。

4. 跨元件使用的資料可以放在app裡面共享。

5. 使用json解決配置相關的問題。

進階:

對於複雜的UI實現，我們可能希望引入外部的自定義元件來解決問題；同樣對於複雜的業務邏輯，也需要redux/mobx這樣的方案來更高效、優雅的去解決資料繫結的問題。 小程式官方技術棧並不包括這部分的內容（小程式的目標也不是讓它做的多麼複雜），小程式的生態也沒有那樣成熟，所以這個進階的過程可以認為是痛並快樂著的踩坑之旅，有能力的同學當然也可以自己去造一些元件或者方案的輪子，為社群貢獻自己的一份力量。

總結：

小程式的限制很多，它並不是一個很現代的開發方式，也可能不會讓你覺得非常的舒服；但現實來看，它有這些優點：

1. 上手門檻比較低，前端和移動端開發都可以轉型來做，上手比較快

2. 實現出來的體驗基本上優於h5(我理解官方元件功不可沒)

3. 依託於微信生態，可能有流量紅利以及社交傳播的便利性

就這三點已經可以看出小程式的價值。 

話不多說，我去寫我的小程式了。再見。