微信小程序云开发(篇一)

文章目录

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

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

一、新建小程序项目

微信小程序云开发(篇一)_第1张图片

二、进入配置

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

  • 首先
    进入开发者工具来到下图:进入开通云开发
    微信小程序云开发(篇一)_第2张图片
  • 继续
    对其配置

配置文件目录,后面的clound,这个名字可以自定义,定义完后,再在左侧建一个相同名字的文件目录。如小图:
微信小程序云开发(篇一)_第3张图片

  • 云开发环境初始化
    可得示例:
    微信小程序云开发(篇一)_第4张图片
  • 环境ID
    微信小程序云开发(篇一)_第5张图片
    app.js
    微信小程序云开发(篇一)_第6张图片
    最后 ctr + s 保存即可。
    注意:成功的话,那个文件夹图标会变成一朵云.
    微信小程序云开发(篇一)_第7张图片

三、简单练习

3.1 添加数据

先去定义一个表名:
微信小程序云开发(篇一)_第8张图片
引入数据库:
微信小程序云开发(篇一)_第9张图片
引入数据库,并指定我们创建好的一个集合(表):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)
      }
    })
  }
})

编译后,刷新查看:
微信小程序云开发(篇一)_第10张图片

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

先来到云数据库中查看数据:
微信小程序云开发(篇一)_第11张图片
现在,我们想把数据从云数据库中获取到,并展示在页面上:效果如下图
在这里插入图片描述
wxml

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


<view wx:for="{{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)
     }
   })
 }
 
})

学习中…未完待续~~~

你可能感兴趣的