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

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

自我介绍

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

HTTP 请求基础 📡

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

基本结构

wx.request({url: 'https://example.com/api', // 请求的URLmethod: 'GET', // 请求方法data: {}, // 发送的数据header: {}, // 设置请求的 headersuccess(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 进行数据请求
获取数据	通过示例了解了如何从服务器获取数据
提交数据	通过示例学习了如何向服务器提交数据

结语

通过今天的学习，你应该掌握了如何在微信小程序中与服务器进行数据交互。这是实现动态数据和功能的关键步骤。明天我们将探讨小程序的权限与API使用。如果你有任何疑问，欢迎关注并留言在我的公众号猫头虎技术团队。📩

---