如何在微信小程序中显示页面

首先我们需要申请一个小程序，然后进行appid的设置，进行修改，才可以正式进行代码的编写和运行。

1.先创建目录，然后再创建page，然后自动生成四个文件。然后再xxx.wxml中进行代码的编写

<form bindsubmit='formSubmit'> 
<view class='text'>学号</view> 
<view class="section">
  <input name="no" type="text" placeholder="输入学号" value="1635050527"/>
</view>
<view class='text'>密码</view>
<view class="section">
  <input name="pwd" password="true" placeholder="输入密码" value='123456'/>
</view>
<view>
<button formType='submit'>登录</button>
</view>
</form>

2.再xxx.wxss中进行样式的编写

.section{
  border: 1px solid #ccc;
  margin: 10px 10px;
}
form{
  width: 100px;
  height: 150px;
  margin: 10px auto;
  background: white;
}
button{
  width: 100px;
  height: 30px;
  line-height: 30px;
}
.text{
  margin: 10px;
  color: orange;
}

3.如需深一步操作，则应在xxx.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);
        wx.setStorage({
          key: "student",
          data: res.data
        });
        wx.redirectTo({
          url: '../teachers/teachers'
        })
      }
    })

4.如果进行总的操作，则应该再app等文件中进行操作。如果进行配置的话需要在app.json中进行全局的配置。