微信小程序-创建小程序+编写学生评教系统的学生登录页面

一 ：创建小程序

1 . 首先，在微信公众平台上注册属于自己的小程序。

2 . 下载开发者工具进行代码的开发和上传。

3 . 添加自己的项目。填写appid

 

4 . 登陆之后显示如下：背景颜色可自己随意改

二：编写学生评教系统的学生登录页面

1 . 新建学生登录 login 目录。创建page

2 . 在login.wxml中编写页面。login.wxss给页面添加scc样式。login.js 添加js样式。

   效果如图所示：

  可按自己喜好修改。

  3 . login.wxml代码如下：      

< 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= '1635050906' placeholder= '请输入学号' / >

view >

< view class= 'section'>

< text >密码： text >

< input password= "true" name= "pwd" value= '123456' placeholder= '请输入密码' / >

view >

< view class= 'section'>

< button type= 'primary' form-type= 'submit' class= 'mybtn'>登录 button >

view >

form >

view >

4 . login.wxss代码如下：

.header{

margin-top: -40px;

margin-bottom: 40px;

}

form{

width: 80%;

border: 1px solid #999;

padding: 0 10px;

}

.section{

margin: 50 rpx auto;

}

input{

border: 1px solid #000;

height: 35px;

}

.mybtn{

width: 60%;

margin-top: 40px;

}