大衆點評點餐小程序開發經驗 - 概述

做者介紹：週中堅，美團點評工程師，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開發差別帶來了哪些代碼設計問題，以及咱們是如何解決的。
第五期：小程序源碼解析，介紹如何看小程序的源碼，小程序的架構是怎樣的，將第二期和第三期的內容關聯起來。
第六期：數據採集分析，產品上線以後須要不斷迭代，而數據在這個過程當中扮演着很重要的角色，介紹小程序如何打點，如何加監控，怎麼分析數據。
第七期：小程序的發佈與推廣，上線以後還須要運維，介紹小程序如何發佈、推廣、多版本兼容等問題。

最後介紹一下咱們團隊：友愛活潑，崇尚自由，對新技術熱衷而不盲目。