微信小程序：云开发实现表单提交，让数据录入更简单

2023-10-08 00:53:23

在微信小程序中，用户填写表单是常见的场景，开发者需要将表单数据提交到后端数据库。传统的方式是通过小程序云函数来实现，但这种方式需要开发者自己编写后端代码，维护成本较高。

微信云开发提供了更便捷的表单提交方式，无需编写后端代码，开发者只需在小程序端配置即可。本文将详细介绍如何使用微信云开发实现表单提交。

实现思路

引入云开发 SDK

在小程序代码中引入云开发 SDK：

const cloud = require('wx-server-sdk')

初始化云开发环境

初始化云开发环境：

cloud.init({
  env: 'YOUR_ENV_ID', // 你的云开发环境 ID
})

在小程序端绑定表单提交函数

在小程序端的 WXML 文件中，为表单绑定 submit 事件：

<form bindsubmit="addData">
  <!-- 表单内容 -->
</form>

在 JavaScript 中编写表单提交函数

在小程序端的 JavaScript 文件中，编写表单提交函数：

// 提交表单
addData: function(e) {
  // 获取表单数据
  const data = e.detail.value

  // 连接数据库
  const db = cloud.database()
  const collection = db.collection('YOUR_COLLECTION_NAME') // 你的集合名称

  // 将数据添加到数据库
  collection.add({
    data: data,
    success: function(res) {
      // 成功提示
      wx.showToast({
        title: '提交成功',
      })
    },
    fail: function(err) {
      // 失败提示
      wx.showToast({
        title: '提交失败',
      })
    }
  })
}