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,
})
}
},