标签：知识点 goods 微信 程序 cat 商品 参数 跳转 id
小程序项目开发-商品详情跳转
介绍
本文讲解小程序的商品详情跳转
接口路径
商品列表跳转
要实现以上的商品详情跳转需要注意什么细节呢?
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就是我们点击商品跳转详情的商品参数
- 打印结果
微信开发者工具设置
- 编译模式设置注意
- 设置启动参数
- 以上操作可以极大地方便我们开发,提高效率
- 我们在每次更新小程序代码时,就可以在当前页面从新加载.不用重新跳回主页
- 因为我们不仅仅只有一个商品,所以我们要在商品列表设定启动参数,才会跳转到我们设定的商品详情页中
总结
- 本文讲解小程序的
商品详情跳转时的注意事项.- 还有一些细节方面的问题
- 借助
微信开发者工具- 我们可以达到高效便捷的开发速率
标签：知识点,goods,微信,程序,cat,商品,参数,跳转,id 来源： https://blog.csdn.net/yuan_xiaoxin/article/details/118311274
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。