微信小程序教程：使用wx.request获取豆瓣电影数据

"Runlin微信小程序系列教程一：从零开始写一个demo的下部分，讲解如何使用微信小程序的wx.request API获取豆瓣电影接口的数据。" 在微信小程序开发中，网络请求是实现动态数据加载的关键步骤。本教程的下篇重点讲述了如何通过微信小程序的`wx.request` API获取真实数据，以替代之前的模拟数据。`wx.request` 是小程序内置的网络请求函数，用于与服务器进行数据交互。在本教程中，开发者将学习如何使用该API从豆瓣电影接口获取电影排行榜数据。 首先，`wx.request` 接口接收一个OBJECT对象作为参数，其中包含多个属性，如： 1. `url`：请求的地址，这是必不可少的，用于指定要请求的服务器接口。例如，获取豆瓣电影Top250的接口URL为：`https://api.douban.com/v2/movie/top250`。 2. `data`：携带的数据，通常以JSON格式发送到服务器，本例中不需要携带额外数据，所以可以留空。 3. `method`：请求方式，默认为GET，也可以设置为POST、PUT等其他HTTP请求方法。 4. `success`：请求成功的回调函数。当服务器返回数据且请求状态码（statusCode）为200时，此函数会被调用。在回调函数中，我们需要处理返回的数据并更新小程序的数据层（data）以触发界面的更新。 在教程中，作者首先清除了之前用于模拟数据的变量，如`movieList`，并将`loading`状态设为`false`。接着，在页面的`onLoad`生命周期函数中，调用`wx.request` 发送请求。`onLoad`是在页面加载时执行的，因此适合在此处初始化数据。 请求的代码示例如下： ```javascript onLoad: function() { var url = 'https://api.douban.com/v2/movie/top250'; var that = this; // 保持回调函数中this的正确指向 wx.request({ url: url, // 请求地址 data: {}, // 不需要携带数据 header: {'Content-Type': 'application/json'}, // 设置请求头 success: function(res) { that.setData({ // 更新数据 movieList: res.data.subjects, // 假设返回数据中的电影列表位于res.data.subjects loading: false // 请求完成，关闭加载状态 }); }, // 其他错误处理回调，如fail和complete }); } ``` 通过`wx.request` 的`success` 回调，我们可以将接收到的电影数据赋值给`movieList`，从而在界面上展示真实的电影列表。此外，还可以根据需求添加错误处理回调，如`fail` 和`complete`，以处理请求失败或完成时的情况。 在实际开发中，为了提升用户体验，通常会在请求开始时显示加载动画，请求结束或失败时隐藏加载动画。此外，还可以使用`wx.showLoading` 和`wx.hideLoading` 来控制加载提示的显示与隐藏。 总结，本教程深入浅出地介绍了微信小程序中使用`wx.request` API进行网络请求的基本步骤，以及如何处理返回的数据，对于初学者来说是一份很好的实战指导。通过学习和实践，开发者可以进一步掌握微信小程序的动态数据加载和界面更新技术。