注冊登錄

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

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

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

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

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

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

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

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

1 、CPage()

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

中間件

  • Base : 裝飾option
  • Navigator:內(nèi)部維護(hù)navigatorOpts存儲(chǔ)上文的參數(shù)回調(diào)等,pageStack存儲(chǔ)頁面棧信息
  • UBT :為業(yè)務(wù)提供埋點(diǎn)分析、統(tǒng)計(jì)頁面駐留等信息分享

分享

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

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

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

流程解釋:

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

2 、CWX

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

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

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

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

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

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

工具類

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

定位

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

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

組件API

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

cwx.component.calendar()

cwx.component.city()

cwx.component.imagebrowser()

3 、基礎(chǔ)組件

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

  • 日歷組件

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

  • 城市選擇組件

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

  • 圖片瀏覽組件

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

組件效果圖如下:

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

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

1 、渲染白屏

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

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

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

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

2 、頁面層級(jí)

小程序規(guī)定頁面層級(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)框疊加的情況。

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

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、提交頁面和類目不匹配被拒

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

一個(gè)頁面。

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

微信對交互體驗(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é)合模式。

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店