前提：类似一个商城界面，从云数据库拉取信息展示，用户点击某一个商品后，实现从数据库查询该商品的id，实现跳转。商城界面展示 (mall)详情界面展示 （re-datail）数据库：基本思路：mall：1.查询数据表所有商品的信息，放到商城界面 mall.wxml的 imgList 数组里2.在商城界面 mall.wxml 上通过wx-for渲染imgList数组，显示需要的数据，通过data-*为商品dataset id3.在跳转函数中获取通过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一个变量来接收idonDetail: 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)
}
还是老样子 先打印一下eid已经拿到了在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>
配置完毕。效果如下：}