微信小程式 踩坑實錄
阿新 • • 發佈：2018-11-22
最近幾個月工作飽和度較高，寫了一些小程式相關資料都在公司內網wiki中。
正好有朋友想做小程式相關，想看些資料。趁著
這個契機，把文章發出來給大家分享一下。
文章簡陋，勿噴。
開發前 需要與產品商榷的頁面細節
| 序號 | 型別 | 注意事項 | 確認細節 |
|---|---|---|---|
| 1 | css | 文字折行 | 確認文字最大長度，是否有折行問題，是否全部顯示 不折行，則超出寬度變點 或者直接截斷 需產品確認 折行，確定最大高度，最多行數，需確定 設計圖 是否需要修改 |
| 2 | js | 頁面下拉重新整理 | 開發前 應確認哪些頁面需要下拉重新整理，避免需求與自身理解不同，造成的理解偏差 |
| 3 | css | 背景色 | 頁面背景色最好保持一致，儘量避免色差較大，導致的閃屏（先顯示背景色，然後渲染的頁面圖片） |
| 4 | ui | 圖片 | 圖片應該為二倍或三倍圖，避免圖片模糊的情況 |
| 5 | xml | 文字 | 產品文件中的文字 應該與 設計稿中文字相同 ， 不同時需確認 |
| 6 | css | 圖片顯示 | 圖片顯示時 需確認縮放模式，保持比例，或者以寬或高為主 |
| 7 | xml | 模板中預設值 | 很多引數在介面返回資料中 有 null，undefined，空字串等情況，最好跟產品確定一個預設值 |
| 8 | ue | 列表重新整理 | 列表包含點選檢視詳情功能，需要注意確認列表重新整理時機 1.外部點選列表是否重新整理 2.詳情頁返回列表是否重新整理 3.同序號2
|
開發時碰到的一些坑，注意規避
| 問題說明 | 解決方案 |
|---|---|
| setData的引數過大時，會導致頁面渲染慢 | 1 改變setData的時機，避免在onload中設定大資料 2 優化大資料的資料格式 |
| 非同步呼叫api時，需防止使用者短時間快速點選按鈕 導致多次呼叫介面的問題 | 可以設定標誌位 進行執行該函式的判斷條件 |
| 頁面背景色在json配置，頁面css，全域性均可設定，優先順序不明確，json配置不生效 | 在當前頁面的css中編寫背景顏色 page{ background-color:red }， json配置中不配置 注：json配置中的背景色 在page高度100%時會出現，但涉及到翻頁時，頁面背景色就不存在了 |
| 頁面下拉重新整理和載入更多 不建議使用 scrollView | 安卓個別機型不流程 scrollView在使用時 有滑動加速，流程感比較好 |
| 微信下拉重新整理動畫 跟 部分微信api同時呼叫時，會出現 不回彈 的情況 | 下拉重新整理會被wx.showToast、wx.showLoading、wx.hideToast、wx.hideLoading、wx.showModal等方法重置下拉狀態，並留下一個小點。 不同時使用兩種api |
| 頁面底部有fixed定位元素時，需注意頁面元素過多時被定位元素覆蓋的問題 | 可以給容器新增比 定位元素 高一點的 底部內邊距，來避免定位元素壓了頁面底部一小條的情況 |
| 安卓手機點選 文字框時 會閃過重影 | 已知問題 |
| 不同機型的預設字型和顏色不統一 | 設定頁面的預設字型顏色 |
| 頁面某一個模組清晰度不高 | 去除透明度 ，使用透明度時使用 rgba ，避免使用opacity |
| 動畫在小程式內失效 | 1，時間間隔過小導致，可設定為 100ms 2，定位改為fixed |
| 在ios 8.4.1系統下，transform: translate動畫失效 | 省市三級聯動彈框完全依靠translate來實現隱藏/顯示，但是由於在ios 8.4.1系統下，此transform樣式失效（或表現形式與其他系統不同），因此需要先依靠hidden屬性控制顯示/隱藏，再通過transform屬性增加動畫效果。如此實現以後，既可以避免在低版本系統下無法控制顯示/隱藏的問題，也兼顧了高版本系統下具有較好的使用者體驗。 |
| picker-view 傳入值錯誤 | 在華為榮耀手機上 picker-view 在只有三個選項的情況下，傳入了當前值為 4 ，導致程式碼報錯。使用這類元件時，需要對傳入值的可用性進行判斷 |
| 列表出現卡頓 | scroll-view元件滑動不流暢，偶爾會有無法滑動的問題，官方正在修復中 |