您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

微信小程序项目开发知识点

小程序项目开发-商品详情跳转

    • 介绍
    • 商品列表跳转
    • url传参
      • 代码示例
      • 返回示例
      • 返回参数说明
      • 小知识点
    • 第二步:设定商品详情的js,来获取到cid的参数
    • 微信开发者工具设置
    • 总结

介绍

本文讲解小程序的商品详情跳转
接口路径

商品列表跳转

在这里插入图片描述

要实现以上的商品详情跳转需要注意什么细节呢?

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的参数

在这里插入图片描述

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
  },
  
  • 代码讲解

其实这里的参数 options 就是我们点击商品跳转详情的商品参数

  • 打印结果

在这里插入图片描述

微信开发者工具设置

  • 编译模式设置注意

在这里插入图片描述

  • 设置启动参数
    在这里插入图片描述
  1. 以上操作可以极大地方便我们开发,提高效率
  2. 我们在每次更新小程序代码时,就可以在当前页面从新加载.不用重新跳回主页
  3. 因为我们不仅仅只有一个商品,所以我们要在商品列表设定启动参数,才会跳转到我们设定的商品详情页中

总结

  • 本文讲解小程序的 商品详情 跳转时的注意事项.
  • 还有一些细节方面的问题
  • 借助微信开发者工具
  • 我们可以达到高效便捷的开发速率

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进