小程序(登录页面)

最新推荐文章于 2025-10-08 12:52:02 发布

原创最新推荐文章于 2025-10-08 12:52:02 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信开发者工具中编写代码，实现一个完整的小程序登录页面。内容包括前端界面设计与交互逻辑的实现。

在开发者工具中写代码实现效果。

<view class="mylogin">
<view class="header">
<text>评分系统</text>
</view>
<form  bindsubmit="formSubmit">
<view class="log">
<text>学号:</text>
<input type="text" name="no" value="...."></input>
</view>
<view class="log">
<text>密码:</text>
<input password="true" name="pwd" value="...."></input>
</view>
<view class="log">
<button type="warn" form-type="submit">登录</button>
</view>
</form>
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },

  
  formSubmit: function (e) {
   
    console.log(e.detail.value);
    wx.request({
      url: 'https://www.......top/pj/index.php/student/api/login', //仅为示例，并非真实的接口地址
      data: {
        username: e.detail.value.no,
        password: e.detail.value.pwd
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);

        //缓存
        wx.setStorage({
          key: 'student',
          data: res.data.student,
        });
        wx.showToast({
          title: '登录成功',
          icon: 'none',
          duration: 1000
        })

        //页面跳转
        wx.switchTab({
         
          url: '../teachers/teachers'
        })
      }
    })
  }
})