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

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

介绍

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

商品列表跳转

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

url传参

小程序支持url传参

• 使用的参数

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
    }
}

返回参数说明

小知识点

• 在进行商品详情的配置跳转后,通过小程序项目开发工具的左下角可以看到我们的项目参数.
  

第二步:设定商品详情的js,来获取到cid的参数

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    console.log(options);
  },
  

• 代码讲解

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

• 打印结果

微信开发者工具设置

• 编译模式设置注意

• 设置启动参数
  

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

总结

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