[猫头虎分享21天微信小程序基础入门教程]第6天：与服务器进行数据交互

猫头虎

发布于 2024-05-24 12:30:49

490

发布于 2024-05-24 12:30:49

文章被收录于专栏：用户11053981的专栏

[猫头虎分享21天微信小程序基础入门教程]第6天：与服务器进行数据交互

第6天：与服务器进行数据交互 🌐

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们将继续微信小程序的学习，重点了解如何与服务器进行数据交互。数据交互是小程序中非常重要的一部分，它让我们可以获取远程数据并与后台服务器进行通信。🚀

HTTP 请求基础 📡

微信小程序提供了 wx.request 接口，用于发送 HTTP 请求。通过这个接口，我们可以向服务器发送数据请求并获取响应数据。

基本结构

wx.request({
  url: 'https://example.com/api', // 请求的URL
  method: 'GET', // 请求方法
  data: {}, // 发送的数据
  header: {}, // 设置请求的 header
  success(res) {
    // 成功回调
    console.log(res.data);
  },
  fail(err) {
    // 失败回调
    console.error(err);
  }
});

示例：获取数据

假设我们有一个接口可以获取用户列表，我们可以通过以下代码获取数据并显示在小程序中。

页面结构 (WXML)

<view class="container">
  <view wx:for="{{users}}" wx:key="id" class="user">
    <text>{{item.name}}</text>
  </view>
</view>

页面样式 (WXSS)

.container {
  padding: 20px;
}
.user {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

页面逻辑 (JS)

Page({
  data: {
    users: []
  },
  onLoad() {
    this.fetchUsers();
  },
  fetchUsers() {
    wx.request({
      url: 'https://example.com/api/users',
      method: 'GET',
      success: (res) => {
        this.setData({
          users: res.data
        });
      },
      fail: (err) => {
        console.error(err);
      }
    });
  }
});

数据提交 📨

除了获取数据，我们还可以向服务器提交数据，比如表单提交。我们可以使用POST方法实现。

示例：提交数据

假设我们有一个用户注册表单，需要将用户输入的数据提交到服务器。

页面结构 (WXML)

<view class="container">
  <input placeholder="姓名" bindinput="handleInput" data-field="name"/>
  <input placeholder="邮箱" bindinput="handleInput" data-field="email"/>
  <button bindtap="submitForm">提交</button>
</view>

页面样式 (WXSS)

.container {
  padding: 20px;
}
input {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
button {
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
}

页面逻辑 (JS)

Page({
  data: {
    formData: {
      name: '',
      email: ''
    }
  },
  handleInput(e) {
    const field = e.currentTarget.dataset.field;
    this.setData({
      [`formData.${field}`]: e.detail.value
    });
  },
  submitForm() {
    wx.request({
      url: 'https://example.com/api/register',
      method: 'POST',
      data: this.data.formData,
      success: (res) => {
        console.log('注册成功', res.data);
      },
      fail: (err) => {
        console.error('注册失败', err);
      }
    });
  }
});

小测试 🧪

尝试创建一个简单的表单，并将数据提交到服务器。观察成功和失败的不同反馈。

今日学习总结 📚

概念	详细内容
HTTP 请求	学习了如何使用 wx.request 进行数据请求
获取数据	通过示例了解了如何从服务器获取数据
提交数据	通过示例学习了如何向服务器提交数据