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

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

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

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

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

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

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

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

那么我们需要在遍历时就获取到这个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:[]来存放数据

  1. onLoad: function (options) {
  2. var goodid = options.id;
  3. var gid = Number(goodid); //数据类型转化
  4. console.log(gid);
  5. const db = wx.cloud.database();
  6. db.collection('good').where({
  7. _id: gid, //查询good集合中字段_id为gid的值
  8. })
  9. .get({
  10. success: res => {
  11. this.setData({
  12. goodlist: res.data[0],
  13. })
  14. console.log("查询成功", res.data[0]);
  15. },
  16. fail(err) {
  17. console.log("查询失败", err);
  18. }
  19. })
  20. },

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

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

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

(0)

相关推荐