微信小程序表单收集数据的方式有哪些？(下)

2023-10-28 22:42:49

前言

在微信小程序项目开发中，离不开数据的增删改查，数据的增加跟编辑离不开表单，我们在上篇已经讨论了微信小程序表单收集数据的 4 种方式：

通过 wx.request 请求接口提交
通过 wx.showModal 弹出确认框提交
通过 wx.showActionSheet 弹出操作菜单提交
通过 wx.navigateTo 跳转到另一个页面提交

这四种方式都有各自的优缺点，大家可以根据自己的实际需求选择合适的方式。当然，除了这四种方式之外，微信小程序中还有其他一些收集表单数据的方式。

通过 `form` 表单提交

form 表单提交是收集表单数据最常见的方式之一。在微信小程序中，可以使用 form 标签来创建表单，然后通过 submit 事件来提交表单数据。

<form bindsubmit="submitForm">
  <input name="name" placeholder="姓名" />
  <input name="phone" placeholder="电话号码" />
  <button type="submit">提交</button>
</form>

Page({
  submitForm(e) {
    const { name, phone } = e.detail.value;
    wx.request({
      url: 'https://example.com/submit-form',
      method: 'POST',
      data: {
        name,
        phone,
      },
      success(res) {
        wx.showToast({
          title: '提交成功',
        });
      },
    });
  },
});

form 表单提交的方式比较简单，但是也有一个缺点，那就是表单数据是通过 HTTP 请求提交的，如果网络环境不好，可能会导致表单提交失败。

通过内嵌 `iframe` 提交

内嵌 iframe 提交也是收集表单数据的一种常见方式。这种方式的原理是将表单数据提交到一个内嵌的 iframe 中，然后由 iframe 中的代码来处理表单数据。

<iframe src="https://example.com/submit-form" name="submit-form"></iframe>

Page({
  onLoad() {
    const iframe = this.selectComponent('#submit-form');
    iframe.postMessage({
      name: '张三',
      phone: '13800000000',
    });
  },
});

内嵌 iframe 提交的方式比较安全，因为表单数据不会通过 HTTP 请求提交，而是通过 postMessage 方法提交的。但是，这种方式也有一个缺点，那就是需要在服务器端做一些额外的处理。

通过 `uniapp` 或 `uni-app` 提交

uniapp 和 uni-app 是两个可以开发跨平台应用的框架。这两个框架都提供了收集表单数据的组件，可以使用这些组件来轻松地收集表单数据。

<template>
  <u-form @submit="submitForm">
    <u-input name="name" placeholder="姓名" />
    <u-input name="phone" placeholder="电话号码" />
    <u-button type="submit">提交</button>
  </u-form>
</template>

<script>
export default {
  methods: {
    submitForm(e) {
      const { name, phone } = e.detail.value;
      wx.request({
        url: 'https://example.com/submit-form',
        method: 'POST',
        data: {
          name,
          phone,
        },
        success(res) {
          wx.showToast({
            title: '提交成功',
          });
        },
      });
    },
  },
};
</script>