I. premise preparation

1. Open wechat web developer tool;
2. Create a project and select cloud development;
3. Click cloud development side by side with simulator, editor and compiler to open cloud development console;
4. Click to open for the first time, and create an environment after opening;
5. Select the cloudfunctions folder, right-click to select more settings, and then select environment;
6. Select the login folder under cloudfunctions;
7. Right click to select upload and deployment: cloud installation dependency (do not upload node "moudules);
8. Create a test set in the database of the cloud development console;
9. Create a main directory under miniprogram / pages /;
10. Create a main Page in the main directory;

II. Entering development

1. Use main as home page

In miniprogram/pages/app.json, move "pages/main/main" to the front.

{
  "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"
  ],
...

1. main.wxml page layout

<view>
  <input style='margin-top: 40rpx;' placeholder="Please enter a name" value="{{name}}" bindinput="bindKeyInputName" />
  <input style='margin-top: 40rpx;' placeholder="Please enter age" value="{{age}}" bindinput="bindKeyInputAge" />
  <button style='margin-top: 40rpx;' bindtap='insertData'>insert data</button>
  <input style='margin-top: 40rpx;' placeholder="Please enter a record ID" value="{{recordId}}" bindinput="bindKeyInputId" />

  <button style='margin-top: 40rpx;' bindtap='queryData'>Query data</button>

  <text style='margin-top: 40rpx;'>
     //Name: {{nameResult}}
  </text>
  <text style='margin-top: 80rpx;'>
     //Age: {{ageResult}}
  </text>
</view>

1. main.js processing business logic

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

  /**
   * Initial data of the page
   */
  db: undefined,
  test: undefined,
  data: {
    name: '',
    age: '',
    recordId: '',
    nameResult: '',
    ageResult: ''
  },

  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
    var that = this
    //  Call login cloud function to get openid
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[Cloud function] [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('[Cloud function] [login] Call failed', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })

  },
  // Click the insert data button to call the function
  insertData: function () {
    var that = this
    try {
      //  Convert age to integer type value
      var age = parseInt(that.data.age)
      //  If the age entered is not a number, an error dialog box is displayed and the function exits
      if (isNaN(age)) {
        //  Show error dialog
        wx.showModal({
          title: 'error',
          content: 'Please enter the correct age',
          showCancel: false
        })
        return
      }
      //  Add records to the test data set
      this.test.add({
        // The data field indicates the JSON data to be added
        data: {
          name: that.data.name,
          age: age
        },
        //  Data inserted successfully, call this function
        success: function (res) {
          console.log(res)
          wx.showModal({
            title: 'Success',
            content: 'Record inserted successfully',
            showCancel: false
          })
          that.setData({
            name: '',
            age: ''
          })
        }
      })
    }
    catch (e) {
      wx.showModal({
        title: 'error',
        content: e.message,
        showCancel: false
      })

    }
  },
  //  Click the query data button to execute the function
  queryData: function () {
    var that = this
    //  Search data set based on record ID  
    this.db.collection('test').doc(this.data.recordId).get({
      // Recordset call found
      success: function (res) {
        //  Display query results on the page  
        that.setData({
          nameResult: res.data.name,
          ageResult: res.data.age
        })

      },
      //  Called when no data is found
      fail: function (res) {
        wx.showModal({
          title: 'error',
          content: 'record was not found',
          showCancel: false
        })
      }
    })

  },
  //  The following function is used to update the value of the corresponding variable when updating the value in the input component
  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
    })
  },

})

1. test

1. Enter the name and age on the main page, click insert data, and then view the data just added in the cloud control platform;

2. Copy the id of the data from the cloud control platform, paste it into the input box on the query data button, and then click the query button to display the data found in the cloud database below.