微信小程序开发教程：利用nodejs实现图片路径数组获取功能

今天这篇教程是上篇教程获取组数据的第二篇，主要给大家说说我之前创建的图片路径数组allImagePaths。下面的代码获取图片的方式，是基于我的多张图片上传方式，它们在我数据库中的保持方式，是这样的：

上图中，我在微信小程序前端上传了两张图片，都保存在了mysql数据库中表的img列中，接下来我们要做的，就是把img列中名叫path中的图片链接遍历出来。

所以现在，我就正式来教你如何使用微信小程序中的WXML、WXSS、JavaScript (TypeScript) 和后端Node.js代码配合，实现通过getdt路由接口从服务器获取图片路径，并在小程序中显示这些图片。

准备工作

确保您已经有一个微信小程序项目，如果没有，请先创建一个。
安装并配置好Node.js环境和Express框架。
创建getdt.js后端路由文件，并确保它能够正确连接数据库并返回数据。

步骤一：后端Node.js代码

首先，我们需要确保getdt.js中的路由接口能够从数据库中查询到数据，并返回图片路径的数组。

// getdt.js
const express = require("express");
const router = express.Router();
const db = require("../sql");

router.get("/getdt", (req, res) => {
    const sql = "SELECT * FROM wxinfopen INNER JOIN wxusers ON wxinfopen.openid = wxusers.openid ORDER BY wxinfopen.iddt DESC";
    db.query(sql, (err, result) => {
        if (err) {
            console.log(err);
            res.status(500).json({ message: "获取数据失败" });
        } else {
            const allImagePaths = result.map((row) => {
                const imgArr = JSON.parse(row.img || "[]");
                return imgArr.map((imgObj) => "http://localhost:3000/" + imgObj.path.path);
            });
            res.status(200).json({ result, allImagePaths });
        }
    });
});

module.exports = router;

上面的代码中，const sql = "SELECT * FROM wxinfopen INNER JOIN wxusers ON wxinfopen.openid = wxusers.openid ORDER BY wxinfopen.iddt DESC";你可以直接简化成const sql = "SELECT * FROM wxinfopen";。

这里我们注意一下代码：

return imgArr.map((imgObj) => "http://localhost:3000/" + imgObj.path.path);

上面提到我的图片上传方式，大家还记得吧，这里的imgObj.path.path是一个从数据库查询结果中解析出来的对象属性路径。这个路径指的是每个图像对象中嵌套的path属性，它本身又包含一个path属性，这个内层的path属性存储了图像的实际文件路径。

imgObj是一个对象，代表了数据库中的一条记录，其中包含了图像信息。在这个对象中，path属性是一个包含多个键值对的对象，而其中的一个键就是path，它对应的值就是我们需要的图像文件的路径。

步骤二：小程序TS代码

在小程序的TypeScript文件中，我们需要编写一个函数来调用后端接口，并处理返回的数据。

// 小程序TS文件
Page({
  data: {
    isShowForm: true,
    wxinfopenList: [], // 存储从后台获取的数据
    imgPaths: [], // 存储图片路径
    // 其他数据...
  },
  onLoad() {
    this.showForm();
  },
  showForm() {
    // 切换显示状态
    this.setData({
      isShowForm: !this.data.isShowForm
    });
    // 请求后端接口获取数据
    wx.request({
      url: '您的服务器地址/api/getdt',
      success: (res) => {
        const { result, allImagePaths } = res.data;
        this.setData({
          wxinfopenList: result,
          imgPaths: allImagePaths,
        });
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
    });
  },
  // 其他方法...
});

步骤三：WXML代码

在WXML文件中，我们需要编写代码来遍历后端返回的图片路径数组，并显示图片。

<!-- WXML文件 -->
<view class="imgbox">
  <block wx:for="{
   
   {imgPaths[index]}}" wx:key="{
   
   {item}}" wx:for-index="itemIndex">
    <image class="img" src="{
   
   {item}}" bindtap="previewImage" data-index="{
   
   {index}}" data-item-index="{
   
   {itemIndex}}"></image>
  </block>
</view>

在这里，我们使用wx:for指令来遍历imgPaths[index]数组，index是当前wxinfopenList数组项的索引。wx:key用于提高列表渲染的性能，itemIndex是图片数组的索引。

当<block>内的代码执行时，它会遍历imgPaths[index]数组，每个元素都会被赋值给变量item。然后，<image>标签的src属性会被设置为item的值，即当前图片的URL路径。这样，每个<image>都会根据item的值显示对应的图片。

具体来说，在这段代码中：

<block wx:for="{ {imgPaths[index]}}">：这是一个块级元素，用于遍历imgPaths[index]数组。imgPaths是一个二维数组，其中每个元素也是一个数组，包含了对应wxinfopenList条目的所有图片路径。index是外部wxinfopenList数组的当前索引。
wx:key="{ {item}}"：这是告诉小程序如何高效地更新列表的指令，{ {item}}在这里用作每个图片元素的唯一标识符。
wx:for-index="itemIndex"：这是设置内部循环索引的属性，itemIndex是当前遍历到的imgPaths[index]数组中的索引。

这些也解释一下：

bindtap="previewImage"：这是一个事件绑定，当用户点击图片时，会触发名为previewImage的函数。
data-index="{ {index}}"和data-item-index="{ {itemIndex}}"：这些是自定义数据属性，它们将当前图片的外部数组索引和内部数组索引传递给事件处理函数，这样在处理函数中就可以知道用户点击的是哪一张图片。

这里的功能是准备帮我我判断用户点击了哪张图片，然后将对应的图片预览打开。不过这个功能的实现，我们还是下篇文章再说。

步骤四：WXSS代码

我们最后肯定需要为图片添加一些样式，以确保它们在页面上正确显示。CSS样式自己拿去参考好了：

/* WXSS文件 */
.imgbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.img {
  width: 100px;
  height: 100px;
  margin: 5px;
}

步骤五：测试功能

运行您的Node.js服务器。
在微信开发者工具中运行小程序。
调用showForm函数（可能是通过点击按钮或页面加载）。
检查是否能够从后端获取图片路径，并在小程序中显示图片。

通过以上步骤，我们就能够实现从服务器获取图片数据并在小程序中显示这些图片的功能。如果遇到问题，你就检查服务器地址是否正确，后端接口是否能够正常工作，以及小程序的请求是否正确发送和处理。