实现获取产品具体数据的效果,从首页到详情页的关键代码解析

2024-06-08
来源:网络整理

今天我们要实现如下的效果,进入详情页,获取商品的具体数据。本文请求的数据都是本地的,实际开发都是通过ajax来请求服务端中的商品数据,为了避免业务代码扰乱音视频,只截取关键代码~1、首先我们需要两个页面,一个首页(也就是商品列表页),一个详情页(商品具体的数据页)。首页的wxml代码:下面是传递id给详情页的例子,这样详情页就知道我们需要加载哪个商品了,你也可以传递下标,但是我感觉还是id更靠谱一些。(id是你商品列表里的数据,在渲染列表的时候获取的)```2、在相应的js文件中添加跳转函数:```: () { wx.({url: '../book/?id=123' //传递book的id参数})}```3、 获取书籍详情页js文件中的参数,并展示对应的书籍信息:```: () { // 获取传递的书籍id参数 var = .id // 根据书籍id获取书籍信息并展示在页面上// ...}```4、在app.json文件中配置书籍详情页的路由路径:```{ "": ["/book/list","/book/" ]}```其中/book/list为书籍列表页的路径,/book/为书籍详情页的路径,通过配置路由路径,小程序就能知道应该跳转到哪个页面。

分享