微信小程序项目实战：如何提交表单数据到云数据库

微信小程序如何提交表单数据到数据库

1、先在wxml里面写一个表单，在form里面添加bindsubmit的属性，下面再添加两个button，在button里面添加属性form-type，form-type有两种取值：submit、reset

<form bindsubmit="btnSub">
  <input name="title" placeholder="请输入标题"></input>
  <input name="author" placeholder="请输入作者"></input>
  <textarea name="content" placeholder="请输入内容"></textarea>
  <button type="primary" form-type="submit">提交</button>
  <button type="default" form-type="reset">重置</button>
</form>

2、在wxss里面对表单进行简单的渲染

input{ border: 1px solid grey;}
textarea{ border: 1px solid grey;}

3、在js中写方法，使用db.collection(“datalist”).add({ })向云数据库中添加数据

  btnSub(res){
    wx.showLoading({
      title: '数据提交中......',
    })
    var {title,author,content}=res.detail.value;
    //var resVlu=res.detail.value
    console.log(title,author,content)
    db.collection("demolist").add({
      data:{
        title:title,
        authot:author,
        content:content
      } 
    }).then(res=>{
      console.log(res)
      wx.hideLoading({
        success: (res) => {},
      })
    })
  }

注：
这里使用到了ES6中的解构函数来获取表单的数据，再添加到云数据库中。
var{title,author,content}=res.detail.value;

如不使用解构函数则可以一个一个值获取：
var title=res.detail.value.title;
var author=res.detail.value.author;
var content=res.detail.value.content;

另外这里还有一种方法，将res.detail.value返回的结果作为对象直接传入data：

var resVlu=res.detail.value
db.collection(“datalist”).add({
data:resVlu
}).then(res=>{
console.log(res)
})