组件接口

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

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

一、商品详情组件

(注:若要使用该组件,需要在项目中先引入小商品组件)

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

  1. const productId = [商品id] // 填写具体的商品Id
  2. wx.navigateTo({
  3. url: 'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}',
  4. });

示例效果图如下:

组件接口 - 图1

自定义店铺/首页按钮

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

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

  1. const miniShopPlugin = requirePlugin('mini-shop-plugin');
  2. miniShopPlugin.initHomePath('your home page path'); // 比如'/pages/index/index'

二、购物袋组件

(注:若要使用该组件,需要在项目中先引入小商品组件)

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

  1. wx.navigateTo({
  2. url: 'plugin-private://wx34345ae5855f892d/pages/shoppingCart/shoppingCart',
  3. });

示例效果图如下:

组件接口 - 图2

三、订单列表组件

(注:若要使用该组件,需要在项目中先引入小商品组件)

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

  1. // 跳转到订单页,默认激活“全部”标签,展示全部订单数据
  2. wx.navigateTo({
  3. url: 'plugin-private://wx34345ae5855f892d/pages/orderList/orderList',
  4. });
  5. // 跳转到订单页,激活“待付款”标签
  6. const tabId = 'pendingPay';
  7. wx.navigateTo({
  8. url: `plugin-private://wx34345ae5855f892d/pages/orderList/orderList?tabId=${tabId}`,
  9. });

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

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

示例效果图如下:

组件接口 - 图3

四、订单详情组件

(注:若要使用该组件,需要在项目中先引入小商品组件)

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

  1. const orderId = [订单Id]; // 对应的订单Id
  2. wx.navigateTo({
  3. url: `plugin-private://wx34345ae5855f892d/pages/orderDetail/orderDetail?orderId=${orderId}`,
  4. });

示例效果图如下:

组件接口 - 图4

五、售后单详情组件

(注:若要使用该组件,需要在项目中先引入小商品组件)

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

  1. const orderId = [售后单Id]; // 售后单Id
  2. wx.navigateTo({
  3. url: `plugin-private://wx34345ae5855f892d/pages/refundDetail/refundDetail?orderId=${orderId}`,
  4. });

示例效果图如下:

组件接口 - 图5