作者介紹：週中堅，美團點評工程師，4年 Web 前端開發經驗，主要負責過會員卡、外賣、預訂、商家平臺等業務的前端開發，現在是美團點評點餐團隊的一員。
如果你看過《張小龍首次全面闡述小程式》這篇文章，一定會對這句話有印象："比如我們到一個餐館，我們可能想排隊或者說點一下菜，我們並不需要去下載這個餐館的應用程式，我們只需要在餐館掃一下它的二維碼，然後就啟動了這個餐館的小程式，我們可以立即在小程式裡排隊或者點餐。"
沒錯，我們就是做張小龍在演講時提到的"點餐"的大眾點評點餐團隊。我們團隊在去年年底開始考慮微信小程式平臺，經過快速而慎重的前期調研和討論，緊張的開發測試，在微信同事的幫助下，"大眾點評點餐"小程式於2017年1月上線。
如果你對小程式感興趣，不妨關注一下這個專欄，我們計劃在兩個月內推出7篇關於小程式的專欄文章。小程式的這一系列文章是我們前端團隊做小程式時積累的經驗，裡面不僅有小程式的原理，還有我們開發過程中遇到的問題和解決辦法。
如果你對前端感興趣，也不妨關注一下這個專欄，因為小程式只是我們團隊很小的一部分產出，我們會持續創作，將我們的經驗和大家分享。
功能簡介
大眾點評點餐小程式是一個工具，本著方便好用的初衷，我們設計的第一版的「大眾點評點餐」小程式互動流程非常簡單，使用者可以在小程式中完成選擇菜品，確認下單，追蹤訂單狀態這個完整的點餐流程。
小程式設計
相信這篇文章的很多讀者都有移動端開發經驗，微信小程式也是移動端應用，也應該符合大部分的移動端的設計規範。那麼在設計上，微信小程式和APP、hybrid、h5又有什麼區別呢？
首先由於小程式是一個平臺，所以平臺上的開發者必須要遵守規範，參考微信小程式設計指南。
除此之外，還需要注意：
- 使用者首次使用要下載離線包，首頁需要加 loading 效果以降低使用者等待時的時間感知。
- 小程式會記錄使用者的狀態，當使用者再次掃碼時會開啟之前的頁面。
- 小程式最多可以開啟5級頁面，如果頁面層級過深，舊的頁面可能會被銷燬。
- 小程式渲染長列表可能有效能問題，最好做分頁。
- 小程式不支援與 APP, H5 之間的跳轉。
小程式架構
微信小程式的框架包含兩部分：View檢視層、App Service邏輯層。
View層用來渲染頁面結構，使用WebView渲染。
App Service層用來邏輯處理、資料請求、介面呼叫，執行環境為：IOS - JSCore, Android - X5 JS解析器, DevTool - nwjs Chrome 核心。 （參考小程式細節點）
檢視層和邏輯層通過系統層的JSBridge進行通訊，邏輯層把資料變化通知到檢視層，觸發檢視層頁面更新，檢視層把觸發的事件通知到邏輯層進行業務處理。檢視層由 WXML 與 WXSS 編寫，由元件來進行展示。
小程式啟動時會從CDN下載小程式的完整包，微信官方限制是1M。（編譯後）
關於檢視層和邏輯層的技術細節，以及小程式的原始碼解析，我們會單獨開章節進行講解，敬請期待。
開發選型
小程式在開發時和傳統的h5開發有許多差異，比如：
- 小程式開發暫不支援 npm 包管理方式，官方推薦是將依賴拷貝到專案中；
- 小程式檢視層的 wxml 和 wxss 還是會使用 webview 進行渲染，開發者需要關心在不同平臺上的相容性；
- 小程式邏輯層的執行環境對 es6 的支援並不完美，開發者需要關心在不同平臺上的相容性；
- 小程式的開發者工具在補全、語法檢查等方面還不如我們熟悉的 ide (相信微信團隊會越做越好)。
可以看到，小程式和我們現在熟悉的前端開發模式還是有不小的區別，一定程度上會影響我們的開發效率。因此：
- 我們將工程分為開發目錄和構建目錄，構建目錄有兩部分，一部分是將要上傳到CDN的圖片，一部分是小程式的執行程式碼。在開發目錄中使用 html 和 less 字尾（這樣就可以使用 ide 的各種外掛了）再通過 gulp 將開發程式碼進行處理，再寫入到構建目錄中。
- 使用 es6 語法，配合 eslint，快速檢查語法錯誤。參考微信小程式文件-ES6 APi 支援情況。
- 所有非同步請求使用 promise 封裝，增加程式碼可讀性，便於捕捉錯誤。
小程式與PWA
PWA 的全稱是 Progressive Web Apps ，是 Google 在2015年提出的概念，是漸進增強理念的一個典型實踐。
PWA 不是一套全新的標準，是現有 web 技術的父集。但是微信小程式可以認為是現有 web 技術的一個子集，那為什麼要在這裡提到 PWA 呢，是因為 PWA 和微信小程式用不同的思路在解決很多共性的問題。
| PWA | 微信小程式 | |
|---|---|---|
| 離線訪問 | service worker | 使用者下載離線包，快取使用者上次使用的狀態 |
| 類原生應用 | 使用 app shell 使頁面更快；使用 Web App Manifest 配置基本資訊；有設計規範 | 離線檢視層，邏輯層觸發頁面更新，效能高於一般 web 應用；使用 app.json 和 page.json 配置基本資訊；有設計規範 |
| 可安裝 | 可新增到主螢幕 | android 使用者可新增到主螢幕 |
| 持續更新 | 通過 service worker 更新 | 開啟時進行版本檢查，如果需要就下載新的離線包 |
| 安全 | 使用 HTTPS | 使用 HTTPS |
當然，微信小程式和 PWA 在實現思路上的差別也導致了他們有本質上的區別，PWA 是開放的，可分享，可搜尋的；而微信小程式是封閉的，僅可在微信內分享，僅可在微信內進行非常有限的搜尋，不可以跳轉到別的 web 或者 app。
專題預告
第二期：小程式的檢視層，介紹兩個看似全新的東西WXML和WXSS，從怎麼用，到是什麼都會講。
第三期：小程式的邏輯層，介紹小程式的生命週期，執行環境，相容性等。
第四期：開發小程式踩到的坑，介紹小程式開發和h5開發差異帶來了哪些程式碼設計問題，以及我們是如何解決的。
第五期：小程式原始碼解析，介紹如何看小程式的原始碼，小程式的架構是怎樣的，將第二期和第三期的內容關聯起來。
第六期：資料採集分析，產品上線之後需要不斷迭代，而資料在這個過程中扮演著很重要的角色，介紹小程式如何打點，如何加監控，怎麼分析資料。
第七期：小程式的釋出與推廣，上線之後還需要運維，介紹小程式如何釋出、推廣、多版本相容等問題。
最後介紹一下我們團隊：友愛活潑，崇尚自由，對新技術熱衷而不盲目。