微信小程序云开发 # 1 云数据库

腾讯云为微信小程序提供了云开发服务（基于nodejs或者php）
可以免费创建2个环境，但是创建之后不能删除

---

1. 需要先在app.js里配置云环境

//app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: 'xxxx',//环境id
        traceUser: true,
      })
    }
    this.globalData = {}
  }
})

2. 导入数据

手工导入很傻瓜化。批量导入有点细节需要注意：
云开发的数据库导入格式 （有点奇怪，没有[]以及不需要,隔开，导出也是）

3. 云数据库的CRUD操作

3.1 前端调用数据库实现轮播页

写在onLoad里

// 获取默认环境的数据库的引用
    const db = wx.cloud.database();
    const banner = db.collection('tables');
	//es5写法    
/*	banner.get({
		success(res){console.log(res);}
		fail(err){console.log(err);}
	})	*/
    //es6的写法
    banner.get().then(res=>{
      console.log(res)
      this.setData({
        banner: res.data
      })
    }).catch(err=>{
      console.log(err);
    })

对应的前端代码:

<!--miniprogram/pages/index/index.wxml-->
<swiper class="swiper" indicator-dots autoplay interval="3000" duration="1000">
  <block wx:for="{{banner}}" wx:key="*this">
    <swiper-item id="{{item.id}}">
      <image src="{{item.image}}" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>

/* miniprogram/pages/index/index.wxss */
.swiper{
  height: 400rpx;
  width: 100%;
}
.swiper image{
  height: 400rpx;
  width: 100%;
}

3.2 增删查改 CRUD

Retrieve

this.data.db = wx.cloud.database();
this.data.banner = this.data.db.collection('tables');
this.data.banner.where({
  name: '战狼'
}).get().then(res=>{
  console.log(res)
}).catch(err=>console.log(err))

Create

this.data.banner.add({
      data:{
      add_time: "2018-10-20",
      id: 4,
      image: "http://www.baidu.com",
      index: 3,
      name: "赌神"
      }
    }).then(res => {
      console.log(res)
    }).catch(err => console.log(err));

Update (For More Details link~
局部更新

const banner = this.data.banner;
banner.doc("3a573aaa5e7daf4e00131c9558878b09").update({
  data:{
    name:'西游记'
  }
}).then(res=>{
  console.log(res);
}).catch(err => console.log(err));

替换更新
上面的update换成set，没有赋值的字段会被舍弃。

Delete

deleteData:function() {
 const banner = this.data.banner;
  banner.doc("3a573aaa5e7daf4e00131c9558878b09").remove({})
    .then(res=>console.log(res))
    .catch(err=>console.log(err));
}

3.3 表单提交

<form bindsubmit="formSubmit">
  <view>
    <text>您的姓名</text>
    <input type="text" placeholder="请输入姓名" bindinput="nameInput"></input>
  </view>
  <view>
    <text>您的年龄</text>
    <input type="number" placeholder="请输入年龄" bindinput="ageInput"></input>
  </view>
  <view>
    <text>您的性别</text>
    <radio-group class="radio-group" bindchange="genderChange">
        <radio class="radio" wx:for-items="{{items}}" wx:key="*this" value="{{item.value}}" checked="{{item.checked}}">
            <text>{{item.value}}</text>
        </radio>
    </radio-group>
  </view>
  <button form-type="submit" type="primary">提交</button>
</form>

// miniprogram/pages/index/index.js
Page({
  data: {
    items: [
      { value: '男' ,checked: true },
      { value: '女' }
    ],
    name:'',
    age:'',
    gender:'男'
  },
  onLoad: function (options) {
  },
  nameInput:function(e){
    this.data.name = e.detail.value;
  },
  ageInput:function(e){
    this.data.age = e.detail.value;
  },
  genderChange:function(e){
    this.data.gender = e.detail.value;
  },
  formSubmit:function(e){
    const db = wx.cloud.database();
    const users = db.collection('users');
    if(!this.data.name||!this.data.age){
      wx.showModal({
        title: '提交失败',
        content: '您的表单填写不完整',
        showCancel: false
      })
      return
    }
    users.add({
      data:{
        name:this.data.name,
        age:this.data.age,
        gender:this.data.gender
      }
    }).then(res => {
      console.log(res)
    }).catch(err => console.log(err));
  }
})

---

Reference

1. https://ke.qq.com/course/463358
2. https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html

转载：https://blog.csdn.net/qq_33583069/article/details/105140582