小程序是一種不需要下載安裝即可使用的應(yīng)用。它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用；也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。

 

早在2016年9月，攜程就獲得小程序內(nèi)測(cè)名額，在對(duì)微信文檔規(guī)則調(diào)研、確定需要開(kāi)發(fā)的業(yè)務(wù)之后，就開(kāi)始了風(fēng)風(fēng)火火的開(kāi)發(fā)。

 

回顧三個(gè)多月的開(kāi)發(fā)過(guò)程，其中碰到了各種問(wèn)題，也嘗試了一些解決辦法，最終打造了攜程獨(dú)立的小程序框架。

 

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

 

 

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

 

 

 

 

1、CPage()

 

 

CPage是封裝了微信的Page的函數(shù)，內(nèi)部通過(guò)插入中間件裝飾頁(yè)面初始化的option，主要實(shí)現(xiàn)頁(yè)面間通信、頁(yè)面層級(jí)控制、埋點(diǎn)、頁(yè)面分享等功能。

 

中間件

 

• Base : 裝飾option

• Navigator：內(nèi)部維護(hù)navigatorOpts存儲(chǔ)上文的參數(shù)回調(diào)等，pageStack存儲(chǔ)頁(yè)面棧信息

• UBT ：為業(yè)務(wù)提供埋點(diǎn)分析、統(tǒng)計(jì)頁(yè)面駐留等信息分享

 

分享

 

• 在CPage中特殊處理，同時(shí)也方便統(tǒng)計(jì)分析

 

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

 

 

流程解釋?zhuān)?/span>

1. data傳入CPage

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

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

4. UBT提供統(tǒng)計(jì)分析功能，及后續(xù)更多中間件處理

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

6. 傳入原生Page()

 

 

 

2、CWX

 

 

cwx的原型是wx,擴(kuò)展了更多API，工具類(lèi)、網(wǎng)絡(luò)請(qǐng)求相關(guān)、定位相關(guān)、組件API等。

 

網(wǎng)絡(luò)請(qǐng)求

 

wx.request()最大并發(fā)數(shù)是5，所以要避免同時(shí)并發(fā)很多請(qǐng)求。

 

主要在兩個(gè)方面：

 

1、cwx提供了request，內(nèi)部通過(guò)隊(duì)列的方式控制request，并且提供了cancel方法取消在等待隊(duì)列中的request

2、服務(wù)端數(shù)據(jù)合并，小程序端單個(gè)頁(yè)面請(qǐng)求減少

 

工具類(lèi)

 

提供常用的方法，如Base64加解密，JS對(duì)象類(lèi)型的判斷等

 

定位

 

1、使用wx.getLocation獲取到經(jīng)緯度，上傳服務(wù)端匹配定位城市相關(guān)信息，使用百度逆地址解析

2、內(nèi)部實(shí)現(xiàn)隊(duì)列控制定位請(qǐng)求，解決授權(quán)等問(wèn)題

 

組件API

 

對(duì)接組件，提供快捷使用組件的API，可在任意頁(yè)面使用基礎(chǔ)組件

cwx.component.calendar()

cwx.component.city()

cwx.component.imagebrowser()

 

 

 

3、基礎(chǔ)組件

 

 

基礎(chǔ)組件都是基于CPage實(shí)現(xiàn)的，參數(shù)傳遞頁(yè)面回調(diào)都遵循CPage的規(guī)則

 

• 日歷組件

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

• 城市選擇組件

  支持國(guó)內(nèi)和國(guó)際城市選擇，支持索引篩選，提供搜索功能

• 圖片瀏覽組件