使用微信小程序实现学生登录

首先 ，先登录微信小程序

创建login目录，使用Page自动生成文件

小程序采用wxml,js,wcss,json页面结构，wxml如同html,wcss如同css

在微信开发者工具中编写小程序时，切记使用div

实现学生登录，第一要搭建页面

参考以下代码：

<view class='container'>
  <view class='header'>
     <text>评教系统-学生端</text> 
  </view>
  <form bindsubmit='formSubmit' bindreset='formReset'>
    <view class='section'>
       <text>学号：</text>
       <input type="number" name="no" value='1635050915' placeholder='请输入学号'></input>
    </view>
    <view class='section'>
      <text>密码：</text>
      <input password='true' name="pwd" value='123456'></input>
    </view>
   <view class='section'>
     <button type='primary' form-type='submit'>登录</button>
   </view>
  </form>
</view>

页面搭建完工需要wcss的美观以下

如下：

form{
  width: 100%;
  border: 1px solid #0f0;
}
.section{
  margin: 50rpx auto;
}
input{
  border: 1px solid #ccc;
  height:100rpx;
}
.header{
  padding-top: 20rpx;
}

要实现简易的功能，需要js实现

如下代码：

formSubmit:function(e){
    console.log(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)  
        })
      }
    })
  }

标签名字有点不一样 往往写 HTML 的时候，经常会用到的标签是 div, p, span，但小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力。

这样，一个简易的学生登录页面就做好了！