微信小程序：云开发实现表单提交

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

实现思路

在前端绑定一个函数 addData，然后在js中写这个函数，但需要先连接数据库。具体代码如下：

addData(){
   db.collection("demolist").add({
     data:{
       title:"测试标题",
       author:"张三",
       content:"测试内容部分测试内容部分测试内容部分"
     }
   })
 },

为了更好的用户体验，可以在表单提交成功之后增加一个提示，这个在函数后增加一个then函数。可以加一个showloading函数，让用户无法重复点击
记得在回调成功之后hideloading\，设置 mask:true 使用户此时无法点击。具体代码如下：

addData(){
   wx.showLoading({
     title: '数据加载中',
     mask:true
   })
   db.collection("demolist").add({
     data:{
       title:"测试标题2",
       author:"李四",
       content:"aaaaaaaaaaa"
     }
   }).then(res=>{
     console.log(res);
     wx.hideLoading()
   })
 },

实现完整的表单提交功能

wxml页面写一个form表单 绑定事件btnSub
给提交按钮一个属性 form-type=“submit” （代表提交）

name 唯一属性 传值时根据name传递

wxml 代码

<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>
</form>

js 代码

btnSub(res){
   // 表单提交
   wx.showLoading({
     title: '数据加载中',
     mask:true
   })
   //老方法获取所有值
   // var title=res.detail.value.title;
   // var author=res.detail.value.author;
   // var content=res.detail.value.content;

   //es6结构方法获取所有值（简易，推荐使用）
   var {title,author,content}=res.detail.value;
   var resVlu=res.detail.value;
   db.collection("demolist").add({
     data:resVlu
     // data:{ // 老方法赋值
     //   title:title,
     //   author:author,
     //   content:content
     // }
   }).then(res=>{
     console.log(res)
     wx.showToast({
        title: '提交成功',
        icon: 'none',
        duration: 1500
      })
     wx.hideLoading()
   })
 },