小程式是一種不需要**安裝即可使用的應用。它實現了應用「觸手可及」的夢想，使用者掃一掃或者搜一下即可開啟應用；也體現了「用完即走」的理念，使用者不用關心是否安裝太多應用的問題。
早在2023年9月，攜程就獲得小程式內測名額，在對微信文件規則調研、確定需要開發的業務之後，就開始了風風火火的開發。
回顧三個多月的開發過程，其中碰到了各種問題，也嘗試了一些解決辦法，最終打造了攜程獨立的小程式框架。
本文將主要介紹攜程小程式的框架，開發和發布審核中碰到的問題及我們的一些解決辦法。
一、攜程微信小程式的框架介紹
1、cpage()
cpage是封裝了微信的page的函式，內部通過插入中介軟體裝飾頁面初始化的option，主要實現頁面間通訊、頁面層級控制、埋點、頁面分享等功能。
中介軟體分享
在cpage中特殊處理，同時也方便統計分析
cpage中data處理的具體流程如下圖：
流程解釋：
data傳入cpage
baes同步data生命週期，接受data自有屬性
n**igator控制層級，使用n**igateto上下文互動
ubt提供統計分析功能，及後續更多中介軟體處理
newdata接受data.onshareappmessage和中介軟體的屬性
傳入原生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的規則
日曆元件
提供常用的日期選擇功能，日期元素支援一級標題、二級標題及顏色等自定義
城市選擇元件
支援國內和國際城市選擇，支援索引篩選，提供搜尋功能
瀏覽元件
提供大圖瀏覽支援標題和描述，如果有層級約束可使用wx.previewimage元件，建議直接使用wx.previewimage，有三點好處：1、不佔層級；2、支援分享；3、效能好。
元件效果圖如下：
二、開發過程中的問題及解決辦法
1、渲染白屏
一次性渲染幾百條資料，會造成頁面長時間白屏，即便使用wx.showtoast也無法規避體驗較差的問題，可考慮一下幾個方面解決問題：
1、區域性渲染：如果頁面有明確的區塊，同時資料也是隔離的，可優先在onload中渲染一部分，資料量較大的推遲到onready中渲染
2、列表渲染：設計為分頁模式，在onreachbottom中追加下一頁資料；使用scroll-view監聽bindscrolltolower自動追加下一頁資料
3、設計規避：頁面設計時考慮渲染問題，採用其他互動方式規避
2、頁面層級
小程式規定頁面層級最多不超過5層，可考慮一下解決辦法：
1、業務互動上規避：超過5層時小程式端是無能為力的，只能在業務互動設計時避免
2、使用浮層：能使用浮層取代的page的，優先考慮浮層
3、wx.redirectto:某些情況下可使用重定向promiseide在0.11.112200版本移除了promise，繼續使用可自行引入es6-promise-min
3、授權彈框
在使用定位和獲取使用者資訊api時，微信客戶端會彈出授權框，如果使用者未授權，並且同一時刻多次呼叫授權api,會造成多個授權框疊加的情況。
解決方法：對需要授權的api進行封裝，統一控制許可權，避免在未得到授權的情況下多次呼叫授權api，如cwx.locate內部使用佇列控制定位請求。
4、package size
小程式規定上傳的包大小不得超過1m，**層面可參考以下方法減少size：
1、ide控制台提示的warn盡量解決：wx:key
2、將wxml中的邏輯判斷遷移到js中
3、wxss中盡量少用import，將大的wxss根據需要拆分成多個小的wxss import
4、除錯**刪除
5、資源盡量**
6、**壓縮
5、異常報錯
使用微信ide開發過程會碰到很多問題，常用的解決辦法：
1、**寫好一定要ctrl+s
2、回退**排錯
3、逐行刪**排錯
4、清理快取
5、重啟ide
三、審核遇到的問題
1、審核中的版本無法撤銷
如果提交審核就不能撤銷，只能等待微信的審核結果，必須要注意。
2、提交新的版本會將已經審核通過未發布的版本覆蓋
小程式審核流程並不像appstore可以同時發布多個版本，不確定微信後續會不會修復。
3、提交頁面和類目不匹配被拒
填寫頁面資訊時，註冊的頁面需要匹配小程式的類目，並且每個類目只能註冊
乙個頁面。
4、體驗問題被拒
微信對互動體驗審核比較嚴格，如果互動有明顯的問題或者邏輯不合理會被拒絕。
四、後續的發展規劃
為了方便後續更多小程式的開發，我們還會將主版本框架抽取出來，做成可配置的獨立的sdk；以及根據小程式的需求，接入整合發布，動態打出不同型別的包，方便各種渠道。
談談小程式雲開發的那些坑
在編寫 的時候難免會犯一些低端的錯誤,這裡便書寫了一些我曾經犯過的一些錯誤,希望對其他學者有所幫助。index.js const cloud require wx server sdk 就是在這裡筆者犯個極為簡單的錯誤我把request promise 寫成了 request.promise con...
開發小程式分頁功能遇到的坑
暫無資料view wx else scroll y true style height 100vh bindscrolltolower getmorelist wx for wx key index 內容省略 網路請求工具 const api require config api.js api檔案 ...
使用mpvue 開發小程式 遇到的坑
閒著沒事弄個小程式練練手 整理下方便日後看 先整理乙個小坑 小程式不支援select 標籤，剛好ui 外掛程式也沒得，看了下小程式是用picker 替代了select 看著api 就寫了乙個不過對應下面的 option 是空白的 原來是range 這個屬性的問題 當前訊息 在data 初始化 sel...