微信小程序---登录页面

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/SongOkoK/article/details/80191018
开发微信小程序,代码构成是由JSON配置、WXML模板、WXSS样式、JS逻辑交互组成。
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。以下是我的登录页面的js代码:
// pages/login/login.js
Page({

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

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

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

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

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

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

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

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

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

  formSubmit: function (e) {
    // console.log('form发生了submit事件,携带数据为:', e.detail.value),
    wx.request({
      url: 'https://www.lishuming.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',
        });
        wx.redirectTo({
          url: "../teachers/teachers"
        })
      }
    })
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }
})
wxml内容:
<!--pages/login/login.wxml-->
<!-- <view class="container log-list">
  <view class="title">评分系统学生登录</view>
    <form bindsubmit="formSubmit" bindreset="formReset">  
      <view class="section">
        <view class="section__title">学号:</view>
        <input name="input" name="no" value='1635050251' placeholder="请输入学号" />
      </view>

      <view class="section">
        <view class="section__title">密码:</view>
        <input name="input" password='true' name="pwd" value='123456' placeholder="请输入密码" />
      </view>

      <view class="btn-area">
        <button formType="submit">登录</button>
        <button formType="reset">重置</button>
      </view>
    </form>
</view> -->
wxss内容:
 /* pages/login/login.wxss  */
/* form{
  width: 100%;
  margin-top: 50rpx; 
}

.title{
  font-size: 48rpx;
  margin-bottom: 30rpx; 
  font-weight: bold; 
}


.section__title {
   font-size: 40rpx;
   padding: 20rpx;
   color: #000;
} 

input {
  padding: 24rpx;
  background:rgb(246,248,248);
  height: 24rpx;
}
.btn-area{
   margin-top: 100rpx; 
}
 button {
  margin: 20rpx;
  background: #9FB6CD;
} */


展开阅读全文

没有更多推荐了,返回首页