(14条消息) 微信小程序 / 四六文摘

前提：

类似一个商城界面，从云数据库拉取信息展示，用户点击某一个商品后，实现从数据库查询该商品的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>

配置完毕。效果如下：

(14条消息) 微信小程序

前提：

基本思路：

代码实现

相关推荐