1. 程式人生 > >微信小程式-評教系統學生端(底部選單、修改密碼)

微信小程式-評教系統學生端(底部選單、修改密碼)

如果小程式是一個多 tab 應用(客戶端視窗的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項指定 tab 欄的表現,以及 tab 切換時顯示的對應頁面。tabBar 中的 list 是一個數組,只能配置最少2個、最多5個 tab,tab 按陣列的順序排序。

下面是我寫的tabbar程式碼。其中有四個引數,pagePath(頁面路徑,必須在 pages 中先定義),text(tab 上按鈕文字),iconPath(圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,當 postion 為 top 時,此引數無效,不支援網路圖片),selectedIconPath(選中時的圖片路徑

)。

"tabBar": {
    "list": [
      {
        "pagePath": "pages/teachers/teachers",
        "text": "評教",
        "iconPath": "images/ViewGallery1.png",
        "selectedIconPath": "images/ViewGallery.png"
      },
      {
        "pagePath": "pages/info/info",
        "text": "我的",
        "iconPath": "images/account1.png",
        "selectedIconPath": "images/account.png"
      }
    ]
  }

效果如圖所示:


下面是我的修改密碼的js程式碼:先獲取前臺輸入的資料,並進行判斷,密碼不能為空且輸入的兩次密碼必須一致,用POST方式訪問介面,返回資料,並顯示出資訊(正確或錯誤),如果修改成功則刪除本地快取,並跳轉到登入頁。

formSubmit:function (e){
    console.log(e);
    var oldpwd = e.detail.value.oldpwd;//舊密碼
    var newpwd = e.detail.value.newpwd;//新密碼
    var pwd = e.detail.value.pwd;//確認密碼
    var student = wx.getStorageSync('student');
    if(oldpwd=='' || newpwd=='' ||pwd==''){
      wx.showToast({
        title: '密碼不能為空!',
        icon: 'none',
        duration: 1000
      })
    }else if(newpwd != pwd){
      wx.showToast({
        title: '兩次密碼不一致!',
        icon: 'none',
        duration: 1000
      })
    }else{
      // console.log(oldpwd);
      // console.log(newpwd);
      // console.log(student.no);
      wx.request({
        url: "",
        method :'POST',
        data: {
          no:student.no,
          oldpwd:oldpwd,
          newpwd:newpwd
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 預設值
        },
        success: function (res) {
          console.log(res);
          if (res.data.error) {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000,
              success: function () {
                wx.clearStorageSync();
                setTimeout(function () {
                  wx.redirectTo({
                    url: '../login/login'
                  })
                },2000)
              }
            })
          }
        }
      })
    }
  },

修改密碼以後登入頁也要進行修改,登入時判斷輸入的學號和密碼是否正確,如果正確則進入下一頁,若沒有點選退出登入則下次登入時直接進入評教頁面。下面是我的登入頁修改的程式碼:

formSubmit: function (e) {
    // console.log(e);
    wx.request({
      url: '', //僅為示例,並非真實的介面地址
      data: {
        username: e.detail.value.no,
        password: e.detail.value.pwd
      },
      header: {
        'content-type': 'application/json' // 預設值
      },
      success: function (res) {
        console.log(res);
        if(res.statusCode == 200){
          if(res.data.error == true){
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          }else{
            wx.setStorageSync('student', res.data.student);
            wx.showToast({
              title: '登入成功',
              icon: 'success',
              duration: 2000
            })
            wx.switchTab({
              url: '../teachers/teachers'
            })
          }
        }
        
      }
    })
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var student = wx.getStorageSync('student');
    if(typeof(student)=='object' && student.no!='' && student.classid!=''){
      wx.switchTab({
        url: '../teachers/teachers',
      })
    }
  },