1、index.wxml

  <!-- 商品搜索结果卡片容器 -->
  <view class="search-result">
      <block wx:for="{{products}}" wx:key="id">
          <!-- 商品信息展示区域 -->
          <view class="product-card card-layout-{{cardLayout}}" bindtap="navigateToDetail" data-id="{{item.id}}">
              <!-- 商品图片 -->
              <image class="product-image" src="{{item.image}}"  />
              
              <!-- 商品描述和价格 --> 
              <view class="product-info">
                  <text class="product-title">{{item.name}}</text>
                  <!-- 商品元信息和价格在同一行显示 -->
                  <view class="meta-price-container">
                      <view class="product-meta">
                          <text class="product-origin">{{item.location}}</text>
                          <text class="product-barcode">条码：{{item.jancode}}</text>
                      </view>
                      <view class="product-price">
                          <text class="price">{{item.standardPrice}}<text style="font-size:14rpx;">元</text></text>
                      </view>
                  </view>
              </view>
          </view>
      </block>
  </view>

2、index.js

// 点击商品卡片后跳转到详情页
  navigateToDetail(event) {
    const productId = event.currentTarget.dataset.id;
    console.log("跳转到详情页，产品ID:", productId);
    wx.navigateTo({
      url: `/pages/productDetail/productDetail?id=${productId}`,
    });
  },

跳转到详情页，产品ID: 679

看到控制台输出了正确的产品ID，说明事件绑定和事件处理函数都没有问题。接下来，我们需要确保页面跳转也正常工作。

检查点

1. 确保目标页面存在：确保productDetail页面已经创建并且路径正确。
2. 确保页面路径配置正确：确保在app.json中正确配置了页面路径。
3. 检查页面接收参数：确保productDetail页面能够正确接收并处理传递过来的参数。

1. 确保目标页面存在

确保productDetail页面已经创建，并且路径正确。通常情况下，页面文件会放在pages目录下。

project-root/
├── pages/
│   ├── index/
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── index.js
│   │   └── index.json
│   └── productDetail/
│       ├── productDetail.wxml
│       ├── productDetail.wxss
│       ├── productDetail.js
│       └── productDetail.json

2. 确保页面路径配置正确

在app.json中配置页面路径，确保productDetail页面被正确注册。

json">{
  "pages": [
    "pages/index/index",
    "pages/productDetail/productDetail"
  ]
}

3. 检查页面接收参数

确保productDetail页面能够正确接收并处理传递过来的参数。

productDetail.js

productDetail.wxml

productDetail.wxss

总结

1. 确保目标页面存在：检查productDetail页面文件是否创建并放置在正确的位置。
2. 确保页面路径配置正确：在app.json中注册productDetail页面。
3. 检查页面接收参数：确保productDetail页面能够正确接收并处理传递过来的参数。