微信标准版交易组件使用入门

1,861 阅读5分钟

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

开通标准版交易组件

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