小程序云开发增删改查

学习小程序第一天，踩了不少坑，比如：

1.误把微信公众的appId当作小程序appId用

2.没有设置权限，导致请求成功但是获取不到数据(修改表的权限设置为"所有用户可读,仅创建者及管理员可写")

3.去修改表中不是自己在小程序创建的信息(表中没有openid的数据，也是因为权限的问题，带有openid的是自己的添加的，不是自己创建的数据只读，不允许操作)

接下来展示一下自己做的user列表的增删改查，js代码如下

Page({
  data: {
    users: [],
    curUser: {},
  },
  onLoad: function (options) {
    this.getUser();
  },
  setCurUser: function (e) {
    const { content } = e.currentTarget.dataset
    const { sex } = content;
    this.setData({
      curUser: content
    })
  },
  setValue: function (n, e) {
    const curUser = this.data.curUser;
    const arr = ['name', 'age', 'sex', '_id'];
    const obj = {}
    const setArr = arr.splice(n, 1).join('')
    for (let a of arr) {
      obj[a] = curUser[a]
    }
    obj[setArr] = e.detail.value
    this.setData({
      curUser: obj
    })
  },
  getUname: function (e) {
    this.setValue(0, e)
  },
  getUage: function (e) {
    this.setValue(1, e)
  },
  getUsex: function (e) {
    this.setValue(2, e)
  },
  getUser: function () {// 查询
    const db = wx.cloud.database()
    const that = this;
    db.collection('users').get({
      success: function (res) {
        const { data } = res;
        that.setData({
          users: data
        })
      }
    })
  },
  clearFrom: function () {
    this.getUser()
    this.setData({
      curUser: {}
    })
  },
  adduser: function (e) {// 添加
    const db = wx.cloud.database();
    const that = this;
    db.collection('users').add({
      data: e.detail.value,
      success: function (res) {
        console.log(res)
        that.clearFrom()
      }
    })
  },
  updateuser: function (e) {//修改
    const db = wx.cloud.database();
    const that = this;
    const { _id, name, age, sex } = this.data.curUser
    db.collection('users').doc(_id).update({
      data: {
        name, age, sex
      },
      success: function (res) {
        that.clearFrom()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
  deleteuser: function () {// 删除
    const db = wx.cloud.database();
    const {_id} = this.data.curUser;
    const that = this
    db.collection('users').doc(_id).remove({
      success: function (res) {
        that.clearFrom()
      }
    })
  },
  formReset: function () {
    console.log('form发生了reset事件')
  },
  onReachBottom: function () {
    console.log("Chris's demo")
  },
  onShareAppMessage: function () {
    console.log("Chris's demo")
  }
})

wxml代码如下

<view>
  <form bindsubmit="adduser" bindreset="formReset">
    <view class="section section_gap">
      <view class="section__title">name:</view>
      <input bindchange="getUname" name="name" value="{{curUser.name}}"></input>
    </view>
    <view class="section section_gap">
      <view class="section__title">age:</view>
      <slider bindchange="getUage" name="age" show-value value="{{curUser.age}}"></slider>
    </view>
    <view class="section">
      <view class="section__title">sex:</view>
     <radio-group bindchange="getUsex" name="sex" >
        <label><radio value="1" checked="{{curUser.sex === '1'}}"/>男</label>
        <label><radio value="0" checked="{{curUser.sex === '0'}}"/>女</label>
      </radio-group>
    </view>
    <view class="btn-area">
      <button formType="submit">AddUser</button>
      <button formType="reset">Reset</button>
    </view>
  </form>
  <button bindtap='deleteuser'>deleteuser</button>
  <button bindtap='updateuser'>updateuser</button>
   <view wx:for="{{users}}" wx:key="index" class="user" data-content="{{item}}" bindtap='setCurUser'>
    <view>{{item.name}}</view>
    <view>{{item.age}}</view>
    <view>{{item.sex === '1' ? '男' : '女'}}</view>
  </view>
</view>