微信小程序点击商品获取商品页详细信息代码
时间: 2024-01-12 21:03:21 浏览: 31
以下是一个简单的微信小程序商品详情页的代码示例:
1.在 wxml 文件中添加商品详情页的布局
```html
<view class="detail">
<image class="detail-img" src="{{goods.imgUrl}}"></image>
<view class="detail-name">{{goods.name}}</view>
<view class="detail-price">¥{{goods.price}}</view>
<view class="detail-desc">{{goods.desc}}</view>
</view>
```
2.在 js 文件中添加商品数据和商品详情页的点击事件
```javascript
Page({
data: {
goods: {
name: '商品名称',
price: 99.99,
desc: '商品描述',
imgUrl: 'https://example.com/goods.jpg'
}
},
onLoad: function (options) {
// 获取商品 id 参数并从服务器获取商品数据
const goodsId = options.id;
// TODO: 从服务器获取商品数据并更新 this.data.goods
},
onShowDetail: function () {
// 点击商品详情页时触发的事件
wx.navigateTo({
url: '/pages/goods/detail?id=' + this.data.goods.id
})
}
})
```
在以上代码示例中,我们在 `data` 中定义了商品数据 `goods`,在 `onLoad` 方法中根据 `options` 参数从服务器获取商品数据并更新了 `goods`,在 `wxml` 文件中渲染了商品详情页的布局。在 `onShowDetail` 方法中,我们使用 `wx.navigateTo` 方法跳转到商品详情页,并在跳转链接中传递了商品 id 参数。在商品详情页的 js 文件中,我们可以根据商品 id 参数从服务器获取商品详情数据并渲染到页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)