閱讀更多系列文章請訪問我的GitHub部落格，示例程式碼請訪問這裡。
小程式對比微信公眾號的優勢
-
基本功能優勢
a. 檢測網路狀態
b. 媒體類操作：錄音、拍照、拍視訊
c. 可以直接對手機內檔案進行操作
-
資料類功能
a. 獲取位置資訊
b. 獲取使用者資料：頭像、微訊號、性別等
c. 當前使用的裝置資訊
-
微信功能
a. 微信支付
b. 生物識別（指紋等）
c. 微信運動
d. 微信卡券
e. 客服功能
f. 二維碼功能
-
社交功能
a. 微信轉發、QQ轉發（需要客戶確認）
開發前準備
小程式分層
- App層（根目錄下的app.js、app.json、app.wxss） 在/app.js中可以儲存全域性使用的資料，如使用者資訊等。 這樣就不需要像Vue和React中通過Vuex和Redux管理全域性狀態。
- Page層（/page目錄下的各頁面） 在每個頁面中分別儲存該頁面的資料。
小程式的檔案構成
-
.json 字尾的 JSON 配置檔案
a. 小程式全域性配置app.json
包括了小程式的所有頁面路徑（pages）、介面表現（window）、網路超時時間（networkTimeout）、底部 tab（tabBar） 等。QuickStart 專案裡邊的 app.json 配置。
b. 工具配置 project.config.json
小程式開發工具的個性化配置，例如介面顏色、編譯配置等等。
c. 頁面配置 page.json
支援為每個頁面單獨配置如介面風格等。
-
.wxml 字尾的 WXML 模板檔案
類似於Web中的HTML，但需要使用微信中自定義的元件。
其語法類似於Vue中的模板語法，例如
<view>{{message}}</view>
<view wx:for="{{array}}">{{item}}</view>
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>。
-
.wxss 字尾的 WXSS 樣式檔案
類似於Web中的CSS，它實現了CSS的大部分特性。
同時提供了新單位rpx，rpx是基於750的螢幕寬度進行換算，也即是在750寬的螢幕下1rpx = 1px，在其他螢幕下會自適應。
因此小程式的設計稿推薦使用iPhone6為標準。
-
.js 字尾的 JS 指令碼邏輯檔案
與Vue不同，小程式更新狀態的方式類似於React的setState，需要寫成this.setData({msg: 'Hello World'})。