【详细解析：如何在小程序中实现动态二维码和预约信息展示】

背景介绍

随着小程序的快速发展，二维码已成为很多线上线下场景中必不可少的工具。在这篇文章中，我将分享如何在小程序中实现一个动态生成二维码并展示预约信息的功能。我们会使用 Vue 和 uni-app 框架，结合自定义的 API，来获取预约数据并通过二维码展示入场码。

我们将通过以下几个步骤来实现：

1. 获取预约数据（通过 API）
2. 动态生成二维码
3. 显示预约信息，如场馆名称、有效时间等
4. 实现一个良好的用户界面，确保所有信息都能清晰展示

第一步：获取预约数据

首先，我们需要通过预约 ID (bookingId) 从后端 API 获取预约数据。假设我们已经有了一个名为 cunbaApi.Booking.ShowBooking 的 API，可以根据 bookingId 获取预定的详细信息。

async fetchBookingData(bookingId) {
  try {
    const response = await cunbaApi.Booking.ShowBooking(bookingId);
    if (response.code === 0) {
      // 成功获取数据后更新 bookingData
      this.bookingData = response.data; // 假设 response.data 包含所需的预定信息
      this.generateQRCode(bookingId); // 获取到数据后生成二维码
    } else {
      console.error("错误预约信息！:", response.message);
    }
  } catch (error) {
    console.error("错误预约信息:", error);
  }
}

这里使用 async/await 来处理异步请求。当请求成功返回时，我们将数据保存到 bookingData 中，并调用 generateQRCode 函数生成二维码。

第二步：生成二维码

我们使用 UQRCode 库来生成二维码。二维码的内容我们设置为 bookingId，这样用户扫码时可以直接得到预约 ID，方便他们进行后续操作。

generateQRCode(bookingId) {
  const qr = new UQRCode();
  qr.data = bookingId.toString(); // 使用 bookingId 作为二维码数据
  qr.make(); // 生成二维码
  this.modules = qr.modules; // 将生成的二维码数据存入 modules
}

在这里，我们首先创建一个 UQRCode 实例，设置二维码的数据为 bookingId，然后调用 make() 方法生成二维码，并将二维码的矩阵数据存入 modules，后续我们会将它绑定到模板中来显示。

第三步：日期格式化

我们希望显示预约的有效时间，以便用户了解何时可以使用入场码。为了展示清晰的日期格式，我们创建了一个 formatDate 方法，将时间戳转换为用户友好的日期格式。

formatDate(timestamp) {
  const date = new Date(timestamp); // 转换为 Date 对象
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份需要加1
  const day = date.getDate().toString().padStart(2, '0');
  
  return `${year}-${month}-${day} `; // 返回格式化后的日期
}

这个方法将时间戳转换成 yyyy-mm-dd 格式的字符串，并返回给模板进行渲染。

第四步：展示数据

在小程序的模板部分，我们将 bookingData 中的数据（如场馆名称、有效时间等）渲染到界面上。同时，我们也会展示动态生成的二维码。

<view class="ticket-container">
  <view class="ticket-header">
    <text class="header-text">{{ bookingData.venueName }}</text> <!-- 场馆名称 -->
  </view>

  <view class="ticket-card">
    <text class="ticket-title">入场码</text>
    <view class="qr-code">
      <!-- 这里显示二维码 -->
      <view>
        <view class="qrcode">
          <view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
            <view v-for="(col, colI) in row" :key="colI">
              <view v-if="col.isBlack" style="width: 10px;height: 10px;background-color: black;">
                <!-- 黑色码点 -->
              </view>
              <view v-else style="width: 10px;height: 10px;background-color: white;">
                <!-- 白色码点 -->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="validity-info">
      <text class="validity-text">有效时间：{{ formatDate(bookingData.bookingTime) }}</text> <!-- 使用动态的有效时间 -->
    </view>
  </view>

  <view class="notice-card">
    <view class="notice-title">
      <text class="notice-title-text">温馨提示：</text>
    </view>
    <view class="notice-items">
      <view class="notice-item">
        <text class="notice-item-text">1.请在有效时间内扫码入场。</text>
      </view>
      <view class="notice-item">
        <text class="notice-item-text">2.在有效时间内此码可多次进出场地使用。</text>
      </view>
    </view>
  </view>
</view>

通过 {{ bookingData.venueName }} 和 {{ formatDate(bookingData.bookingTime) }} 我们动态地将场馆名称和有效时间显示在页面上。

二维码的显示则通过 modules 数组来渲染。我们使用 v-for 来遍历 modules 中的行和列，并根据每个位置的 isBlack 值来决定是否显示黑色或白色的方块。

第五步：样式设计

为了确保页面的视觉效果，我们对小程序的样式进行了优化。我们使用了 flex 布局来让元素居中显示，并为每个组件增加了适当的间距和阴影效果，确保页面清晰、整洁。

.ticket-container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.ticket-header {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
}

.header-text {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.ticket-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.ticket-title {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
}

.qr-code {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.qr-image {
  width: 80%;
  height: 260px;
}

.validity-info {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.validity-text {
  font-size: 16px;
  color: #ff9900;
}

.notice-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.notice-title {
  margin-bottom: 12px;
}

.notice-title-text {
  color: #ff9900;
  font-size: 16px;
}

.notice-items {
  display: flex;
  flex-direction: column;
}

.notice-item {
  margin-bottom: 10px;
}

.notice-item-text {
  font-size: 16px;
  color: #ff9900;
}

总结

通过以上步骤，我们成功地实现了一个小程序页面，能够动态获取预约信息、生成二维码并展示相关数据。这种方式不仅提高了用户体验，还能让小程序更具互动性。

这种技术实现适用于很多需要验证入场信息的场景，比如体育馆、电影院等。你可以根据需求进一步扩展此功能，例如增加二维码有效期、限制扫描次数等。

希望通过这篇文章，你能够更加深入理解如何使用小程序中的二维码技术以及如何通过 API 动态展示数据。如果你有任何问题或需要进一步的帮助，欢迎在评论区留言，我会尽力解答！