文章目录
- 1、index.wxml
- 2、index.js
- 检查点
- 1. 确保目标页面存在
- 2. 确保页面路径配置正确
- 3. 检查页面接收参数
- productDetail.js
- productDetail.wxml
- productDetail.wxss
- 总结
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，说明事件绑定和事件处理函数都没有问题。接下来，我们需要确保页面跳转也正常工作。
检查点
- 确保目标页面存在：确保
productDetail页面已经创建并且路径正确。 - 确保页面路径配置正确：确保在
app.json中正确配置了页面路径。 - 检查页面接收参数：确保
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页面被正确注册。
{"pages": ["pages/index/index","pages/productDetail/productDetail"]
}
3. 检查页面接收参数
确保productDetail页面能够正确接收并处理传递过来的参数。
productDetail.js
productDetail.wxml
productDetail.wxss
总结
- 确保目标页面存在：检查
productDetail页面文件是否创建并放置在正确的位置。 - 确保页面路径配置正确：在
app.json中注册productDetail页面。 - 检查页面接收参数：确保
productDetail页面能够正确接收并处理传递过来的参数。
