最近在嘗試小程序的云開(kāi)發(fā)，弄了很久查了很多博客才總算把詳情頁(yè)的跳轉(zhuǎn)弄出來(lái)了。因?yàn)槭?strong>從云數(shù)據(jù)庫(kù)中調(diào)取數(shù)據(jù)，所以真的嘗試了很多方法，希望能夠分享給那些也同樣遇到問(wèn)題的朋友。

    首先，肯定是有準(zhǔn)備兩個(gè)頁(yè)面的，一個(gè)是詳情頁(yè)（detail),一個(gè)是你的主頁(yè)面(index)。在主頁(yè)面里，你需要綁定一個(gè)tap函數(shù)，為的是能夠獲取到你所點(diǎn)的集合中的id。下面的代碼段是來(lái)自index.js,獲取該數(shù)據(jù)集合中所有的數(shù)據(jù)，顯示在index頁(yè)面上。這里的list是你獲取到的元素保留的列表，注意在index.js中data{ list:[] }；

簡(jiǎn)單說(shuō)明一下，在云數(shù)據(jù)庫(kù)中的good集合（也就是數(shù)據(jù)庫(kù)中的表）的字段有_id:(Number類型)、imglink、price等等。

onLoad: function (options) {
    const db = wx.cloud.database();
    　　db.collection('good').get().then(res => {//good是數(shù)據(jù)庫(kù)里面集合的名稱
      　　　　console.log(res); //如果更新數(shù)據(jù)成功則輸出成功信息
      　　　　var that = this;
      　　　　that.setData({
        　　　　　　list: res.data
      　　　　});
      　　　　console.log(res.data);
    　　}).catch(err => {
      　　　　console.log(err); //如果更新數(shù)據(jù)失敗則輸出失敗信息
    　　})
  },

 下面這個(gè)函數(shù)就是index.js中的tap函數(shù)，此處為onGoodTap。

        為此查了一下event.currentTarget.dataset。這個(gè)是用來(lái)取值的，可以說(shuō)用data-goodid=’{{item._id}}'綁定了item._id（這個(gè)_id就是集合中的字段名）后，在onGoodTap函數(shù)中獲取并作為參數(shù)傳遞給detail頁(yè)面中。其中data-是固定前綴,data-goodid中的goodid你也可以改為其他名字。注意data-id 綁定的變量名不能有大寫(xiě)(大寫(xiě)會(huì)自動(dòng)轉(zhuǎn)成小寫(xiě))。

onGoodTap: function (event) {
    var idx =event.currentTarget.dataset.goodid;   
    //console.log(idx);    //在控制臺(tái)中打印出來(lái)檢驗(yàn)
    wx.navigateTo({
      url: '../detail/detail?id='+idx,
    })
  },

那么我們需要在遍歷時(shí)就獲取到這個(gè)id（在index.wxml中）。catchtap="",也就是你自己設(shè)的一個(gè)綁定在tap上的函數(shù)啦，item可以理解為list中每一個(gè)遍歷出來(lái)的元素。

<view class="content-item" wx:for="{{list}}" catchtap="onGoodTap" data-goodid="{{item._id}}">

好了，完成以上步驟你應(yīng)該是能夠在控制臺(tái)打印出你獲取的id了，接下來(lái)看一下detail.js的部分

在detail.js中可以檢驗(yàn)一下是不是真的拿到了參數(shù)

onload:functions(options)的options作為參數(shù)，都可以自定義的。

比如我選中其中一個(gè)列表，它的id是3，如果console.log(options),options就是object類型，然后…我還去查怎么類型轉(zhuǎn)換…其實(shí)提示很明顯{id:“3”}，有點(diǎn)像列表中套列表，你需要獲取options.id就可以取到這個(gè)值。

emm,因?yàn)榍懊嫣岬轿冶砝锏腳id的數(shù)據(jù)類型是Number,于是我做了個(gè)類型轉(zhuǎn)換，string類型轉(zhuǎn)為Number類型。

如果僅僅是獲取了res.data,可以在控制臺(tái)輸出res.data就發(fā)現(xiàn)其實(shí)還沒(méi)有拿到那個(gè)數(shù)據(jù)吶

提示也很明顯，res.data[0]獲取該項(xiàng)的所有字段，也方便你后期取它的各種屬性

我的想法就是獲取id后在數(shù)據(jù)庫(kù)里查找滿足_id為獲取id的那一行數(shù)據(jù)，最后獲取它的各種屬性即可。

注意同樣在detail.js的data中命名一個(gè)列表比如goodlist:[]來(lái)存放數(shù)據(jù)

 onLoad: function (options) {
    var goodid = options.id;
   var gid = Number(goodid);  //數(shù)據(jù)類型轉(zhuǎn)化
    console.log(gid);
    const db = wx.cloud.database();
    db.collection('good').where({
      _id: gid,                 //查詢good集合中字段_id為gid的值
    })
      .get({
        success: res => {
          this.setData({
            goodlist: res.data[0],
          })
          console.log("查詢成功", res.data[0]);
        },
        fail(err) {
          console.log("查詢失敗", err);
        }
      })
  },

在detail.wxml中可以直接用下面的方式,{{列表名.字段名}}獲取該屬性的值

<image src = "{{goodlist.imglink}}" style="width:100px;height:150px;"></image>
</view>

啊搗鼓了兩三天才解決了這個(gè)問(wèn)題！