- 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}`, });
示例效果图如下:

(扫码添加qq号:2067876620)
(如有网络开发项目需求欢迎联系咨询)
目前,微信小商店商品详情组件页面仍在完善中,后续将为您提供丰富、全面的关于微信小商店商品详情组件的详细内容。微商城小程序系统定制小编将持续收集、更新,补充完善信息 。
—— 网站推荐 ——
深圳蚂蚁网络网站建设公司提供,系统定制,微信开发、小程序定制、微商城开发、网站建设、网站排名优化推广等互联网项目定制开发服务。深圳蚂蚁网络声明:如发现内容存在版权问题,烦请提供相关信息发邮件至3310459304@qq.com,我们将及时沟通与处理。本站内容均来源于网络,涉及言论、版权与本站无关。
所属分类:系统定制