小程序的云开发适用于小项目，大项目需要前后端分离的。因为刚刚那个小程序我看到了超过了最大字了所以提交一下看看没想到真的

适用于小项目，大项目需要前后端分离的。因为刚刚那个小程序我看到了超过了最大字了所以提交一下看看没想到真的提交上去了，这里进行补充说明

注册一个新的项目

存储

在这里存储的图片在外面都可以访问到

数据库

先创建数据库

添加数据，但是只能一条一条添加。这里ID可以自动生成，也可以自己定义的。

这里适合批量添加的，把对象复制粘贴上去就可以了

这两种方法还是太麻烦了，微信还提供了导入和导出的功能。但是和我们 JavaScript里面的 Json 是不一样的，导出之后在 vs code 打开

发现是报错的，那我们要导入就需要安装微信的格式。

一行一个对象这样的格式存放在json里面

操作数据库

这里是通过代码来操作微信的数据库的，点击选择对应的模板

增

// db  数据库对象   collection  集合
// test  是数据库名字，要操作的数据库
db.collection('sales')
// .add   是方法名字
  .add({
    data: [
        添加多个是数组方式
      {
        name:'悟空',
        age: 502,
        gender:'男'
      },
      {
        name:'八戒',
        age:100,
        gender:'男'
      }
    ]
  })


添加单个，是 用户最常用的
db.collection('LW')
  .add({
    data: [ 
    {
      // 如果要设置ID，数据库里面  _id  后面的值是字符串来的
      "_id":'111',
      name:'111',
    }
    ]
  })

删后面操作和前面是一样的

// doc  后面跟着是ID
db.collection('sales').doc('8f75309d62bd6beb0b1d342a0e8ccdb7')
  .remove()

改有两种

1、覆盖就是把你之前的覆盖了。

2、局部修改，修改匹配属性名对应的属性值。

修改
// 这里doc和删除是一样的  跟着的是  Id   
db.collection('sales').doc('058dfefe62bd904d0b6a428d7af4b548')
  .update({
    data: {
      name:'苏萨斯的召唤'
    }
  })


覆盖
// 这里也是doc后面是ID
db.collection('sales').doc('058dfefe62bd904d0b6a428d7af4b548').set({
  data: {
name:''
  }
})

查

db.collection('sales')
// where   条件
  .where({
    // gt: great then  大于
    // lt: less  then  小于
    age: _.gt(100)
  })
  .get()

上面都没有就返回全部
db.collection('sales') .get()

前端调用

先删除这些没用的，不要影响到我们。

🎯 1. 初始化云开发环境

调用云函数、数据库、存储、云托管等 API 时，都需要指定所需访问的云环境 ID，意即指定访问哪个环境下的云函数/数据库/存储/云托管/...资源。有两种方式进行指定：

使用默认实例 wx.cloud：在使用默认实例调用 API 时，各个 API 都支持传入 env 用于指定所需访问的云环境 ID，如果 API 中不传，则使用 wx.cloud.init 时传入的 env。
为各个环境使用单独的实例：使用 new wx.cloud.Cloud API 为新建一个专用于访问某个环境的实例，在该实例上进行的 API 调用都只会访问该环境。这里的开发环境对应的是下面的图片我们可以设置开发的和上线的

字段	数据类型	必填	默认值	说明
env	string	是		必填，环境ID，指定接下来调用 API 时访问哪个环境的云资源
traceUser	boolean	否	true	是否在将用户访问记录到用户管理中，在控制台中可见

wx.cloud.init({
  env: 'test-x1dzi',
  traceUser: true,
})

二、新建实例 new wx.cloud.Cloud

使用 new wx.cloud.Cloud 新建 Cloud 实例时需要指定云环境 ID，方法定义如下

const db = wx.cloud.database()

在新建完成实例后，必须先调用初始化方法 init 一次（只需一次，多次调用时只有第一次生效）。

这里是要传入参数的，但是我们实例化时候就传入参数了。这里可以不用传入参数了。

这里的返回值就是我们操作的数据库实体了，我们在上去代码操作数据库都需要一个 db 就是数据库实体，有这个实体，我们前端就可以直接操作数据库了

Page({
  data:{
list:[]
  },
  onLoad(){
this.getHero()
  },
 async getHero(){
 const res =  await db.collection('sales') .get()
 console.log(res);
  }
})

这里返回值什么都没有是因为权限问题，因为默认权限是创建的人才能访问的。

修改完了之后就可以接收数据了

然后拿着数据wx:for 遍历出来

wx小程序和vue不同：

1、wx:for 里面key 没有ID是 *this

2、绑定事件是bind开头的 data是对象，没有 return 只有函数才要return的、

3、函数直接写在 Page 函数里面对象里面的，不用写在 methods 里面的

4、小程序里面函数不能传参数的，只能通过自定义属性来传参数

5、在小程序的HTML里面是变量就需要 {{}}

6、修改data里面的值，是需要通过 setDate 方法里面传入对象修改的

7、获取data里面的属性，通过 this.data.list 才能获取

删除功能：

wx.showToast

显示消息提示框

title	string		是	提示的内容
	icon	string	success	否	图标

const res =  await db.collection('sales') .get()
 this.setData({
  list:res.data
 })
 
<view wx:for="{{list}}" wx:key="*this">
<text>{{item.name || item.city}}</text>  <button bindtap="btnCal" data-id="{{item._id}}">删除</button>
</view>

js   这里删除是真的删除wx 数据库里面的数据的
btnCal(e){
   const {id}= e.target.dataset
    db.collection('sales').doc(id).remove()
    this.getHero()
    wx.showToast({
      title: '成功',
      duration: 2000
    })
  }

添加功能：

<button bindtap="btnAdd"> 添加</button>

btnAdd(){
db.collection('sales').add({
    data: 
      {
        name:'悟空',
        age: 502,
        gender:'男'
      } 
  })
  this.getHero()
    wx.showToast({
      title: '成功',
      duration: 2000
    })
  }

小程序的云开发

存储

数据库