微信小程序優化注意點(用戶體驗,數據邏輯優化)

1.對於列表請求數據,使用二維數組,以分頁的頁碼做一維下標,以條數做二維下標,每次setData只setData當前頁的數據,其他頁的數據不用。因爲每次setData的數據量大小有限制,官網也有說明可以參考

2.對於列表中刪除某一項,會存在狀態不對的情況。例如:左滑刪除,一頁數據有10條,左滑刪除第5條,此時第6條變爲第5條,此時的第5條應該不是出於左滑狀態,但是顯示的是左滑狀態,應該給每條for循環的添加一個key即可。(點擊參考傳送門

3.對於表單提交:

3.1對於input填寫,然後提交信息的頁面,建議使用form表單的方式;

3.2有些使用setData,然後提交時再把值取出來,放入接口提交。這種方式可能存在一些問題,例如在input框右側加一個晴空按鈕,input框有填充時展示清空按鈕,input爲空時不展示,如果通過setData的方式,會頻繁setData,會出錯。此時比較好的思路是,在搜索時把input裏的值賦值給value,其他狀態不賦值,清空的時候把value清空即可。

clear: function () {
    this.setData({
      search_list: '',
      show_clear: false,
      lpname: '',
      'no_result': false,
    });
  },
  get_search(event) {
    var that = this;
    var search = event.detail.value ? event.detail.value : '';
    that.setData({
      lpname: search
    });
    var param = {
      city: 'bj',
      search: search
    }
    if (search.trim() == '') {
      that.setData({
        search_list: '',
        show_clear: false,
        no_result: false,
      })
    } else {
	// 向接口發送數據請求
	}
})

4.對於tab切換的數據請求,每個tab下對應不同的數據,點擊tab切換,則請求不同的數據。點擊A請求A相關的數據,再點擊B展示B相關的數據,這個沒問題,需要重新請求。但是如果點擊A,展示A的數據,再點擊A就不應該請求接口,此時需要做一個限制。

click_tab(event) {
    var that = this;
    var index = event.currentTarget.dataset.index;
    if(that.data.cur_index == index){
      return false
    }
	// 如果不是連續兩次點擊同一個tab則往下走
}

5.對於一個頁面的渲染應該有這麼幾個過程

(1)進入的初始狀態到數據返回之前;(2)數據返回後,有數據;(3)數據返回後,無數據;(4)對於列表,還有請求中;(5)對於列表,還有加載完畢,到底了。

對於以上的狀態都需要做一個處理:

5.1 如果接口比較慢(或者類似於詳情這種,數據量比較大的頁面),開始請求到請求結束時間比較長,用戶不知道你在幹嘛(是掛了,還是在請求),此時可以在頁面放一個動態奔跑的小人gif圖,並寫一句“玩命加載中”,用戶能感受到你的誠意,會等待加載結束;

5.2 做一個缺省頁,讓變用戶知曉;

5.3 有數據正常展示即可;

5.4 對於列表加載中,可以在底部放一個動態的點點;

5.5 列表加載完畢,可以 放一行文字  “ 到底了 ” ,方便用戶知道沒有下一頁了(不然死命的翻頁,就是沒有下一頁)。

6.對於用戶信息的緩存存取問題:

在某些情況下,需要將用戶的存取的緩存名字變掉,如果每個地方都寫死緩存的鍵名,改起來也會非常麻煩,所以建議在util.js中封裝一個公共方法,通過公共方法來存取用戶信息比較穩妥:

/**設置用戶緩存信息**/
function set_user_infor(res) {
  var old_name = 'user_infor';
  var new_name = wx.getStorageSync(old_name);
  /**改變登錄狀態**/
  new_name.islogin = 1;
  /**儲存用戶名和手機號**/
  new_name.name = res.data.name ? res.data.name : "";
  new_name.phone = res.data.phone ? res.data.phone : "";
  new_name.uid = res.data.uid ? res.data.uid : "";
  wx.setStorageSync(old_name, new_name);
}
/**獲取用戶信息**/
function get_user_infor(name) {
  var old_name = 'user_infor';
  var myinfor = wx.getStorageSync(old_name);
  return myinfor[name];
}

7.對於頁面有城市切換的情況:

當前頁面有城市切換按鈕跳轉到一個城市選擇頁面,選擇城市後,又back回該頁面,此時該頁面數據需要刷新,但是從非城市頁面back會來是不需要刷新數據的。此時可以把城市存在全局變量中,在當前頁的onload生命週期函數中對城市setData,同時取當前頁的數據,並且在onshow生命週期中,取全局城市和this.data.city的值進行比較,如果不一致則重新拉取數據,並且把全局城市setData給當前頁即可。

8.對於頁面定位當前城市的情況:

先使用wx.getLocation獲取經緯度,通過接口解析此經緯度對應的城市信息,使用wx.showModal提醒用戶是否切換城市,如果切換則刷新頁面信息,如果不切換則不用刷新即可。

/**城市定位**/
  city_locate: function () {
    var that = this;
    //獲取定位
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        //獲取當前城市:ajax請求通過接口,傳入經緯度獲取城市
        common.getData(common.config.get_city_http, {
          latitude: res.latitude,
          longitude: res.longitude
        }, "get", function (res1) {
          if (res1.code == '') {} else {
            var code = app.globalData.city.code
            console.log("上次登錄城市爲:" + code)
            if (res1.code != code) {
			  //  提醒用戶是否需要切換城市,如果切換,則刷新數據,否則不用
              wx.showModal({
                title: '您定位的城市爲: ' + res1.cname,
                content: "是否切換",
                confirmText: "切換",
                cancelText: "取消",
                success: function (res2) {
                  if (res2.confirm) {
                    that.set_Data(res1, app);
                    if (res1.code != that.data.city.code) {
                      that.setData({
                        city: res1,
                      })
                      // 請求當前頁數據,刷新頁面
                    }
                  }
                }
              })
            }
          }
        })
      }
    })
  }
  
  // 改變緩存和全局城市信息
  set_Data(res1, app) {
  wx.setStorageSync('newcity', {
    code: res1.code,
    cname: res1.cname
  });
  app.globalData.city = {
    code: res1.code,
    cname: res1.cname
  };
}
	

9.對於需要登錄的頁面(須要檢測檢查登錄態是否過期  登錄信息一般存在緩存中)

9.1首先(wx.checkSession)檢測檢查登錄態是否過期,如果過期則需要重新走登錄流程。如果未過期,則取緩存信息,緩存信息存在則取緩存信息處理。如果緩存信息不存在,則重新走登錄流程。

9.2再通過wx.login獲取code,通過接口解析獲取用戶信息,儲存在緩存中即可。

/**真實登錄,調用微信登錄方法**/
function login_true(callback) {
  wx.login({
    success: function (res) {
      if (res.code) {
        var param = {
          code: res.code
        };
        // return false;
        ajax_curl(config.login_api_http, param, function (result) {
          var user_info = result;
          wx.setStorageSync('user_info_new', user_info);
          typeof callback == "function" && callback(user_info);
        });
      } else {
        console.log('login獲取code失敗!', res)
      }
    },
    fail: function (res) {
      console.log('login執行失敗!', res)
    }
  });
}
/**  頁面中使用的登錄方法:緩存信息需要檢測 檢查登錄態是否過期   callback:回調函數;**/
function login(callback) {
  /**檢查session是否失效**/
  wx.checkSession({
    success: function () {
      var user_info = wx.getStorageSync('user_info_new');
      if (user_info) {
        typeof callback == "function" && callback(user_info);
      } else {
        login_true(callback)
      }
    },
    fail: function () {
      login_true(callback) //重新登錄
    }
  })
}

10.小程序的跳轉,大概分爲4種

內部路徑(細分兩種:navigateTo和switchTab),H5跳轉,外部小程序跳轉(又有細分:有指定路徑跳轉,無路徑跳轉(無路徑默認跳轉到首頁))

/**
   * 1.跳轉類型:(1)當前小程序、(2)外部小程序、(3)H5、(4)wx.switchTab
   * 2.link 地址;
   * 3.appid 外部小程序
   * 4.switchTab類型
   * **/
  go_diff_type(type, link, appid) {
    if (type == 1 && link) {
      wx.navigateTo({
        url: link
      });
    }
    if (type == 2 && appid) {
      if (link) {
        wx.navigateToMiniProgram({
          appId: appid,
          path: link
        })
      } else {
        wx.navigateToMiniProgram({
          appId: appid
        });
      }
    }
    if (type == 3 && link) {
      wx.navigateTo({
        url: '/page/index/webview?url=' + encodeURIComponent(link),
      })
    }
	if (type == 4 && link) {
      wx.switchTab({
        url: link,
      })
    }
  },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章