小程序云开发入门demo

一、前提准备

1. 打开微信web开发者工具；
2. 创建一个项目，选择云开发；
3. 点击与模拟器、编辑器和编译器并排的云开发，打开云开发控制台；
4. 第一次需要点击开通，开通之后创建一个环境；
5. 选择cloudfunctions文件夹，右击选择更多设置，然后选择环境；
6. 选择cloudfunctions下的login文件夹；
7. 右击选择上传并部署：云端安装依赖(不上传node_moudules)；
8. 在云开发控制台的数据库中创建一个test集合；
9. miniprogram/pages/目录下创建一个main目录；
10. 在main目录下创建一个main Page；

二、进入开发

1. 将main作为主页

在miniprogram/pages/app.json中，将"pages/main/main"移动到最前面。

{
  "pages": [
    "pages/main/main",
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib",
    "pages/openapi/openapi"
  ],
...

2. main.wxml页面布局

<view>
  <input style='margin-top: 40rpx;' placeholder="请输入姓名" value="{{name}}" bindinput="bindKeyInputName" />
  <input style='margin-top: 40rpx;' placeholder="请输入年龄" value="{{age}}" bindinput="bindKeyInputAge" />
  <button style='margin-top: 40rpx;' bindtap='insertData'>插入数据</button>
  <input style='margin-top: 40rpx;' placeholder="请输入记录ID" value="{{recordId}}" bindinput="bindKeyInputId" />

  <button style='margin-top: 40rpx;' bindtap='queryData'>查询数据</button>

  <text style='margin-top: 40rpx;'>
     姓名：{{nameResult}}
  </text>
  <text style='margin-top: 80rpx;'>
     年龄：{{ageResult}}
  </text>
</view>

3. main.js处理业务逻辑

// miniprogram/pages/main/main.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  db: undefined,
  test: undefined,
  data: {
    name: '',
    age: '',
    recordId: '',
    nameResult: '',
    ageResult: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    //  调用login云函数获取openid
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.cloud.init({ env: 'yale' })
        that.db = wx.cloud.database()
        that.test = that.db.collection('test')
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })

  },
  // 单击“插入数据”按钮调用该函数
  insertData: function () {
    var that = this
    try {
      //  将年龄转换为整数类型值
      var age = parseInt(that.data.age)
      //  如果输入的年龄不是数字，会显示错误对话框，并退出该函数
      if (isNaN(age)) {
        //  显示错误对话框
        wx.showModal({
          title: '错误',
          content: '请输入正确的年龄',
          showCancel: false
        })
        return
      }
      //  向test数据集添加记录
      this.test.add({
        // data 字段表示需新增的 JSON 数据
        data: {
          name: that.data.name,
          age: age
        },
        //  数据插入成功，调用该函数
        success: function (res) {
          console.log(res)
          wx.showModal({
            title: '成功',
            content: '成功插入记录',
            showCancel: false
          })
          that.setData({
            name: '',
            age: ''
          })
        }
      })
    }
    catch (e) {
      wx.showModal({
        title: '错误',
        content: e.message,
        showCancel: false
      })

    }
  },
  //  单击“查询数据”按钮执行该函数
  queryData: function () {
    var that = this
    //  根据记录ID搜索数据集  
    this.db.collection('test').doc(this.data.recordId).get({
      // 找到记录集调用
      success: function (res) {
        //  将查询结果显示在页面上  
        that.setData({
          nameResult: res.data.name,
          ageResult: res.data.age
        })

      },
      //  未查到数据时调用
      fail: function (res) {
        wx.showModal({
          title: '错误',
          content: '没有找到记录',
          showCancel: false
        })
      }
    })

  },
  //  下面的函数用于当更新input组件中的值时同时更新对应变量的值
  bindKeyInputName: function (e) {
    this.setData({
      name: e.detail.value
    })
  },
  bindKeyInputAge: function (e) {
    this.setData({
      age: e.detail.value
    })
  },
  bindKeyInputId: function (e) {
    this.setData({
      recordId: e.detail.value
    })
  },

})

4. 测试

1. 在主页面输入姓名和年龄，点击插入数据，然后在云控制平台中可查看刚在添加的数据；

2. 从云控制平台复制那条数据的id过来，粘贴到查询数据按钮上的输入框中，再点击查询按钮，即可在下方显示从云数据库中查出的数据。