微信小程序完成一个商品列表展示页面，包含事件传参（跳转到对应商品页面）、列表渲染、事件绑定等方式。

在微信小程序中，要完成一个商品列表展示页面，首先需要准备数据源，通常通过json文件或API获取。步骤如下：

1. **数据结构设计**:
创建一个商品模型（例如：`Product`），包括属性如id、name、price等。

// product.js 或者 data.json
const products = [
  {
    id: '001',
    name: '商品A',
    price: '99元'
  },
  // 更多商品...
]

2. **WXML模板编写**:
使用`<list>`组件遍历产品数组，显示每个商品的信息，并为其添加点击事件，传递商品ID作为参数。

<!-- pages/product-list/product-list.wxml -->
<view class="product-list">
  <list wx:for="{{ products }}" item="item" wx:key="index">
    <view bindtap="jumpToDetailPage" data-id="{{ item.id }}">
      <text>{{ item.name }}</text>
      <text>价格：{{ item.price }}</text>
    </view>
  </list>
</view>

3. **JS文件处理**:
在对应的`js`文件中，定义`jumpToDetailPage`函数，接收事件传参并跳转到详情页，同时可以将商品信息传递过去。

// pages/product-list/product-list.js
Page({
  data: {
    products: []
  },
  onLoad() {
    this.setData({
      products: products // 从data.json 或者 API 获取数据
    });
  },
  
  jumpToDetailPage(e) {
    const productId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/product-detail/product-detail?productId=' + productId
    });
  }
})

4. **事件绑定与参数传递**:
`bindtap` 是微信小程序内置的点击事件处理器，当用户点击列表项时触发。通过`data-id` 属性，我们在`jumpToDetailPage` 函数中能获取到点击商品的唯一标识。

5. **事件路由守卫**:
如果你想在商品详情页接收到这个参数，可以在`product-detail` 页面的`onLoad`生命周期钩子中解析查询字符串，提取出`productId`。

// pages/product-detail/product-detail.js
onLoad(options) {
  let productId = options.query.productId;
  // 对接收到的商品ID做进一步处理...
}