怎么制作小程序以攜程小程序開發(fā)為案例

　　2017年5月22日，微信小程序推出之時，限制非常多，現在越來越開放。怎么制作小程序也受到越來越多人的小程序制作關注，下面從多個方面來談談怎么制作小程序的一些內容。

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

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

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

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

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

1 、CPage()

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

中間件

• Base : 裝飾option
• Navigator：內部維護navigatorOpts存儲上文的參數回調等，pageStack存儲頁面棧信息
• UBT ：為業(yè)務提供埋點分析、統(tǒng)計頁面駐留等信息分享

分享

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

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

流程解釋：

1. data傳入CPage
2. Baes同步data生命周期，接受data自有屬性
3. Navigator控制層級，使用navigateTo上下文交互
4. UBT提供統(tǒng)計分析功能，及后續(xù)更多中間件處理
5. newData接受data.onShareAppMessage和中間件的屬性
6. 傳入原生Page()

2 、CWX

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

網絡請求

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

主要在兩個方面：

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的規(guī)則

• 日歷組件

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

• 城市選擇組件

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

• 圖片瀏覽組件

  提供圖片大圖瀏覽支持標題和描述，如果有層級約束可使用wx.previewImage組件，建議直接使用wx.previewImage，有三點好處：1、不占層級；2、支持分享；3、性能好。

組件效果圖如下：

二、開發(fā)過程中的問題及解決辦法

1 、渲染白屏

一次性渲染幾百條數據，會造成頁面長時間白屏，即便使用wx.showToast也無法規(guī)避體驗較差的問題，可考慮一下幾個方面解決問題：

1、局部渲染：如果頁面有明確的區(qū)塊，同時數據也是隔離的，可優(yōu)先在onLoad中渲染一部分，數據量較大的推遲到onReady中渲染

2、列表渲染：設計為分頁模式，在onReachBottom中追加下一頁數據；使用scroll-view監(jiān)聽bindscrolltolower自動追加下一頁數據

3、設計規(guī)避：頁面設計時考慮渲染問題，采用其他交互方式規(guī)避

2 、頁面層級

小程序規(guī)定頁面層級最多不超過5層，可考慮一下解決辦法：

1、業(yè)務交互上規(guī)避：超過5層時小程序端是無能為制作小程序力的，只能在業(yè)務交互設計時避免

2、使用浮層：能使用浮層取代的Page的，優(yōu)先考慮浮層

3、wx.redirectTo:某些情況下可使用重定向Promise IDE在0.11.112200版本移除了Promise，繼續(xù)使用可自行引入es6-promise-min

3 、授權彈框

在使用定位和獲取用戶信息API時，微信客戶端會彈出授權框，如果用戶未授權，并且同一時刻多次調用授權API,會造成多個授權框疊加的情況。

解決方法：對需要授權的API進行封裝，統(tǒng)一控制權限，避免在未得到授權的情況下多次調用授權API，如cwx.locate內部使用隊列控制定位請求。

4 、Pac小程序第三方平臺kage Size

小程序規(guī)定上傳的包大小不得超過1M，代碼層面可參考以下方法減少size：

1、IDE控制臺提示的warn盡量解決：wx:key

2、將wxml中的邏輯判斷遷移到js中

3、wxss中盡量少用import，將大的wxss根據需要拆分成多個小的wxss import

4、調試代碼刪除

5、圖片資源盡量在線

6、代碼壓縮

5 、異常報錯

使用微信IDE開發(fā)過程會碰到很多問題，常用的解決辦法：

1、代碼寫好一定要ctrl+s

2、回退代碼排錯

3、逐行刪代碼排錯

4、清理緩存

5、重啟IDE

三、審核遇到的問題

1、審核中的版本無法撤銷

如果提交審核就不能撤銷，只能等待微信的審核結果，必須要注意。

2、提交新的版本會將已經審核通過未發(fā)布的版本覆蓋

小程序審核流程并不像AppStore可以同時發(fā)布多個版本，不確定微信后續(xù)會不會修復。

3、提交頁面和類目不匹配被拒

填寫頁面信息時，注冊的頁面需要匹配小程序的類目，并且每個類目只能注冊

一個頁面。

4、體驗問題被拒

微信對交互體驗審核比較嚴格，如果交互有明顯的問題或者邏輯不合理會被拒絕。

四、后續(xù)的發(fā)展規(guī)劃

為了方便后續(xù)更多小程序的開發(fā)，我們還會將主版本框架抽取出來，做成可配置的獨立的SDK；以及根據小程序的需求，接入集成發(fā)布，動態(tài)打出不同類型的包，方便各種渠道。

　　hishop微信小程序可以實現一鍵開通微信小程序，結合移動云商城，可以實現七大端口的線上和線下結合模式。