小程序開發步驟已經是當下最熱門的話題，下面將從多方面來談談大眾點評微信小程序開發相關的內容。

小程序以上特征要求我們只為用戶提供核心服務，且從產品到技術，都必須圍繞「簡約」二字做文章。因此，結合大眾點評業務場景，最終在「大眾點評+」中，我們主要提供以下兩種基礎服務：

1. 快速找店：通過搜索、分類列表和推薦三種形式，讓用戶快速找到商戶，并提供包括定位、電話、點評、菜品等商戶信息，幫助用戶做出決策
2. 購買團購：為用戶推薦團購商品并實現交易閉環，幫助用戶獲得實惠

產品層面足夠精簡，我們再來看看技術層面如何做到簡約。

我們先看下項目之初開發同學的困惑：

• 小程序是個新鮮事物，參與開發的同事普遍對開發流程和運行原理知之甚少
• 在不知道小程序有多少坑的前提下，我們還是要保證在小程序開放前完成全部基礎功能的開發，存在著不少風險
• 小程序的接口穩定性和豐富程度、安全性、連接速度等究竟如何

對于任何新生的應用場景，開發環境、工具和框架不夠完善都可以理解，但如何才能既保證開發過程的簡單又提供一定的規范和工程化能力?為此，在遵從小程序基本框架的前提下，我們做了如下技術選型和簡單封裝：

1. 項目區分開發目錄和構建目錄，在開發目錄中進行開發，再通過 gulp 對開發目錄進行構建(主要處理壓縮等基本功能)，構建目錄才是小程序真正的運行代碼
2. 引入 npm 的 package.json，解決開發依賴的管理、請求接口的版本化管理，但不使用任何 npm 包(只復制一份 promise 實現)
3. 只使用 ES6 語法，配合 eslint，快速檢查基本 JS 錯誤，(現階段小程序報錯提示不夠友好，部分錯誤由 JS 語法錯誤引起)
4. 對小程序提供的 JS-API 進行 promise 封裝，代碼以 promise 風格書寫，以便 catch 各種運行時的錯誤

開發過程中的「坑小程序平臺差異

• 小程序會在開發者工具、iOS 設備和 Android 設備運行，不同平臺可能存在實現上的差異，從而導致少許的展現不一致。不過總體來說，兼容問題比起之前的開發方式減少很多，期望小程序團隊進一步做好底層兼容，為前端程序員造福。

開發思維和技術限制

• 沒有 BOM\DOM 操作，只能通過數據改變視圖
• 再次強調小程序最多支持5級頁面
• 開發代碼 + 小程序編譯封裝的代碼 = 最終的編譯包 < 1M

針對上面提到的問題，我們通過自己的實踐總結了一套解決方案，這里也與開發者一起分享討論：

在開發過程中，我們肯定以開發者工具為主完成開發及調試，但這不代表在真機能獲得與預期完全一致的展現。在過往開發 hybrid 框架的經歷中，我們也總會遇到 iOS、Android、H5 表現不一致的問題，這里既涉及到底層實現的差異，也涉及到不同開發團隊的溝通問題，這個問題很難一勞永逸地被完美解決。

web 服務支持

web 接口版本化

開發思維的轉變

因此，有些常見方案的實現思路就要發生轉變，包括但不局限于以下的操作：

• 類似微信通訊錄的錨點切換(可以使用微信的 scroll-view 實現)
• 計算內容的高度決定截行 + 顯示「展開/收起」開關

解決這個問題，其實大致有三種思路：

• 優化產品交互流程，盡量簡化產品流程直到少于5級
• redirectTo 思路，在頁面達到第五級之后，后續所有頁面打開都通過redirectTo方式。帶來的問題也顯而易見，如果用戶在第N個頁面點擊返回，他只能看到第四個頁面，中間的 N-5 個頁面都不見了，適用于特定場景
• goBack 的思路，采用技術手段保證主流程只有5級(在我們的實現中，既有把搜索功能作為頁面的一個狀態而非頁面的方式，也有把訂單提交后以 redirectTo 的方式銷毀當前頁面的辦法)，之后通過統一封裝頁面路由的方式，采用 getCurrentPages 接口判斷當前頁面是否在歷史堆棧中，沒有則通過 navigateTo 接口打開，有則通過 goBack 的方式返回，在頁面側 onShow 事件中去讀取最新的參數信息，完成頁面的更新動作

最后，我們單獨來聊一聊代碼體積優化的問題。

雖然現階段大眾點評+僅提供了找店和團購兩個主要功能，但 1M 的代碼量畢竟太小，為了在 1M 的體積下把更多的功能和更好的體驗帶給用戶，并未為以后的擴展預留足夠的空間，這就要求我們在代碼的體積控制上必須「斤斤計較」。

會把我們項目的 json、wxml、wxss、js 全部轉化為 js，合并成一個文件上傳到微信云服務器。當用戶第一次打開小程序時再從服務中下載并解析。以我們的項目為例，通過工具的壓縮和統計，在我們計算出項目體積達到了~370K，經過微信編譯上傳，在手機端預覽下載時，下載的文件達到了~540K，這正是開發者工具顯示告訴我們的編譯包大小。

開發層面：

• <span style="font-size: 16px; font-family: " microsoft="" yahei";"="" yahei";="" line-height:="" 2;"="" line-height:2;font-size:16px;"="">精簡 wxml，我們發現當 wxml 被編譯成 js 后會占用非常大的體積(減少一個壓縮后 4K 的 wxml，可以減少編譯包 9K)