1：實戰(zhàn)六之中，列表頁已經完成，現(xiàn)在新建一個詳情頁，打開app.json,"pages/details/details",，自動生成了一個詳情頁

2：打開首頁列表頁代碼，綁定詳情按鈕跳轉事件
wxml:

<view wx:for="{{book_list}}">
  <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}">
    <view slot="footer">
      <van-button size="mini" bind:click="viewitem">詳情按鈕</van-button>
    </view>
  </van-card>
</view>

3:繼續(xù)寫js里面的綁定事件，在控制臺打印一下event，方便后續(xù)測試

  viewitem: function(event) {
    console.log(event)
  }

4：如何知道要跳轉列表圖書中的哪個詳情頁？要在云開發(fā)里面寫一個特定的id，打開云開發(fā)控制臺，數據庫，需要用到這個下劃線是_id的字段

5：給這個字段設置一個值，data-id="{{item._id}}"

圖片.png

點擊按鈕，可以看到，點擊不同的列表，打印的是不同的id，通過不同的id就可以看到不同的內容了。

6：下面實現(xiàn)點擊詳情按鈕跳轉詳情頁面，看到想要的具體的內容，看完控制臺，因為具體數據是來自于event，currentTarget

所以js里面聲明一下

 var id = event.currentTarget.dataset.id;

并且寫好跳轉頁面的跳轉方法和url，帶參數跳轉

7：在detail.js的onLoad方法里面打印接收到的參數

8：測試,列表界面帶參數跳轉成功

分割線======分割線=======分割線=======分割線

開始寫詳情頁的一些代碼

1：初始化db的實例

const db = wx.cloud.database({});

2：打開云函數文檔里面的讀取數據apihttps://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
復制此段讀取數據記錄的代碼，放在onload里面

   onLoad: function (options) {
   // console.log(options)
    db.collection('books').doc(options.id).get({
      success(res) {
        // res.data 包含該記錄的數據
        console.log(res.data)
      }
    })
  },
  

可以看到，具體數據已經打印過來了

圖片.png

這個時候還沒有將數據傳遞到一個具體的頁面實例中

所以，success開始改成使用箭頭函數

// pages/details/details.js
const db = wx.cloud.database({});
Page({
  /**
   * 頁面的初始數據
   */
  data: {

  },
  onLoad: function (options) {
    //  console.log(options)
    db.collection('books').doc(options.id).get({
      success: res => {
        console.log(res.data)
        this.setData({
          book: res.data
        })
      }
    })
  },
})

ok，進入頁面的時候，可以看到appdata里面的book

3:具體展示
在wxml里面寫上想要拿到的數據，ok，詳情頁面展示的數據

4：效果如下

原文作者：祈澈姑娘 技術博客：http://m.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，對于博客上面有不會的問題，可以加入qq群聊來問我：473819131。

小程序云開發(fā)入門實戰(zhàn)課程總結：

小程序云開發(fā)實戰(zhàn)一：小程序掃一掃獲取到圖書ISBN碼（圖書條形碼）
小程序云開發(fā)實戰(zhàn)二：小程序云開發(fā)云函數安裝依賴步驟
小程序云開發(fā)實戰(zhàn)三：編寫云函數代碼
小程序云開發(fā)實戰(zhàn)四：調用豆瓣API獲取具體的數據
小程序云開發(fā)實戰(zhàn)五：如何將獲取到的API數據存入云數據庫里面
小程序云開發(fā)實戰(zhàn)六：云數據庫讀取的數據顯示在小程序端列表里
小程序云開發(fā)實戰(zhàn)七：云開發(fā)首頁列表跳轉詳情頁