使用微信开发者工具编写一个点击商品列表可跳转到商品详情的页面

首先，需要先创建一个商品列表页面和一个商品详情页面。

在商品列表页面上，需要绑定一个点击事件，当用户点击某个商品时，跳转到该商品的详情页面。

下面是示例代码：

商品列表页面：

<view class="goods-list">
  <view class="goods-item" bindtap="goToDetail" data-goods-id="1">
    <image src="https://example.com/goods1.jpg" mode="aspectFill"></image>
    <view class="goods-name">商品1</view>
    <view class="goods-price">¥10.00</view>
  </view>
  <view class="goods-item" bindtap="goToDetail" data-goods-id="2">
    <image src="https://example.com/goods2.jpg" mode="aspectFill"></image>
    <view class="goods-name">商品2</view>
    <view class="goods-price">¥20.00</view>
  </view>
  <view class="goods-item" bindtap="goToDetail" data-goods-id="3">
    <image src="https://example.com/goods3.jpg" mode="aspectFill"></image>
    <view class="goods-name">商品3</view>
    <view class="goods-price">¥30.00</view>
  </view>
</view>

在上面的代码中，我们使用了一个 `goods-item` 的 class 来表示每个商品，使用 `bindtap` 来绑定点击事件，并且使用了 `data-goods-id` 来存储商品的 ID。

接下来，在页面的 JS 文件中，需要编写 `goToDetail` 函数，实现跳转到商品详情页面的逻辑。

商品列表页面 JS 代码：

Page({
  // 点击商品跳转到商品详情页面
  goToDetail: function(event) {
    var goodsId = event.currentTarget.dataset.goodsId;
    wx.navigateTo({
      url: '/pages/goods/detail?id=' + goodsId
    });
  }
})

在上面的代码中，我们使用了 `event.currentTarget.dataset.goodsId` 来获取点击的商品的 ID，然后使用 `wx.navigateTo` 函数跳转到商品详情页面。

接下来，需要编写商品详情页面的代码。

商品详情页面：

<view class="goods-detail">
  <image src="https://example.com/goods1.jpg" mode="aspectFill"></image>
  <view class="goods-name">商品1</view>
  <view class="goods-price">¥10.00</view>
  <view class="goods-desc">这是商品1的描述</view>
</view>

在上面的代码中，我们展示了商品的图片、名称、价格和描述。

最后，需要在商品详情页面的 JS 文件中，获取跳转过来的商品 ID，并且根据该 ID 加载对应的商品数据。

商品详情页面 JS 代码：

Page({
  onLoad: function(options) {
    // 获取跳转过来的商品 ID
    var goodsId = options.id;
    // 根据商品 ID 加载商品数据
    // ...
  }
})

在 `onLoad` 函数中，我们可以通过 `options.id` 获取跳转过来的商品 ID，然后根据该 ID 加载对应的商品数据。

以上就是使用微信开发者工具编写一个点击商品列表可跳转到商品详情的页面的方法。