小程序是一種不需要下載安裝即可使用的應用。它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用；也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。

 

早在2016年9月，攜程就獲得小程序內測名額，在對微信文檔規則調研、確定需要開發的業務之后，就開始了風風火火的開發。

 

回顧三個多月的開發過程，其中碰到了各種問題，也嘗試了一些解決辦法，最終打造了攜程獨立的小程序框架。

 

本文將主要介紹攜程小程序的框架，開發和發布審核中碰到的問題及我們的一些解決辦法。

 

 

一、攜程微信小程序的框架介紹

 

 

 

 

1、CPage()

 

 

CPage是封裝了微信的Page的函數，內部通過插入中間件裝飾頁面初始化的option，主要實現頁面間通信、頁面層級控制、埋點、頁面分享等功能。

 

中間件

 

• Base : 裝飾option

• Navigator：內部維護navigatorOpts存儲上文的參數回調等，pageStack存儲頁面棧信息

• UBT ：為業務提供埋點分析、統計頁面駐留等信息分享

 

分享

 

• 在CPage中特殊處理，同時也方便統計分析

 

CPage中data處理的具體流程如下圖：

 

 

流程解釋：

1. data傳入CPage

2. Baes同步data生命周期，接受data自有屬性

3. Navigator控制層級，使用navigateTo上下文交互

4. UBT提供統計分析功能，及后續更多中間件處理

5. newData接受data.onShareAppMessage和中間件的屬性

6. 傳入原生Page()

 

 

 

2、CWX

 

 

cwx的原型是wx,擴展了更多API，工具類、網絡請求相關、定位相關、組件API等。

 

網絡請求

 

wx.request()最大并發數是5，所以要避免同時并發很多請求。

 

主要在兩個方面：

 

1、cwx提供了request，內部通過隊列的方式控制request，并且提供了cancel方法取消在等待隊列中的request

2、服務端數據合并，小程序端單個頁面請求減少

 

工具類

 

提供常用的方法，如Base64加解密，JS對象類型的判斷等

 

定位

 

1、使用wx.getLocation獲取到經緯度，上傳服務端匹配定位城市相關信息，使用百度逆地址解析

2、內部實現隊列控制定位請求，解決授權等問題

 

組件API

 

對接組件，提供快捷使用組件的API，可在任意頁面使用基礎組件

cwx.component.calendar()

cwx.component.city()

cwx.component.imagebrowser()

 

 

 

3、基礎組件

 

 

基礎組件都是基于CPage實現的，參數傳遞頁面回調都遵循CPage的規則

 

• 日歷組件

  提供常用的日期選擇功能，日期元素支持一級標題、二級標題及顏色等自定義

• 城市選擇組件

  支持國內和國際城市選擇，支持索引篩選，提供搜索功能

• 圖片瀏覽組件