商務樓宇小程序迭代更新覆盤總結

商務樓宇小程序迭代更新覆盤總結

登錄頁面

登錄頁面有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. 對公衆端單獨進行註冊功能的實現
2. 四個端前臺增長登錄次數過多限制登錄功能的增長
3. 註冊時密碼複雜度校驗

思路：由於四個端口的登陸頁面是公用的一個，需求是隻有公衆端有註冊頁面，能夠對註冊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

先到這，後續有時間再加