微信小商店商品详情组件

A+

商城小程序系统定制开发小编今天给大家整理了一篇有关《微信小商店商品详情组件》的相关文章，更多详细内容，欢迎继续往下阅读，下面就由小编给大家分享！

微信小商店商品详情组件

组件接口

名称	功能说明
商品详情productDetail	用户点击相关商品后，跳转至小商店商品详情页
购物袋shoppingCart	控制用户跳转到小商店购物袋页
订单列表orderList	控制用户跳转到小商店订单列表页，默认激活“全部”标签，展示全部订单数据，可设置为激活“待付款”、“待收货”、“退款/售后”标签
订单详情orderDetail	控制用户跳转到小商店订单详情页中
售后单详情refundDetail	控制用户跳转到小商店售后单详情页中

下面均用navigateTo 方法示例如何跳到其他页面

一、商品详情组件

（注：若要使用该组件，需要在项目中先引入小商品组件）

组件说明：用户点击小程序货架中的商品，将会按照开发者的设定，跳转至对应的小商店商品详情页面中。

const productId = [商品id] // 填写具体的商品Id

    wx.navigateTo({

              url: 'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}',

     });

示例效果图如下：

自定义店铺/首页按钮

因小商店的商品详情等页面中，有跳转到店铺及首页的按钮，组件提供了自定义跳转的方式。

在小程序的app.js中添加以下代码：

const miniShopPlugin = requirePlugin('mini-shop-plugin');

miniShopPlugin.initHomePath('your home page path');   //  比如'/pages/index/index'

二、购物袋组件

（注：若要使用该组件，需要在项目中先引入小商品组件）

组件说明：用户点击购物袋，将会按照开发者的设定，跳转至对应的小商店购物袋页面中。

wx.navigateTo({

          url: 'plugin-private://wx34345ae5855f892d/pages/shoppingCart/shoppingCart',

});

示例效果图如下：

三、订单列表组件

（注：若要使用该组件，需要在项目中先引入小商品组件）

组件说明：用户点击订单列表页，将会按照开发者的设定，跳转至小商店订单列表页面中。

// 跳转到订单页，默认激活“全部”标签，展示全部订单数据

     wx.navigateTo({

       url: 'plugin-private://wx34345ae5855f892d/pages/orderList/orderList',

     });



// 跳转到订单页，激活“待付款”标签

    const tabId = 'pendingPay';

     wx.navigateTo({

       url: `plugin-private://wx34345ae5855f892d/pages/orderList/orderList?tabId=${tabId}`,

     });

订单列表: tabId有效值如下：

传值	标签	数据
pendingPay	待付款	待付款订单
pendingRecevied	待收货	待发货/待收货状态的订单
afterSale	退款/售后	所有售后单

示例效果图如下：

四、订单详情组件

（注：若要使用该组件，需要在项目中先引入小商品组件）

组件说明：用户点击订单详情时，将会按照开发者的设定，跳转至对应的小商店商品订单详情页面中。

const orderId = [订单Id]; // 对应的订单Id

    wx.navigateTo({

       url: `plugin-private://wx34345ae5855f892d/pages/orderDetail/orderDetail?orderId=${orderId}`,

    });

示例效果图如下：

五、售后单详情组件

（注：若要使用该组件，需要在项目中先引入小商品组件）

组件说明：用户点击售后，将会按照开发者的设定，跳转至对应的小商店商品售后页面中。

const orderId = [售后单Id]; // 售后单Id

        wx.navigateTo({

          url: `plugin-private://wx34345ae5855f892d/pages/refundDetail/refundDetail?orderId=${orderId}`,

        });

示例效果图如下：