(14条消息) 小程序云开发库详情页跳转（云数据库中调取数据） / 四六文摘

最近在尝试小程序的云开发，弄了很久查了很多博客才总算把详情页的跳转弄出来了。因为是从云数据库中调取数据，所以真的尝试了很多方法，希望能够分享给那些也同样遇到问题的朋友。

首先，肯定是有准备两个页面的，一个是详情页（detail),一个是你的主页面(index)。在主页面里，你需要绑定一个tap函数，为的是能够获取到你所点的集合中的id。下面的代码段是来自index.js,获取该数据集合中所有的数据，显示在index页面上。这里的list是你获取到的元素保留的列表，注意在index.js中data{ list:[] }；

简单说明一下，在云数据库中的good集合（也就是数据库中的表）的字段有_id:(Number类型)、imglink、price等等。

onLoad: function (options) {
const db = wx.cloud.database();
　　db.collection('good').get().then(res => {//good是数据库里面集合的名称
　　　　console.log(res); //如果更新数据成功则输出成功信息
　　　　var that = this;
　　　　that.setData({
　　　　　　list: res.data
　　　　});
　　　　console.log(res.data);
　　}).catch(err => {
　　　　console.log(err); //如果更新数据失败则输出失败信息
　　})
},

下面这个函数就是index.js中的tap函数，此处为onGoodTap。

为此查了一下event.currentTarget.dataset。这个是用来取值的，可以说用data-goodid=’{{item._id}}'绑定了item._id（这个_id就是集合中的字段名）后，在onGoodTap函数中获取并作为参数传递给detail页面中。其中data-是固定前缀,data-goodid中的goodid你也可以改为其他名字。注意data-id 绑定的变量名不能有大写(大写会自动转成小写)。

onGoodTap: function (event) {
var idx =event.currentTarget.dataset.goodid;
//console.log(idx); //在控制台中打印出来检验
wx.navigateTo({
url: '../detail/detail?id='+idx,
})
},

那么我们需要在遍历时就获取到这个id（在index.wxml中）。catchtap="",也就是你自己设的一个绑定在tap上的函数啦，item可以理解为list中每一个遍历出来的元素。

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

好了，完成以上步骤你应该是能够在控制台打印出你获取的id了，接下来看一下detail.js的部分

在detail.js中可以检验一下是不是真的拿到了参数

onload:functions(options)的options作为参数，都可以自定义的。

比如我选中其中一个列表，它的id是3，如果console.log(options),options就是object类型，然后…我还去查怎么类型转换…其实提示很明显{id:“3”}，有点像列表中套列表，你需要获取options.id就可以取到这个值。

emm,因为前面提到我表里的_id的数据类型是Number,于是我做了个类型转换，string类型转为Number类型。

如果仅仅是获取了res.data,可以在控制台输出res.data就发现其实还没有拿到那个数据呐

提示也很明显，res.data[0]获取该项的所有字段，也方便你后期取它的各种属性

我的想法就是获取id后在数据库里查找满足_id为获取id的那一行数据，最后获取它的各种属性即可。

注意同样在detail.js的data中命名一个列表比如goodlist:[]来存放数据

onLoad: function (options) {
var goodid = options.id;
var gid = Number(goodid); //数据类型转化
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>

啊捣鼓了两三天才解决了这个问题！

(14条消息) 小程序云开发库详情页跳转（云数据库中调取数据）

相关推荐