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

　　2017年5月22日，微信小程序推出之時(shí)，限制非常多，現(xiàn)在越來越開放。怎么制作小程序也受到越來越多人的小程序制作關(guān)注，下面從多個(gè)方面來談?wù)勗趺粗谱餍〕绦虻囊恍﹥?nèi)容。

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

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

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

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

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

1 、CPage()

CPage是封裝了微信的Page的函數(shù)，內(nèi)部通過插入中間件裝飾微信小程序appid頁(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處理的具體流程如下圖：

流程解釋：

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，工具類、網(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)部通過隊(duì)列的方式控制request，并且提供了cancel方法取消在等待隊(duì)列中的request

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

工具類

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

定位

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

2、內(nèi)部實(shí)現(xiàn)隊(duì)列控制定位請(qǐng)求，解決授權(quá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ó)際城市選擇，支持索引篩選，提供搜索功能

• 圖片瀏覽組件

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

組件效果圖如下：

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

1 、渲染白屏

一次性渲染幾百條數(shù)據(jù)，會(huì)造成頁(yè)面長(zhǎng)時(shí)間白屏，即便使用wx.showToast也無法規(guī)避體驗(yàn)較差的問題，可考慮一下幾個(gè)方面解決問題：

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

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

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

2 、頁(yè)面層級(jí)

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

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

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

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

3 、授權(quán)彈框

在使用定位和獲取用戶信息API時(shí)，微信客戶端會(huì)彈出授權(quán)框，如果用戶未授權(quán)，并且同一時(shí)刻多次調(diào)用授權(quán)API,會(huì)造成多個(gè)授權(quán)框疊加的情況。

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

4 、Pac小程序第三方平臺(tái)kage Size

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

1、IDE控制臺(tái)提示的warn盡量解決：wx:key

2、將wxml中的邏輯判斷遷移到j(luò)s中

3、wxss中盡量少用import，將大的wxss根據(jù)需要拆分成多個(gè)小的wxss import

4、調(diào)試代碼刪除

5、圖片資源盡量在線

6、代碼壓縮

5 、異常報(bào)錯(cuò)

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

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

2、回退代碼排錯(cuò)

3、逐行刪代碼排錯(cuò)

4、清理緩存

5、重啟IDE

三、審核遇到的問題

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

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

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

小程序?qū)徍肆鞒滩⒉幌馎ppStore可以同時(shí)發(fā)布多個(gè)版本，不確定微信后續(xù)會(huì)不會(huì)修復(fù)。

3、提交頁(yè)面和類目不匹配被拒

填寫頁(yè)面信息時(shí)，注冊(cè)的頁(yè)面需要匹配小程序的類目，并且每個(gè)類目只能注冊(cè)

一個(gè)頁(yè)面。

4、體驗(yàn)問題被拒

微信對(duì)交互體驗(yàn)審核比較嚴(yán)格，如果交互有明顯的問題或者邏輯不合理會(huì)被拒絕。

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

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

　　hishop微信小程序可以實(shí)現(xiàn)一鍵開通微信小程序，結(jié)合移動(dòng)云商城，可以實(shí)現(xiàn)七大端口的線上和線下結(jié)合模式。