7天入门小程序开发 | 05-表单处理让小程序动起来，自带组件让页面更丰富

在前面的课程中已经能够对数据库插入静态数据并且进行查询，可实际上小程序中需要用户自己编辑和插入数据，那么今天我们来学习下小程序的表单部分，并且还会在最后扩展介绍下小程序自带的组件，能够填充页面样式，有更好的体验。

1. 小程序表单

新增信息，比如“小程序开发课程”中新增加一节课，需要有个新增信息的页面，并在JS中将数据保存到数据库。

我们先看下表单中的内容，除了页面标题，主要信息是三个input输入框和一个下拉选择框，最后是提交按钮。

<!--pages/learning/create.wxml-->
<view class="page-title">
  添加信息
</view>


<view class="create-body">
    <view class="content">
        <input type="text" name="courseID" class="input" placeholder="课程序号" bindinput="bindInputCourseID"/>
        <input type="text" name="title" class="input" placeholder="标题" bindinput="bindInputTitle"/>
        <input type="text" name="link" class="input" placeholder="课程链接" bindinput="bindInputLink" />
    </view>
    <view class="select">
        <picker bindchange="bindChange" value="{{statusIndex}}" range="{{statusValue}}">
            <view class="picker">
            课程状态：{{statusValue[statusIndex]}}
            </view>
        </picker>
    </view>


    <button class="submit" type="primary" bindtap="submitForm">提交</button>
</view>

对应的create.wxss文件如下：

/* pages/learning/create.wxss */


.create-body {
    width: 90%;
    margin: 40px auto;
}


.page-title {
    font-size: 20px;
    color: #FFFFFF;
    padding: 20px 4% 40px 4%;
    width: 92%;
    background-color:coral;
}


.input, .select {
    border: 1px solid #CCCCCC;
    margin: 10px ;
    padding: 4px 8px;
    font-size: 14px;
    color: #FF8800;
}

2. 小表单前后端绑定

在小程序JS文件中先定义数据格式，我们先看前面三个字段，分别是课程编号、课程名称、课程链接。

<!-- pages/learning/create.js -->
data: {
  courseID: "",
  title: "",
  link:""
},

前端页面编辑修改数据后，需要在JS中及时获取变化，就是通过bindinput来进行绑定，三个字段我们分开绑定了不同的函数，比如bindInputCourseID来监听课程编号的修改，并且保存到上面的data中。读取data中的数据可以使用this.data.courseID，设置data中的数据可以用this.setData()来处理。

<!-- pages/learning/create.js -->
bindInputCourseID: function (e) {
  this.setData({
    courseID: e.detail.value
  })
},


bindInputTitle: function (e) {
  console.log(e.detail.value);
  this.setData({
    title: e.detail.value
  })
},


bindInputLink: function (e) {
  this.setData({
    link: e.detail.value
  })
},

还有第四个字段是下拉框的选择，我们先不看多级下拉框，只看一级的，也就是只有一列数据。先在data中定义可选值，使用statusValue: ["已上线","未上线","已下线"]来定义。除此之外，我们还要记录当前用户的选择是哪个值，使用statusIndex来记录，默认值就是下面代码中的0，第0个元素，对应“已上线”（如何对应在后面介绍）。

<!-- pages/learning/create.js -->
data: {
  statusValue: ["已上线","未上线","已下线"],
  statusIndex: 0
},

下拉框前端页面变更也需要JS后端及时获取感知，将选取的序号值保存到statusIndex中。

<!-- pages/learning/create.js -->
bindChange(e) {
  this.setData({
    statusIndex: e.detail.value
  })
},

3. 添加到数据库并进行查询

在create.wxml页面中有“提交”的按钮，和后端create.js进行关联的是其中的bindtap="submitForm"。

在JS中初始化数据库实例，添加数据的语法和之前一样，不过这里添加的数据不再是之前静态的，变成了前端页面中的动态数据，也就是用户编辑填写了哪些信息就会提交哪些数据。

注意，课程状态是下拉框选择项，在这里提交到数据库的可以是statusIndex，只是一个对应数字，在显示的时候从this.data.statusValue[this.data.statusIndex]进行获取。下面代码中是直接存储的值，也就是“已上线”、“未上线”、“已下线”中的一个。

数据提交完成后，通过wx.showToast给前端进行提示。（注意，这里并没有根据去检查数据库提交是否成功，直接给前端返回了操作成功的提示。）

submitForm() {
  wx.cloud.init();
  const db = wx.cloud.database();


  db.collection('learning').add({
    data: {
      "id": this.data.courseID,
      "title": this.data.title,
      "link": this.data.link,
      "status": this.data.statusValue[this.data.statusIndex]
    }
  });


  wx.showToast({
    title: '操作成功',
    icon: 'success'
  })
},

添加成功后再去云开发-数据库控制台查看最新的数据库记录，可以看到刚刚添加的数据。是否还记得在index.js中查询数据库的操作，回顾下之前的代码：

getCourseList: function () {
  wx.cloud.init();
  const db = wx.cloud.database();


  var that = this;
  db.collection('learning').orderBy("id","asc").get({
    success: function(res) {
      // res.data 包含该记录的数据
      console.log(res)
      that.setData({
        courseList: res.data
      });
    }
  });
},

查询到数据后在index.wxml中通过wx:for来循环输出，这个和之前是一样的。现在已经可以实现用户动态添加数据、保存到数据库，并且能够动态显示真实数据了。