微信小程序之云函数增删改查（一）

用云函数向数据库增加数据

最近，我在用小程序做毕业设计。在用云函数对数据库进行增删改查的时候，踩了很多坑。为避免更多的人踩坑，跟大家分享一下。

增加数据

众所周知，提交数据需要用到form表单，否则是没办法获得数据的。二话不说，先上代码

<form bindsubmit='getForm'>
  <van-cell-group>
      <van-field
        required
        clearable
        label="姓名"
        placeholder="请输入你的真实名字"
        bind:click-icon="onClickIcon"
        name="username"
    />

  
 <radio-group bindchange="radiochange">
    <van-cell title="女" required>
      <radio value='女'data-gender="女" color="#5FB592" ></radio>
    </van-cell>

    <van-cell title="男" required>
      <radio value='男' data-gender="男" color="#5FB592"></radio>
    </van-cell>
    
 </radio-group>

<button size="large" formType="submit" class="subBtn" >提交</button>

</van-cell-group>
</form>

上面代码可以用来获取用户名字和性别，可能有人会疑问van-cell-group、van-cell 这些是什么东西？

这些是小程序UI组件库里面提供的组件，非常好用，感兴趣的朋友点击下方链接

Vant Weapp -轻量、可靠的小程序UI组件库

form表单绑定了一个getForm方法，

在page里面定义变量
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: null,
    gender:"",
  },
})

getForm:function(e){
 console.log(e.detail.value)
 //表单里的值都存储在e.detail.value里面
  }
  
  然后用this.setData({
	username:e.detail.value.username,
	//因为性别点击的时候就已经存储起来了，就不用再赋值了
}) 

重点来了！！！！！云函数

新建一个云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('users').add({
    data: {
      username: event.username,
      gender: event.gender,
    }
  })
}

users是数据库的一个集合，也就是一张表，username和gender是里面的字段，event.username和event.gender是从页面传来的值，保存在event对象中

JS中调用云函数

 wx.cloud.callFunction({
      name: "addUser", //云函数的名字
      data: {
        username: that.data.username,
        gender: that.data.gender,
      },
      complete: res => {
      }
    })

**这里有一个小坑，为什么有个that呢？原因是因为你现在是在 wx.cloud.callFunction这里方法里面，用this的话，是指这里方法，而不是getForm这个方法。所以呢，先用that把this存储起来 **

附上JS完整代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: null,
    gender:"",
  },
  
  getForm:function(e){
  const that=this;
 console.log(e.detail.value)
 //表单里的值都存储在e.detail.value里面
   this.setData({
	username:e.detail.value.username,
	//因为性别点击的时候就已经存储起来了，就不用再赋值了
	}) 
	wx.cloud.callFunction({
      name: "addUser", //云函数的名字
      data: {
        username: that.data.username,
        gender: that.data.gender,
        //这里的username和gender，与云函数中event.username和event.gender 要一致
      },
      complete: res => {
      }
    })

}
})

数据库的添加到这里就结束啦，有用的话给我点个赞吧