微信小程序--從雲數據庫拉取數據展示到頁面上並獲取某條數據的id作爲跳轉到詳情頁參數

前提：

類似一個商城界面，從雲數據庫拉取信息展示，用戶點擊某一個商品後，實現從數據庫查詢該商品的id，實現跳轉。

商城界面展示 (mall)

詳情界面展示 （re-datail）

數據庫：

基本思路：

mall：
1.查詢數據表所有商品的信息，放到商城界面 mall.wxml的 imgList 數組裏
2.在商城界面 mall.wxml 上通過wx-for渲染imgList數組，顯示需要的數據，通過data-*爲商品dataset id
3.在跳轉函數中獲取通過dataset的id，作爲跳轉參數

re-detail：
1.接收傳過來的id參數
2.通過id查詢數據表中該id下的商品信息
3.wxml展示

代碼實現

mall.js：
一步一步來：

 Page({
	data: {
    imgList:[],		///定一個接受數據的數組
  	},
  	onLoad: function (options) {  // 頁面初始化 options爲頁面跳轉所帶來的參數
    let that=this //異步請求，所以let一個that
   
    wx.cloud.database().collection("prize").get({ ///查詢prize數據表中的數據（所有商品）
      success(res){       
        that.setData({ //通過setData，將res中的數據存入到imgList數組當中
          imgList:res.data           
        }),
        console.log(res.data)   ///打印看一下   
      }
    })
})

mall.wxml：

		<block wx:for="{{imgList}}">	//渲染這個數組
			<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>	//顯示商品價錢
			</view>
		</block>
		<!-- 展示結束 -->

item就是小程序默認的前綴，後面的名字是你數組中拿到的屬性值的名字

接下來 傳參跳轉。
mall.wxml：

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

綁定一個onDetail方法，使用data-屬性名來綁定該商品的id給bzId

關於data- 官方文檔給的解釋很明白

我的理解就是綁定上一個參數

mall.js：

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

我們先來打印一下這個e

有這麼多的屬性 我們重點是這一條：

currentTarget中的dataset裏已經有一條我們綁定好的bzid，並且你點擊不同的商品，它的bzid都是不同的，是唯一的。

關於currentTarget：

關於dataset：

所以我們var一個變量來接收id

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

打印看一下：

imgId成功拿到值。

現在通過navigateTo跳轉頁面

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
    });
  }

現在是這個樣子了。 mall頁面配置完畢了

re-detail頁面：
js：

onLoad: function (e) {
    //指定id來加載對應數據
    console.log(e)
}

還是老樣子 先打印一下e

id已經拿到了

在Page下的data中設置三個數組

 data: {
    imgDetail:[],//全部信息
    prizeLink:[],//商品圖片鏈接，是數據表中的一個字段
    prizePrice:[]////商品價格，是數據表中的一個字段
  },

 onLoad: function (e) {
    //指定id來加載對應數據
    console.log(e)
    let that=this	//同樣的 異步請求，let一個that
    let a=e.id		//聲明一個a,存e中的id
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    wx.cloud.database().collection("prize").where({ //查詢數據表prize下id爲a所存放的id的信息
      _id:a
    }).get({
      success(res){
       // console.log(res)
        that.setData({ //給數據寫入數據
          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>

配置完畢。效果如下：