關於最近開發小程式中踩過的那些坑

ha_wolf發表於2018-09-04

作為一個二流前端也有段時間了，每天沉溺於專案功能程式碼很多積累到最後只成了模糊的印象。
很不巧，我這個人記性不太好。
不過有句話是這麼說的，好記性不如爛筆頭，在這個年代當然不需要爛筆頭了，但道理是一樣的，得有個地方做積累與沉澱，無論是以後翻看還是分享都是可以拿出手的。

廢話說夠了，那麼，讓一切的開始。
作為第一篇記錄，也分享不了太多的東西，程式碼什麼的就先不上了，最近在開發小程式，那就先記錄一些在微信小程式的專案中踩過的坑。

1. 小程式介面相關

1.1 小程式底部 Tabbar

在絕大多數的情況下，小程式自帶的底部Tabbar都能滿足需求。但在此專案中需要根據頁面來改變底部Tabbar內容與連線，嘗試使用wx.setNavigationBarTitle(OBJECT)，wx.setNavigationBarColor(OBJECT)等介面來對底部導航做設定，發現這兩個介面並不能控制導航單項的顯示隱藏。 結局方案：自己寫底部。

1.2 高度適應問題

隨著iphonex的加入，市面上的長螢幕手機越來越多，而專案中對介面的設計往往是針對iphone6的1344px製作的，而在專案中單位統一使用了適應寬度的rpx，在大部分頁面中會出現底部較長等問題，這個問題本身影響不大，但在活動頁中底部過多的留白會造成較差的使用者體驗，但是盲目引入vh等適應高度會造成圖片變形等問題。
最後的解決方案：獲取手機的寬高比例後與設計稿的寬高比例做對應的計算，計算出冗餘的高度，並將這些高度分配在元素的間距之中。

1.3 位於介面底部的輸入框上拉距離問題

在移動端的前端表單中，底部的輸入框會被鍵盤頂上適應的距離，但這個距離是以輸入框底部為基準的，在你的輸入框有padding等樣式時會出現較差的使用者體驗，特別在使用ui框架的cell之類的元素，會導致上移距離不夠的問題。
最終解決方案：改寫ui框架的cell，新增一個樣式，讓這個樣式中的input框以高度佔滿整個cell列。

1.4 動畫問題

wx自帶的動畫介面功能不夠完善，無法適應專案的迴圈動畫等需求。
最終解決方案：自己寫動畫，並做相應的封裝。專案製作中未封裝成元件，遂寫在util中。 如果能夠支援，使用css3動畫應該是最好的解決方案。

單個，有結束的動畫：  
const animation=function (params, end, frame, speed,that, callback) {//引數自左到右分別為修改物件，結束值，重新整理速度，重新整理距離，回撥函式,注意，end應能被speed整除
  let clock2 = setInterval(() => {
    let value;
    for (let i in params) {
      params[i] < end ? params[i] = params[i] + speed : params[i] = params[i] - speed;
      value = params[i];
    }
    that.setData({
      ...params
    })
    if (value == end) {
      clearInterval(clock2);
      if (callback)
        callback();
    }
  }, frame)
};
複製程式碼
迴圈動畫 注意start應小於end
const animationload = function (params,start, end, frame, speed, that) {//引數自左到右分別為修改物件，最小值，最大值，重新整理速度，重新整理距離
  let flag=true;
  let value;
  let clock2 = setInterval(() => {
    if(flag){
      for (let i in params) {
        params[i] < end ? params[i] = params[i] + speed : params[i] = params[i] - speed;
        value = params[i];
      }
      that.setData({
        ...params
      })
      if (value >= end) {
        flag = !flag;
      }
    }
    else{
      for (let i in params) {
        params[i] > start ?params[i] = params[i] - speed: params[i] = params[i] + speed;
        value = params[i];
      }
      that.setData({
        ...params
      })
      if (value <= start) {
        flag = !flag;
      }
    }
  }, frame)
};
複製程式碼

1.5 圖片載入問題

小程式中載入本地圖片的速度會非常慢。
解決方案：使用base64(程式碼太難看了，否決)，後臺架設圖片服務，使用線上圖片（雖然還是有點慢）。

1.6 icon-font的問題

程式中需要引入iconfont圖片。
解決方案：小程式能夠支援iconfont，甚至可以對此作出封裝。但此專案中只是單純的引入了小程式並未做封裝。
將所需的icont圖片庫下載，拿出裡面的iconfont.css以線上的地址替代頭部，並對.iconfont做出相應的修改，重新命名成.wxss的檔案格式，放入util中再需要的css中以 @import "../../utils/iconFont.wxss"引入即可。

1.7 使用的ui框架 zan-ui的一些問題

ui框架層次不如原生元件，再使用中會出現原生組建覆蓋再ui框架上的問題。
解決方案：彈出時隱藏一些元件或是乾脆重寫。

1.8 scroll-view 需要設定高

小程式的scroll-view必須要設定高。
解決方案：通過微信api獲取可視高度

    wx.getSystemInfo({
      success: (res) => {
        console.log(res.windowHeight);
        this.setData({
          height: res.windowHeight - 48,
          pageHeight: res.windowHeight
        })
      }
    });
複製程式碼

1.9 防抖問題

拆紅包，預測，小遊戲等涉及倒介面，setInterval的按鈕不加防抖會出現嚴重的bug 解決方案：加入防抖機制

1.10 入口載入判斷去不同頁面時出現首頁後跳轉

小程式的入口只有一個，可往往需要不同引數來判斷跳轉的頁面。
解決方案：再首頁加入一個loading頁面判斷完畢後跳轉倒各自的頁面。

2. 小程式框架編碼問題

2.1 小程式的跳轉只能帶url中?後的引數

小程式無法像react-native那樣再navigator中附帶物件等引數。
解決方案：使用app等全域性變數。

2.2 小程式的全域性變數問題

小程式的全域性變數wx.setStorage()後產生的快取不會因為小程式的刪除而清除。
解決方案：使用api中的wx.clearStorage()來清楚快取。

2.3 資料改造，列表分頁時，較為優雅的寫法

  getList(params) {
    console.log(params)
    getPageList(params)
      .then(res => {
        console.log(res.data.data.data)
        const data = res.data.data.data.map((item, key) => {
          
          return {
            ...item,
            modifyTime: moment(item.endTime).format('YYYY.MM.DD'),
            // department_name: item.projectDockingDeaprtmentList.map(item => item.department_name).join(' ')
            departmentsinfo: item.departments.map(item=>(`@${item.departmentName}`)).join(' ')||'@All',
          };
        });
        // 按照頁面賦值
        if (this.pageNo === 1) {
          this.setData({
            dashboard: data
          });
        } else {
          this.setData({
            dashboard: this.data.dashboard.concat(data)
          });
        }

        this.setData({
          loadStateType: 'text',
          loadStateText: '上拉載入更多',
        });

        if (data.length < this.data.params.pageSize) {
          this.setData({
            loadStateType: 'text',
            loadStateText: '暫無更多資料',
          });
        }
      })
  },
複製程式碼

2.4 無法獲取使用者微訊號

微信的wx.getUserInfo是無法獲取倒使用者的微訊號的，只能獲取倒使用者的openid

2.5 獲取使用者是否關注了與小程式繫結的公眾號的問題

解決方案：可以通過wx.getUserInfo介面中是否能獲取UnionID來判斷

2.6元件封裝

本專案中未使用元件化的思路，需要改進。
解決方案：微信小程式元件化

3. 小程式上線的一些問題

2.1 後臺必須使用https

後臺介面域名必須誰用https，並且在微信平臺中做過設定。

2.2 其他配置

上線可以選擇關閉不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書這個選項

以上是個人在專案中的一些經歷，可能觀念有誤歡迎指正，隨著開發的進行研究的深入會繼續補充修正，感謝各位大佬的閱讀。

相關文章