Wechat launched a standard version of the transaction component, greatly reducing the cost of developing a mall mini program. To what extent? As long as the requirements are not too high, a front-end engineer can find a mall applet that looks good in a day. That specific how to quickly develop a mall small procedures?

Open the standard version of the trading component

1. Register applets

Do mall small program first have a small program, so you need to register a small program, of course, there is a ready-made small program can also be directly used. The only problem here is that applets must be enterprise certified, and currently only enterprise certified applets can open the standard version of the transaction component. For the vast majority of ordinary developers, we are not enterprise qualified, this time can use their own work company applet to open the standard trading component to learn.

2. Log in to the wechat public platform and open the standard version of the transaction component

Log in the mini program on the wechat public platform, select the standard version of the trading component, and apply for opening the function to enter the review process.

3. Complete the task of opening the shop, and complete the opening of the trading component of the standard version

After the audit is completed, log in the mini program on the wechat public platform, select the standard version of the transaction component, click “To manage”, and complete the task of opening a store according to the process of opening a store.

If we complete the above three steps, we will get a mall management background, which can add goods, manage orders, manage after sales. It looks like the five organs are complete, and then we have to access the components.

Mall small procedures several key modules

Before talking about how to develop small mall procedures, we must first understand several key modules of the mall.

goods

The mall must have a background to add, put on, take off goods. The miniprogram must also have a product details page, showing the product details. The commodity module is needed by any mall.

The shopping cart

Most malls have shopping carts (with the exception of platforms like Pinduoduo, which encourage users to place orders in real time). Shopping cart is used to store the selected goods, the user can like shopping mall, select a lot of goods into the cart, and then unified payment order. So the shopping cart is also an important module.

The order

An order is generated when the user submits all cart selected items; An order is also formed when a user selects an item individually and buys it instantly. An order is the smallest unit of payment by the user, and the smallest unit of delivery.

pay

It goes without saying that any mall needs users to pay, and the function of payment is crucial.

after-sales

Users buy things, regret, to refund, then the after-sales is an unavoidable module. Many mall return rate is not low, so after-sales is also a very important module.

The above several modules do almost any mall is needed, and the development of these modules alone, the workload is very large, the details involved are also very much. Wechat pulled these modules out, made a transaction components, we only need to reference these components in the small program, can quickly complete a mall with basic functions of the small program. Without further ado, let’s talk about how to play with code, and you’ll find that the amount of code is surprisingly small.

Introducing components into applets

First, you need to introduce and initialize the transaction component.

{
	"plugins": {
		"mini-shop-plugin": {
		"version": "latest",
		"provider": "wx34345ae5855f892d"
		}
	}
}
Copy the code
const miniShopPlugin = requirePlugin('mini-shop-plugin'); App({ onLaunch() { miniShopPlugin.initApp(this, wx); }});Copy the code

Fast implementation of key modules

Once you introduce components, it’s easy to use them later in your applet. The point is simple: jump to the trading component’s page with the appropriate parameters. Here’s an example: To display a product, add a line like this on the home page:

<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>Copy the code

This jumps to the product details page where productId is 31831738. This productId is generated after an item is added in the background of a small store. This means that all you need is a Navigator component with the jump link specifying the item ID. With these few lines of code, the user clicks on the picture in the mini program and goes to the product details page, where they can add a shopping cart and pay. After placing an order, the money is paid to the merchant number bound to the small store. Isn’t that amazing? ! Of course, the above code is too simple, just to achieve the most simple mall function, many functions are not complete, at least the following problems.

What about paid completed orders?

The solution is as simple as adding an order entry to a page. Refer to the project code.

How do you find a shopping cart if the user just adds it without paying?

This can also be solved by making a TAB under the mall into a shopping cart. When users click the TAB, they will jump to the page of the shopping cart of the transaction component. Refer to the project code.

Finally, the item ID is written dead, how to dynamically jump to different items?

In order to dynamically jump to different items, the backend must control different item ids, which must first be able to synchronize the product information of the small store to the backend. Incidentally, the small store supports this function, and my current version already synchronizes the product information of the small store to the project background. However, there is a lot of work to be done here. Please follow me and I will finish it in the later version.

project

If you want to know how to use the wechat standard version of the transaction component, you can refer to my mall project.

Experience address: Experience

Making: making

Gitee: Gitee