微信标准版交易组件使用教程

微信推出了一个标准版交易组件，大大降低了开发一个商城小程序的成本。降低到了什么程度呢？只要要求不太高的话，一个前端工程师一天就能怼出一个看着还行的商城小程序。那具体怎样快速开发一个商城小程序呢？

开通标准版交易组件

1.注册小程序

做商城小程序首先得有一个小程序，所以需要先注册一个小程序，当然，有现成的小程序也可以直接用。这里唯一的问题是小程序必须是企业认证的，目前只有企业认证的小程序才能开通标准版交易组件。对于绝大多数普通开发者而言，我们都是没有企业资质的，这时候可以用自己工作公司的小程序来开通标准交易组件学习。

2.登录微信公众平台，开通标准版交易组件

在微信公众平台登录小程序，选择标准版交易组件，并申请开通功能，进入审核流程。

3.完成开店任务，完成标准版交易组件的开通

审核完成后，在微信公众平台中登录小程序，选择标准版交易组件，点击“去管理”，按照开店流程完成开店任务。

完成以上三步的话，我们会得到一个商城管理后台，可以在上面添加商品、管理订单、管理售后，看起来五脏俱全了，接下来就得接入组件了。

商城小程序几个关键模块

在讲如何开发商城小程序之前，咱们必须先了解下商城的几个关键模块。

商品

商城必须有后台能添加、上架、下架商品。小程序里也必须有商品详情页，展示商品详情。商品模块是任何一个商城都需要的。

购物车

一般的商城都会有购物车功能（拼多多这种鼓励用户即时下单的平台除外）。购物车是用来存用户选中商品的，用户可以像逛商场一般，挑选很多商品放到购物车里，然后再统一支付下单。因此购物车也是一个很重要的模块。

订单

用户提交所有购物车选中的商品时会生成一个订单；用户单独选中一个商品即时购买也会形成一个订单。订单是用户支付的最小单位，也是发货的最小单位。

支付

这个不用说，任何商城都是需要用户付钱的，支付的功能至关重要。

售后

用户买了东西，后悔了，要退款，这时售后就是无法避免的一个模块。很多商城退货率都不低，因此售后也是一个很重要的模块。

以上几个模块几乎做任何商城都是需要的，而且这几个模块单独开发的话工作量非常大，涉及的细节也非常多。微信把这些模块抽离了出来，做成了交易组件，我们在小程序里只需要引用这些组件，就能很快完成一个具有基础功能的商城小程序。言归正传，下面正式讲怎么怼代码，你会发现，代码量少得惊人。

小程序中引入组件

首先，需要引入并初始化交易组件。

{  "plugins": {    "mini-shop-plugin": {    "version": "latest",    "provider": "wx34345ae5855f892d"    }  }}

const miniShopPlugin = requirePlugin('mini-shop-plugin');App({  onLaunch() {        miniShopPlugin.initApp(this, wx);    },});

快速实现关键模块

引入组件之后，后面在小程序中使用起来就很简单了。要点很简单：携带合适的参数跳转至交易组件的页面。下面举例说明：为了展示商品，在首页添加这样一行代码：

<navigator url="plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=31831738">  <image class="img" mode="widthFix" src="[https://bytemall.0-1-byte.com/bytemall-app/img/index-4.jpeg](https://bytemall.0-1-byte.com/bytemall-app/img/index-4.jpeg)" /></navigator>

这样就能跳转至 productId 为 31831738 的商品详情页了。这个 productId 是在小商店后台添加商品后生成的。也就是说只需要一个 navigator 组件，跳转链接指定商品 ID 即可。添加了这几行代码，用户在小程序中点击图片之后就会走进商品详情页，可以在里面加购物车、支付，下单结束之后，钱就支付到小商店绑定的商户号中去了，是不是很神奇？！当然上面这段代码太简单，只是实现了最简单的商城功能，很多功能还不完备，至少有以下几个问题。

支付完成的订单怎么看？

这个解决起来很简单，在某个页面加一个订单的入口即可。参考项目代码。

若用户只是加了购物车，而没有支付，怎样找到购物车？

这个也好解决，把商城下面一个 tab 做成购物车，用户点击 tab 的时候跳转至交易组件购物车的页面。参考项目代码。

最后，商品 ID 是写死的，怎样动态跳转至不同商品？

要动态跳转至不同商品，必须要后端控制不同的商品 ID，那就必须要先能将小商店的商品信息同步至后端，恰好，小商店支持这个功能，我目前的版本已经将小商店的商品同步至项目后台了。但是具体怎么动态化，这里其实有比较大的工作量，欢迎关注我，后续版本会完成。

我的项目

体验地址：体验

Github：GitHub

Gitee：Gitee