欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序的用户登录

程序员文章站 2024-02-11 16:45:04
...

过程

当你点登录按钮的时候会跳转到teachers的页面上。首先你要发起请求用wx.request,调用接口,得到他的username和password,用wx.setStorage将数据存储在本地缓存中,用wx.redirectTo进行页面的跳转。

登录的页面

微信小程序的用户登录


login.wxml代码

<!--pages/login/login.wxml-->
<form bindsubmit='formSubmit'>
  <view class="section">
    <view class="section__title">学号:</view>
    <input name="no" type="number" placeholder="请输入学号"  />
  </view>
  <view class="section">
    <view class="section__title">密码:</view>
    <input name="pwd" type="number" password='true' placeholder="请输入密码"  />
  </view>
  <view class="btn-area">
    <button form-type="submit" type='primary'>登录</button>
  </view>
</form>

login.js代码

formSubmit(e){
    // console.log(e)
    wx.request({
      url: xxx, //仅为示例,并非真实的接口地址
      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"
        })
      }
    })
  }