小程序项目开发-商品详情跳转
介绍
本文讲解小程序的商品详情跳转
接口路径
商品列表跳转
要实现以上的商品详情跳转需要注意什么细节呢?
url传参
小程序支持url传参
| 参数名 | 说明 |
|---|---|
| query | 关键字 |
| cid | 分类id |
| pagenum | 页码 |
| pagesize | 页容量 |
- 使用的参数
cid 分类id
代码示例
<!-- 右侧商品内容 -->
<scroll-view scroll-top="scrollTop" scroll-y class="right_content">
<view class="goods_group"
wx:for="{{rightContent}}"
wx:for-index="index1"
wx:for-item="item1"
>
<view class="goods_title">
<text class="delimiter">/</text>
<text class="title">{{item1.cat_name}}</text>
<text class="delimiter">/</text>
</view>
<view class="goods_list">
<navigator
wx:for="{{item1.children}}"
wx:for-index="index2"
wx:for-item="item2"
wx:key="cat_id"
url="/pages/goods_list/index?cid={{item2.cat_id}}"
>
<image mode="widthFix" src="{{item2.cat_icon}}"></image>
<view class="goods_name">{{item2.cat_name}}</view>
</navigator>
</view>
</view>
</scroll-view>
- 重要代码段
url="/pages/goods_list/index?cid={{item2.cat_id}}"
- 讲解:使用了
分类id来辨别,鼠标点击的商品,应获取的数据.
返回示例
{
"message": {
"total": 10,
"pagenum": 1,
"goods": [
{
"goods_id": 57445,
"cat_id": 9,
"goods_name": "创维（Skyworth）65V9E 65英寸25核4K HDR高清智能电视",
"goods_price": 6499,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "",
"goods_small_logo": "",
"add_time": 1516663280,
"upd_time": 1516663280,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
}
]
},
"meta": {
"msg": "获取成功",
"status": 200
}
}
返回参数说明
| 参数名 | 参数说明 |
|---|---|
| total | 总条数 |
| pagenum | 当前页数 |
| goods_id | 商品ID |
| cat_id | 分类ID |
| goods_name | 商品名称 |
| goods_price | 商品价格 |
| goods_number | 商品数量 |
| goods_weight | 商品重量 |
| goods_big_logo | 商品大图标 |
| goods_small_logo | 商品小图标 |
| add_time | 商品添加时间 |
| upd_time | 商品更新时间 |
| hot_mumber | 热门商品数 |
| cat_one_id | 所属一级分类 |
| cat_two_id | 所属二级分类 |
| cat_three_id | 所属三级分类 |
小知识点
- 在进行商品详情的配置跳转后,通过小程序项目开发工具的左下角可以看到我们的项目参数.
第二步:设定商品详情的js,来获取到cid的参数
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
console.log(options);
},
- 代码讲解
其实这里的参数
options就是我们点击商品跳转详情的商品参数
- 打印结果
微信开发者工具设置
- 编译模式设置注意
- 设置启动参数
- 以上操作可以极大地方便我们开发,提高效率
- 我们在每次更新小程序代码时,就可以在当前页面从新加载.不用重新跳回主页
- 因为我们不仅仅只有一个商品,所以我们要在商品列表设定启动参数,才会跳转到我们设定的商品详情页中
总结
- 本文讲解小程序的
商品详情跳转时的注意事项.- 还有一些细节方面的问题
- 借助
微信开发者工具- 我们可以达到高效便捷的开发速率