小程序開發

上海小程序開發 > 開發教程 > 「大眾點評點餐」小程序開發經驗 01:概述

「大眾點評點餐」小程序開發經驗 01:概述

編輯時間:03-04 17:49 瀏覽次數:66

美團點評工程師,4 年 Web 前端開發經驗,主要負責過會員卡、外賣、預訂、商家平臺等業務的前端開發,現在是美團點評點餐團隊的一員。

如果你看過《張小龍首次全面闡述小程序》這篇文章,一定會對這句話有印象:比如我們到一個餐館,我們可能想排隊或者說點一下菜,我們并不需要去下載這個餐館的應用程序,我們只需要在餐館掃一下它的二維碼,然后就啟動了這個餐館的小程序,我們可以立即在小程序里排隊或者點餐。沒錯,我們就是做張小龍在演講時,提到做「點餐」的大眾點評點餐團隊。我們團隊在去年年底開始考慮微信小程序平臺,經過快速而慎重的調研、討論、開發、測試,以及在微信同事的幫助下,「大眾點評點餐」小程序終于在 2017 年 1 月上線。

我們計劃在兩個月內,推出 7 篇關于小程序的專欄文章。這一系列文章,是我們前端團隊做小程序時的經驗之談。這里面不僅有小程序的原理,還有我們開發過程中遇到的問題和解決辦法。

功能簡介

大眾點評點餐小程序是一個工具,本著方便好用的初衷,我們設計的第一版的「大眾點評點餐」小程序交互流程非常簡單,用戶可以

程序中完成選擇菜品,確認下單:


「大眾點評點餐」小程序開發經驗 01:概述

蹤訂單狀態這個完整的點餐流程。

小程序設計相信這篇文章的很多讀者,都有移動端開發經驗。微信小程序也是移動端應用,也應該符合大部分的移動端的設計規范。那么在設計上,微信小程序和 app、hybrid、HTML 5 又有什么區別呢?首先由于小程序是一個平臺,所以平臺上的開發者必須要遵守規范。建議大家參考官方的設計文檔。除此之外,還需要注意:

  • 用戶首次使用要下載離線包,首頁需要加載效果,以降低用戶等待的時間感知。

  • 小程序會記錄用戶的狀態,當用戶再次掃碼時會打開之前的頁面。

  • 小程序最多可以打開 5 級頁面,如果頁面層級過深,舊的頁面可能會被銷毀。

  • 小程序渲染長列表可能有性能問題,最好做分頁。

  • 小程序不支持與 app、HTML 5 之間的跳轉。

小程序架構微信小程序的框架包含兩部分:View 視圖層、App Service 邏輯層。View 層用來渲染頁面結構,使用 WebView 渲染。App Service 層用來邏輯處理、數據請求、接口調用。

  • 在 iOS 上,執行 App Service 解析與處理操作的解析器是 JSCore。

  • 而在 Android 上,這個任務由 X5 JS 解析器完成。

  • 我們使用的開發者工具,則是 NW.js + Chrome 內核。

視圖層和邏輯層,通過系統層的 JSBridge 進行通信。邏輯層把數據變化通知到視圖層,觸發視圖層頁面更新;視圖層把觸發的事件通知到邏輯層進行業務處理。視圖層由 WXML 與 WXSS 編寫,由組件來進行展示。

「大眾點評點餐」小程序開發經驗 01:概述

小程序啟動時,會從 CDN 下載小程序的完整包。編譯后的小程序包的大小,被微信官方限制在了 1 MB 以內。

開發選型小程序開發和傳統的 HTML 5 開發,有許多差異。比如:

  • 小程序開發暫不支持 NPM 包管理方式,官方推薦是將依賴拷貝到項目中。

  • 小程序視圖層的 WXML 和 WXSS 文件,還是會使用 webview 進行渲染,開發者需要關心在不同平臺上的兼容性。

  • 小程序邏輯層的運行環境,對 ES6 的支持并不完美。開發者需要關心在不同平臺上的兼容性。

  • 小程序的開發者工具在補全、語法檢查等方面還不如我們熟悉的 IDE(但相信微信團隊會越做越好)。

可以看到,小程序和我們現在熟悉的前端開發模式還是有不小的區別,一定程度上會影響我們的開發效率。因此:

  • 我們將工程分為開發目錄和構建目錄,構建目錄有兩部分,一部分是將要上傳到 CDN 的圖片,一部分是小程序的運行代碼。

  • 在開發目錄中,使用 .html.css 后綴(這樣就可以將項目導入 IDE 了)。

  • 再通過 Gulp 將開發代碼進行處理,再寫入到構建目錄中。

  • 使用 ES6 語法,配合 Eslint,快速檢查語法錯誤。

  • 所有異步請求使用 Promise 封裝,增加代碼可讀性,便于捕捉錯誤。

小程序與 PWAPWA 的全稱是 Progressive Web Apps ,是 Google 在 2015 年提出的概念,是漸進增強理念的一個典型實踐。PWA 不是一套全新的標準,是現有 web 技術的父集。但是微信小程序可以認為是現有 web 技術的一個子集。那為什么要在這里提到 PWA 呢?是因為 PWA 和微信小程序用不同的思路在解決很多共性的問題。

「大眾點評點餐」小程序開發經驗 01:概述

當然,在實現思路上,微信小程序和 PWA 的差別非常大,甚至讓二者的本質變得非常不同。

PWA 是開放的,可分享,可搜索的;而微信小程序是封閉的,僅可在微信內分享,僅可在微信內進行非常有限的搜索,不可以跳轉到別的 web 或者 app。


免責聲明:我司網站轉載此文,不代表本網的觀點和立場。不以盈利為目的,如有侵犯公司或個人權益,我司會第一時間刪除文章,歡迎咨詢免費獲取思維導圖!
感受專業服務,從來電咨詢開始
15821967367158-2196-7367
cache
Processed in 0.004161 Second.
浙江20选5几点开奖