商務樓宇小程式迭代更新覆盤總結
登陸頁面
登陸頁面有4個埠：公眾端，監管端，物業採集端，黨建採集端
-
需求：點選任意一端都進入到登入頁面輸入正確賬號進入到相關頁面
思路：點選對應的埠進入到登入介面時帶一個type引數，為了確定是那個埠的，點選登入按鈕呼叫介面 在成功的函式里根據type調轉到對應的頁面。
-
實現：每個埠上面對應後臺引數要求都繫結有type引數，為了點選進入登入頁面時確保登入成功時跳轉對應的介面（登入介面共用一套，登入方法也共用一套）
示例程式碼：
wxml
<view class="menu-item" bindtap="menuClicked" data-type="4">
<image class="icon" src="./image/icon-home.png"></image>
<text>公眾端</text>
</view>
<view class="menu-item" bindtap="menuClicked" data-type="5">
<image class="icon" src="./image/icon-building.png"></image>
<text>監管端</text>
</view>
js 包括動態設定登入狀態當前頁面的標題
// 選擇進入哪個端
menuClicked:function(e){
var type = e.currentTarget.dataset.type;
wx.setStorageSync("atype", type);
this.setData({
atype: type
});
// 物業採集端
if (type === '1') {
this.setData({
isShowHome:false,
hregister:false,
isShowSignButtton: false, // 隱藏註冊1按鈕
isShowsgin: false, // 隱藏註冊2按鈕
});
wx.setNavigationBarTitle({ title: '物業採集平臺' }) //動態設定當前頁面標題
return false
}
新的需求：
- 對公眾端單獨進行註冊功能的實現
- 四個端前臺增加登陸次數過多限制登陸功能的增加
- 註冊時密碼複雜度校驗
思路：因為四個埠的登入頁面是公用的一個，需求是隻有公眾端有註冊頁面，可以對註冊1按鈕做一個
wx:if判斷，如果帶的引數是公眾端，則顯示，此時這個註冊1按鈕只是一個切換按鈕，並無呼叫介面的功能，點選時切換到真正的註冊2按鈕上，此時頁面只有一個註冊2按鈕，登入1按鈕消失，點選註冊2時呼叫介面成功後返回起初的登入1，註冊1狀態，這一操作因為涉及到登入1按鈕狀態的改變，為了避免影響到其他埠的正常顯示，這裡也將登入1和其他頁面的登入2做區分，
登入錯誤次數過多限制登陸，
思路：點選登陸1/登陸2 呼叫介面在失敗函式中做判斷，進行一個計數，數量滿足時，將登陸按鈕替換為另一個登陸（errlogin）這個按鈕點選時將會有一個彈框提示，提示錯誤次數過多，請30分鐘後重試等然後做一個延遲函式，30分鐘後將登陸的狀態進行改變即可
實現：
/**鎖定登入按鈕提示 */
errLogin (){
wx.showToast({
icon:'none',
duration:2000,
title: '錯誤次數太多，已被鎖定,請30分鐘後重試',
})
},
// 失敗回撥
onFailed: function (msg) { //onFailed回撥
wx.hideLoading();
if (msg) {
wx.showToast({
title: msg,
icon: "none"
})
// 判斷輸錯次數
// 獲取data 中的值
this.setData({
num:(this.data.num)+1
})
// 如果輸錯次數達到5
if(this.data.num===5){
this.setData({
login:false,
login2: true,
isShowSignButtton2: true
})
// // 倒數計時 暫時不用
// this.setData({
// timer:setInterval(() => {
// this.setData({
// count:(this.data.count)-1
// })
// }, 1000)
// })
// // 清除定時器
// setTimeout(() => {
// if(this.data.count===0){
// clearInterval(this.data.timer)
// }
// }, 6000);
setTimeout(()=>{
this.setData({
num:0,
login:true,
isShowSignButtton: true,
login2: false,
isShowSignButtton2: false,
isShowsgin: false
})
// },1000*60*30)
},1000)
}
}else{
wx.showToast({
title:'使用者名稱或密碼有誤，請仔細檢查或者聯絡系統管理員',
icon: "none"
})
}
},
reg = /^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,}$/
//密碼至少8位，包括數字、大小寫字母和特殊字元三種及以上
公眾端頁面
啊哦，好像不能寫啊，內容保密哦，
那就寫一下公共的進行梳理吧
關於路徑
單獨寫一個apis.js檔案，然後引用，你懂的，前期內容清晰，後期維護方便，強烈建議加註釋，後期會感謝當時的自己的
示例：
// 資訊查詢-->樓宇查詢
var jgdQueryBuilding = '/app/jgdQueryBuilding.xhtml'
// 資訊查詢--->企業查詢
var jgdQueryEntIn = '/app/jgdQueryEntIn.xhtml'
// 企業認領狀態
var doEditin = '/app/doEditin.xhtml'
//匯出模組
module.exports = {
doEditin,
jgdQueryEntIn,
jgdQueryBuilding,
}
在js檔案中記得引用哦
//引
var apis = require("../../../utils/apis.js");
//用
var urlgzfw = app.baseurlgzfw + apis.xiaoDoAdd;
關於介面
單獨封裝一個network.js檔案
示例：
/**
* 供外部post請求呼叫
*/
function post(url, params, onStart, onSuccess, onFailed) {
request(url, params, "POST", onStart, onSuccess, onFailed);
}
/**
* 供外部get請求呼叫
*/
function get(url, params, onStart, onSuccess, onFailed) {
request(url, params, "GET", onStart, onSuccess, onFailed);
}
/**
* function: 封裝網路請求
* @url URL地址
* @params 請求引數
* @method 請求方式：GET/POST
* @onStart 開始請求,初始載入loading等處理
* @onSuccess 成功回撥
* @onFailed 失敗回撥
*/
function request(url, params, method, onStart, onSuccess, onFailed) {
onStart(); //request start
wx.request({
url: url,
data: dealParams(params),
method: method,
header: { 'content-type': 'application/json' },
success: function (res) {
console.log(res);
if (res.data == '') {
wx.showToast({
title: "未查詢到相關資訊，請聯絡系統管理員",
icon:"none",
duration: 2000
})
return
}
if (res.data) {
console.log(res.data);
console.log(res.data.fCode);
/** start 根據需求 介面的返回狀態碼進行處理 */
if (res.data.fCode == '01' || res.data.fCode == '05' || res.data.fCode == '04') {
onSuccess(res.data); //request success
}
else if(res.data.fCode == '00'){ // 新介面 錯誤登陸返回的攔截資訊
onFailed(res.data.fMsg); //request failed
} else if(res.data.moduleName !==''){ // 新介面 其他頁面判斷返回的資訊
onSuccess(res.data)
}else{ //老介面 錯誤資料返回的資訊
onFailed(res.data.fMsg); //request failed
}
/** end 處理結束*/
}
},
fail: function (error) {
onFailed(""); //failure for other reasons
}
})
}
/**
* function: 根據需求處理請求引數：新增固定引數配置等
* @params 請求引數
*/
function dealParams(params) {
return params;
}
module.exports = {
postRequest: post,
getRequest: get,
}
這個檔案中在成功回撥時做的判斷有點多，因為寫後臺介面的不是一個人，後期又增加了新的後臺路徑，然後就有點亂，可能是後臺的寫法標準不一樣？？我們也不知道，反正給哈都能寫，沒得怕的，哈哈
其中有個問題，看文件的時候每個字都看進去了。但是寫的時候真的是不栽跟頭記不住啊。就是跳轉頁面的，wx.navigateTo和 wx.switchTab,謹記啊，這個專案裡每個埠進去都又是一個完整的小系統，系統裡的首頁都是有tabBar的，所以跳轉到這個頁面的時候要用 wx.switchTab，別頁面跳轉不過去一遍一遍的檢查路徑的問題了，真的是求求我自己了
wx.navigateTo
保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程式中頁面棧最多十層。
在小程式外掛中使用時，只能在當前外掛的頁面中呼叫
提到這個就想到了wx.navigateBack
wx.navigateBack(Object object)
關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧，決定需要返回幾層。
在小程式外掛中使用時，只能在當前外掛的頁面中呼叫
返回上一頁不傳參
// 注意：呼叫 navigateTo 跳轉時，呼叫該方法的頁面會被加入堆疊，而 redirectTo 方法則不會。見下方示例程式碼
// 此處是A頁面
wx.navigateTo({
url: 'B?id=1'
})
// 此處是B頁面
wx.navigateTo({
url: 'C?id=1'
})
// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
delta: 2
})
返回上一頁傳參
let pages = getCurrentPages(); // 當前頁，
let prevPage = pages[pages.length - 2]; // 上一頁
prevPage.setData({
subPageResult: "我是結果",
})
wx.navigateBack({ //返回
delta: 1
})
我常用的就這幾個
需要跳轉的應用內非 tabBar 的頁面的路徑 (程式碼包路徑), 路徑後可以帶引數。引數與路徑之間使用
?分隔，引數鍵與引數值用=相連，不同引數用&分隔；如 'path?key=value&key2=value2
先到這，後續有時間再加