[猫头虎分享21天微信小程序基础入门教程] 第11天：小程序的动态数据展示与实时更新

猫头虎

发布于 2024-05-26 08:48:55

2020

发布于 2024-05-26 08:48:55

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

[猫头虎分享21天微信小程序基础入门教程] 第11天：小程序的动态数据展示与实时更新

第11天：小程序的动态数据展示与实时更新 📊

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何实现动态数据展示和实时更新。这些内容将帮助你创建更加互动和响应迅速的小程序。🚀

动态数据展示

一、获取动态数据

小程序可以通过网络请求从服务器获取动态数据，并在页面上展示。

1. 使用 wx.request 获取数据

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

2. 数据绑定到页面

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

二、实时数据更新

为了实现实时数据更新，可以使用 WebSocket 或者定时轮询。

1. 使用 WebSocket 实现实时数据更新

Page({
  data: {
    messages: []
  },
  onLoad() {
    this.connectWebSocket();
  },
  connectWebSocket() {
    const socket = wx.connectSocket({
      url: 'wss://example.com/socket'
    });

    socket.onMessage((message) => {
      const data = JSON.parse(message.data);
      this.setData({
        messages: this.data.messages.concat(data)
      });
    });

    socket.onOpen(() => {
      console.log('WebSocket connection opened');
    });

    socket.onClose(() => {
      console.log('WebSocket connection closed');
    });

    socket.onError((error) => {
      console.error('WebSocket error:', error);
    });
  }
});

2. 使用定时轮询获取最新数据

Page({
  data: {
    items: []
  },
  onLoad() {
    this.fetchData();
    this.startPolling();
  },
  fetchData() {
    wx.request({
      url: 'https://example.com/api/items',
      method: 'GET',
      success: (res) => {
        this.setData({
          items: res.data
        });
      },
      fail: (err) => {
        console.error('Request failed:', err);
      }
    });
  },
  startPolling() {
    setInterval(() => {
      this.fetchData();
    }, 5000); // 每5秒请求一次数据
  }
});

动态数据展示的优化

一、数据分页加载

为了提高性能，可以对数据进行分页加载。

1. 后端接口支持分页

后端接口增加分页参数：

// 假设使用 Express 框架
app.get('/api/items', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const items = getItemsFromDatabase(page, limit); // 根据分页参数获取数据
  res.json(items);
});

2. 前端实现分页加载

Page({
  data: {
    items: [],
    page: 1,
    limit: 10,
    hasMore: true
  },
  onLoad() {
    this.fetchData();
  },
  fetchData() {
    if (!this.data.hasMore) return;
    wx.request({
      url: 'https://example.com/api/items',
      method: 'GET',
      data: {
        page: this.data.page,
        limit: this.data.limit
      },
      success: (res) => {
        if (res.data.length < this.data.limit) {
          this.setData({ hasMore: false });
        }
        this.setData({
          items: this.data.items.concat(res.data),
          page: this.data.page + 1
        });
      },
      fail: (err) => {
        console.error('Request failed:', err);
      }
    });
  },
  onReachBottom() {
    this.fetchData();
  }
});

小测试 🧪

实现一个动态数据展示的小程序页面，从服务器获取数据并展示。
使用 WebSocket 或定时轮询实现实时数据更新。

今日学习总结 📚

概念	详细内容
动态数据展示	使用 wx.request 获取数据并展示
实时数据更新	使用 WebSocket 或定时轮询实现实时数据更新
分页加载	实现数据分页加载，提高性能和用户体验