微信小程序学生注册页面的实现

在实现此功能之前我们必须有阿里云或百度云的个人域名

首先我们先使用weui设计一个注册页面

<form bindsubmit="formSubmit">
  <view class='weui-cell weui-cell_input'>
    <view class='weui-cell__hd'>
      <view class='weui-label'>学号</view>
    </view>
    <view class='weui-cell__bd'>
      <input class='weui-input' name='no' placeholder='请输入学号' value='1635050512'/>
    </view>
  </view>
  <view class='weui-cell weui-cell_input'>
    <view class='weui-cell__hd'>
      <view class='weui-label'>姓名</view>
    </view>
    <view class='weui-cell__bd'>
      <input class='weui-input' name='name' placeholder='请输入姓名' value='张三'/>
    </view>
  </view>
  <view class='weui-cell weui-cell_input'>
    <view class='weui-cell__bd'>性别</view>
    <input class='weui-input' name='sex' value='{{sex}}'/>
    <view class='weui-cell__ft'>
      <switch checked bindchange='switch1Change'></switch>
    </view>
  </view>
  <view class='weui-cell weui-cell_input'>
    <view class='weui-cell__hd'>
      <view class='weui-label'>年龄</view>
    </view>
    <view class='weui-cell__bd'>
      <input class='weui-input' name='age' placeholder='请输入年龄' value='20'/>
    </view>
  </view>

  <view class='weui-btn-area'>
    <button class='weui-btn' type='primary' form-type='submit' >确认</button>
  </view>
</form>

我们把相应的数据库建在百度云或阿里云的数据库管理中

最后再写js代码实现学生注册页面的功能

Page({
  data: {
    imageList: [],
    sex: '男',
    count: 1
  },
  switch1Change: function (e) {
    if (e.detail.value) {
      this.setData({ sex: '男' })
    } else {
      this.setData({ sex: '女' })
    }
  },
  onLoad: function (options) {

  },
  //表单
  formSubmit: function (e) {
    wx.request({
      url: '域名信息',
      data: e.detail.value,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        console.log(res);
        if (res.error) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
        } else {
          wx.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 2000
          })
          wx.navigateTo({
            url: "../add/add"
          })
        }
      }
    })
  },