开发指南

API 文档

步骤3:搭建详情页

最近更新时间:2022-03-04 15:27:19

本文主要围绕详情页 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')
}
})

效果如下:

目录