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

時間 2019-11-17

標籤關於最近開發程序那些简体版

原文原文鏈接

做爲一個二流前端也有段時間了，天天沉溺於項目功能代碼不少積累到最後只成了模糊的印象。
很不巧，我這我的記性不太好。
不過有句話是這麼說的，好記性不如爛筆頭，在這個年代固然不須要爛筆頭了，但道理是同樣的，得有個地方作積累與沉澱，不管是之後翻看仍是分享都是能夠拿出手的。css

廢話說夠了，那麼，讓一切的開始。
做爲第一篇記錄，也分享不了太多的東西，代碼什麼的就先不上了，最近在開發小程序，那就先記錄一些在微信小程序的項目中踩過的坑。html

1. 小程序界面相關

1.1 小程序底部 Tabbar

在絕大多數的狀況下，小程序自帶的底部Tabbar都能知足需求。但在此項目中須要根據頁面來改變底部Tabbar內容與鏈接，嘗試使用wx.setNavigationBarTitle(OBJECT)，wx.setNavigationBarColor(OBJECT)等接口來對底部導航作設置，發現這兩個接口並不能控制導航單項的顯示隱藏。結局方案：本身寫底部。前端

1.2 高度適應問題

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

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

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

1.4 動畫問題

wx自帶的動畫接口功能不夠完善，沒法適應項目的循環動畫等需求。
最終解決方案：本身寫動畫，並作相應的封裝。項目製做中未封裝成組件，遂寫在util中。若是可以支持，使用css3動畫應該是最好的解決方案。web

單個，有結束的動畫：  
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框架上的問題。
解決方案：彈出時隱藏一些組件或是乾脆重寫。react-native

1.8 scroll-view 須要設置高

小程序的scroll-view必需要設置高。
解決方案：經過微信api獲取可視高度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: '暫無更多數據',
          });
        }
      })
  },
複製代碼