文章目录

• 一、新建小程序项目
• 二、进入配置
• 三、简单练习
• • 3.1 添加数据
  • 3.2 获取云数据库数据并展示在页面上

学习笔记：小程序之云开发
推荐学习链接：石头哥 (啊婆主真的超级棒~~~ )

一、新建小程序项目

二、进入配置

详见云开发官方文档：云开发文档链接

• 首先
  进入开发者工具来到下图：进入开通云开发
  
• 继续
  对其配置

配置文件目录，后面的clound，这个名字可以自定义，定义完后，再在左侧建一个相同名字的文件目录。如小图：

• 云开发环境初始化
  可得示例：
  
• 环境ID
  
  app.js
  
  最后 ctr + s 保存即可。
  注意：成功的话，那个文件夹图标会变成一朵云.
  

三、简单练习

3.1 添加数据

先去定义一个表名：

引入数据库：

引入数据库，并指定我们创建好的一个集合(表）：test
collection() 方法。

const db = wx.cloud.database().collection("test")

随便找个页面：(为了好看，我清空了里面的代码)

• wxml 中

<button bindtap="addData" type="primary" >点击添加数据</button>

• js 中

const db = wx.cloud.database().collection("test")
Page({
  //添加数据
  addData(){
    db.add({
      data:{
        name: "华仔",
        age: 18
      },
      success(res){
        console.log("数据添加成功！",res)
      },
      fail(){
        console.log("添加失败",res)
      }
    })
  }
})

编译后，刷新查看：

3.2 获取云数据库数据并展示在页面上

先来到云数据库中查看数据：

现在，我们想把数据从云数据库中获取到，并展示在页面上：效果如下图

wxml 中

<button bindtap="getData">获取数据并展示在页面</button>

<!-- 云数据获取后返回在页面 -->
<view wx:for="{{datalist}}">
  <!-- js中定义一个空的列表datalist -->
  <view>{{item.name}}</view>
  <view>{{item.age}}</view>
</view>

js 中

Page({
  data: {
    datalist: [] /* 与xml中的datalist对应 */
  },

```//获取云数据库数据方法
 getData() {
   let that = this 
   wx.cloud.database().collection("test").get({
     success(res) {
       console.log("请求成功",res)
       that.setData({
         datalist:res.data
       })
     },
     fail(res){
      console.log("请求失败",res)
     }
   })
 }
 
})

学习中…未完待续~~~