云开发 CloudBase
文档捉虫大赛：人工智能与机器学习专题> HOT
文档中心 > 云开发 CloudBase > 示例教程 > 小程序 > 商店小程序开发实践 > 步骤3：搭建详情页

步骤3：搭建详情页

最近更新时间：2023-01-12 10:18:38

我的收藏

本页目录：

本文主要围绕详情页 detail.js 进行讲解，更多详情页代码细节可参见 detail.js 配置 和 前端页面 detail.wxml。

操作步骤

步骤1：设置跳转

在 index.wxml 处使用 navigator 导航组件跳转到商品详情页。
  <navigator hover-class='hcls' class='goods' url="/pages/detail/detail?id={{item._id}}">


步骤2：获取点击商品信息

根据跳转详情页传入的商品 ID，在商品数据库中获取商品的详细信息，同样是调用 wx.cloud.database().collection()，再调用 doc() 通过传入 ID 过滤商品。
const db = wx.cloud.database()
const goods_col = db.collection('goods')
Page({
  data : {
    detail : {}
  },
  onLoad(options){
    let { id } =options
    console.log('id',id)
    this.loadDetailData(id)
  },
  //加载数据详情
  async loadDetailData(id){
    //拿到数据库商品
    let ins = goods_col.doc(id)
    //累计
    await ins.update({
      data: {
        count : db.command.inc(1)
        //log('123')
      }
    })
    //获取
    let res =await ins.get()
    //赋值
    this.setData({
      detail : res.data
    })
  }
})


步骤3：修改商品访问量

通过从首页传入的 ID 过滤出商品，然后调用 update 修改 count 的值，使其每次被访问时累加一。
    //累计
    await ins.update({
      data: {
        count : db.command.inc(1)
        //log('123')
      }
    })

效果如下：


中国站