前提：

類似一個(gè)商城界面，從云數(shù)據(jù)庫(kù)拉取信息展示，用戶點(diǎn)擊某一個(gè)商品后，實(shí)現(xiàn)從數(shù)據(jù)庫(kù)查詢?cè)撋唐返膇d，實(shí)現(xiàn)跳轉(zhuǎn)。

商城界面展示 (mall)

詳情界面展示 （re-datail）

數(shù)據(jù)庫(kù)：

基本思路：

mall：
1.查詢數(shù)據(jù)表所有商品的信息，放到商城界面 mall.wxml的 imgList 數(shù)組里
2.在商城界面 mall.wxml 上通過(guò)wx-for渲染imgList數(shù)組，顯示需要的數(shù)據(jù)，通過(guò)data-*為商品dataset id
3.在跳轉(zhuǎn)函數(shù)中獲取通過(guò)dataset的id，作為跳轉(zhuǎn)參數(shù)

re-detail：
1.接收傳過(guò)來(lái)的id參數(shù)
2.通過(guò)id查詢數(shù)據(jù)表中該id下的商品信息
3.wxml展示

代碼實(shí)現(xiàn)

mall.js：
一步一步來(lái)：

 Page({
data: {
    imgList:[],///定一個(gè)接受數(shù)據(jù)的數(shù)組
  },
  onLoad: function (options) {  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
    let that=this //異步請(qǐng)求，所以let一個(gè)that
   
    wx.cloud.database().collection("prize").get({ ///查詢prize數(shù)據(jù)表中的數(shù)據(jù)（所有商品）
      success(res){       
        that.setData({ //通過(guò)setData，將res中的數(shù)據(jù)存入到imgList數(shù)組當(dāng)中
          imgList:res.data           
        }),
        console.log(res.data)   ///打印看一下   
      }
    })
})

mall.wxml：

<block wx:for="{{imgList}}">//渲染這個(gè)數(shù)組
<view class="goods" catchtap="onDetail" data-bzId="{{item._id}}">
<view class="limit">
<image src="{{item.prizeLink}}" mode="aspectFit" style="width:100%;height:100%"></image>
</view>
<text class="good-txt">{{item.prizeName}}</text>//顯示商品名稱
<text class="good-price">{{item.prizePrice}}金幣</text>//顯示商品價(jià)錢
</view>
</block>
<!-- 展示結(jié)束 -->

item就是小程序默認(rèn)的前綴，后面的名字是你數(shù)組中拿到的屬性值的名字

接下來(lái) 傳參跳轉(zhuǎn)。
mall.wxml：

<view class="goods" catchtap="onDetail" data-bzId="{{item._id}}">

綁定一個(gè)onDetail方法，使用data-屬性名來(lái)綁定該商品的id給bzId

關(guān)于data- 官方文檔給的解釋很明白

我的理解就是綁定上一個(gè)參數(shù)

mall.js：

onDetail: function (e) {
    console.log(e)
  }

我們先來(lái)打印一下這個(gè)e

有這么多的屬性 我們重點(diǎn)是這一條：

currentTarget中的dataset里已經(jīng)有一條我們綁定好的bzid，并且你點(diǎn)擊不同的商品，它的bzid都是不同的，是唯一的。

關(guān)于currentTarget：

關(guān)于dataset：

所以我們var一個(gè)變量來(lái)接收id

onDetail: function (e) {
    console.log(e)
    var imgId = e.currentTarget.dataset.bzid;
     console.log("this id is " + imgId)
  }

打印看一下：

imgId成功拿到值。

現(xiàn)在通過(guò)navigateTo跳轉(zhuǎn)頁(yè)面

onDetail: function (e) {
    console.log(e)
    var imgId = e.currentTarget.dataset.bzid;
    console.log("this id is " + imgId)
    wx.navigateTo({
      url: "../rewards-detail/re-detail?id=" + imgId   //?id連字符加上imgId
    });
  }

現(xiàn)在是這個(gè)樣子了。 mall頁(yè)面配置完畢了

re-detail頁(yè)面：
js：

onLoad: function (e) {
    //指定id來(lái)加載對(duì)應(yīng)數(shù)據(jù)
    console.log(e)
}

還是老樣子 先打印一下e

id已經(jīng)拿到了

在Page下的data中設(shè)置三個(gè)數(shù)組

 data: {
    imgDetail:[],//全部信息
    prizeLink:[],//商品圖片鏈接，是數(shù)據(jù)表中的一個(gè)字段
    prizePrice:[]商品價(jià)格，是數(shù)據(jù)表中的一個(gè)字段
  },

 onLoad: function (e) {
    //指定id來(lái)加載對(duì)應(yīng)數(shù)據(jù)
    console.log(e)
    let that=this//同樣的 異步請(qǐng)求，let一個(gè)that
    let a=e.id//聲明一個(gè)a,存e中的id
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
    wx.cloud.database().collection("prize").where({ //查詢數(shù)據(jù)表prize下id為a所存放的id的信息
      _id:a
    }).get({
      success(res){
       // console.log(res)
        that.setData({ //給數(shù)據(jù)寫入數(shù)據(jù)
          imgDetail:res.data,
          prizeLink:res.data[0].prizeLink,
          prizePrice:res.data[0].prizePrice
        })
      }
    })   
  }

wxml：

<view class="goods">
<text class="good-txt">{{prizeType}}</text>
<view class="limit">
<image src="{{prizeLink}}" mode="heightFix" style="width:100%;height:100%"></image>
</view>
  <view  class="buy" bindtap="buy"><text class="buy-txt">{{prizePrice}}金幣</text></view>
</view>

配置完畢。效果如下：