微信小程式雲開發-雲存儲-帶圖檔的商品清單攜帶id跳轉至商品詳情

一、商品清單頁

1.wxml檔案

在view中添加點選事件goToGoodDetail，綁定資料data-id

<!-- 添加點選事件goToGoodDetail -->
<view wx:for="{{list}}" class="list" bindtap="goToGoodDetail" data-id="{{item._id}}">
<image src="{{item.image}}" class="image"></image>
<text>商品名稱：{{item.name}}</text>
<text>商品價格：{{item.price}}</text>
</view>      

2、js檔案

在js檔案中寫goToGoodDetail()函數，實作點選清單資料攜帶id跳轉到詳情頁

//跳轉至商品詳情頁
  goToGoodDetail(e){
    console.log("攜帶的id為",e.currentTarget.dataset.id);
    wx.navigateTo({
      url: '/pages/goodImgDetail/goodImgDetail?id='+e.currentTarget.dataset.id, //攜帶id跳轉
    })
  }      

二、商品詳情頁

<image src="{{detail.image}}"></image>
<text>商品名稱：{{detail.name}}</text>，
<text>商品價格：{{detail.price}}</text>      

2.wxss檔案

image{
  width: 100%;
}      

3.js檔案

Page({
  onLoad(options){
    console.log(options);
    wx.cloud.database().collection("goods")
    .doc(options.id)
    .get()
    .then(res=>{
      console.log("請求成功",res);
      this.setData({
        detail:res.data
      })
    })
    .catch(err=>{
      console.log("請求失敗",err);
    })
  }
})      

4.效果圖