近來被微信小遊戲強勢刷了一波後，萌生了學習微信小程式/小遊戲的衝動~

    作為一個馬上就要畢業的學生狗(｡☉౪ ⊙｡)，學習一下新技術，順道還能豐富自己的簡歷，簡直不能再美滋滋了~~~

    學習筆記會持續更新 至 完成第一個小程式例項，如果以下對小程式的理解有錯誤的地方，請這位有緣的看官好心修正，小生感激不盡(≖ ‿ ≖)✧~

    以下內容是參考、歸納 微信小程式開發文件 而來~

//===========================================================================

一、get基本裝備：小程式賬號 + 開發工具

https://mp.weixin.qq.com/ 進入微信公眾平臺——選擇小程式開發文件，按步驟操作。

（注意：郵箱必須沒有繫結過微信公眾平臺、開發平臺、其餘小程式）

二、檢視裝備屬性：微信web開發者工具

介面十分類似於瀏覽器程式碼除錯頁面，仔細看一下專案檔案目錄也有一種熟悉感（PS：小生之前做過一段時間前端專案），彷彿有點理解小程式套路了，看來之後的學習能夠輕鬆一點~

三、檢視技能屬性：程式碼結構

專案檔案目錄中的四類檔案：JSON配置檔案、WXML、WXSS、JS指令碼邏輯檔案

（1）JSON配置檔案：app.json     project.config.json    page.json

其中，page.json中配置內容與app.json內容一致，app.json用於初始全域性配置，page.json一般位於pages/logs即，頁面或日誌資料夾，用於該頁面/日誌的個性化配置

（2）WXML檔案：類似於網頁開發中的html檔案，用於搭建頁面結構骨架，實質是以組合html基本標籤構成元件，方便使用者構建頁面，與html的差別見下

    A、標籤元件

    元件用x-mind簡單歸納了一下：https://pan.baidu.com/s/1o9Gy9Qi

    B、增加wx:if等屬性以及{{}}表示式，與vue中v-if等指令屬性很類似，目的也相差無幾，主要是為了分離檢視UI渲染與業務邏輯，形成mvvm模式，抽象出傳統網頁開發中 獲取/修改頁面狀態並操作DOM樹進行檢視渲染這一過程，使js只用來管理業務邏輯

    指令用x-mind簡單歸納了一下：https://pan.baidu.com/s/1mjz7HhQ

（3）WXSS檔案：具有 CSS 大部分的特性，也有一些修改

    A、新增了尺寸單位：rpx 用於適配不同手機，與預期頁面效果會有些許差別

建議：開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準

    B、app.wxss 作為全域性樣式，會作用於當前小程式的所有頁面，區域性頁面樣式 page.wxss 僅對當前頁面生效

可在wxss中匯入外部樣式列表：@import+'相對路徑名'

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

建議：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在執行時會進行解析，請儘量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

    C、 僅支援部分 CSS 選擇器

（4）JS檔案：處理業務邏輯，通過 事件物件 將檢視層與邏輯層串聯，可呼叫微信提供API實現功能邏輯

    A、基本結構，事件繫結可見“WXML指令”的xmind

——APP(object)  註冊小程式，一個小程式一次

——Page(object)  註冊一個頁面

    B、小程式API：文件   https://mp.weixin.qq.com/debug/wxadoc/dev/api/