preview

Experience address: bytemall

No more words, first effect diagram, support goods -> shopping cart -> payment -> after sale, support the whole transaction process

preface

This article mainly introduces the technology stack used in the app, including Vant syndrome, BeautyWe, miniprogram-API-promise, transaction components, etc. Based on this knowledge, can quickly build a small mall procedures.

Vant Weapp

introduce

Vant is an open source mobile component library of the front end team. The project uses the small program version of wechat. The component library provides several business components commonly used in the development of the mall, such as commodity cards, order submission bar, commodity navigation, and so on. Friends who need it can view it by themselves.

use

/ / 1. Install
npm i @vant/weapp -S --production

// 2. Modify app.jsonWill the app. In json"style": "v2"Get rid of// 3. Modify project.config.json{..."setting": {..."packNpmManually": true."packNpmRelationList": [{"packageJsonPath": "./package.json"."miniprogramNpmDistDir": "./miniprogram/"}}}]// 4. Build the NPM packageOpen wechat developer tools, click Tools -> Build NPM, and check the use NPM module option. After the build is complete, you can introduce components.Copy the code

See the official document: Get Started

miniprogram-api-promise

introduce

Wechat official recommended extension micro channel small program API tools, mainly used for API Promise.

Example: Code

/ / before
wx.login({
  success (res) {
    // do something}})/ / after expansion
getApp().wxp.login().then(res= > {
	// do something
})
Copy the code

use

/ / 1. Install
npm install --save miniprogram-api-promise

// 2. Build the NPM packageOpen wechat developer tools, click Tools -> Build NPM, and check the use NPM module option. After the build is complete, you can introduce components.Copy the code

BeautyWe

introduce

BeautyWe is a set of enterprise-level development paradigm focused on wechat small programs, using it can make your code more concise, beautiful **. ** This project is mainly used by the state machine plug-in, for details, please see my other article wechat small program app.onLaunch and page. OnLoad asynchronous problem.

use

/ / 1. Install
npm install --save beautywe

// 2. Build the NPM packageOpen wechat developer tools, click Tools -> Build NPM, and check the use NPM module option. After the build is complete, you can introduce components.Copy the code

Transaction component

Standard edition trading component

Transaction components are divided into standard version and custom version, and the standard version is used in this project. I do not elaborate here, interested friends can go to the official documents, to understand.

After calling this component in the small program, it can realize the complete transaction ability of commodity display, order purchase, order management and so on. At the same time, merchants can also carry out the management of goods, orders, marketing activities and other modules in the supporting management background. Wechat official will continue to upgrade the above functions.

Transaction component function

  • In the video number, public number and other scenes to achieve the display of goods and goods and other functions
  • Small program directly with complete trading ability and, and by the official supporting management background continue to upgrade
  • The order is automatically synchronized to the “small program order” function display

The Standard Trading component currently consists of two parts:

  • Shopping components: including commodity details page, shopping bag, commodity settlement to purchase complete link page and functions.
  • Order components: including all orders, payment to be made, goods to be received, refund/after sale, order details page, after sale details page and functions.

It is based on the powerful characteristics of the transaction component that the shopping process of this project can be set up so quickly.

use

// 1. Apply to use componentsIn the applet background, function -> transaction component, apply to open// 2. Add the plugin to the project app.json
"plugins": {
    "mini-shop-plugin": {
    "version": "latest"."provider": "wx34345ae5855f892d"}},// initialize the transaction component in app.js
 const miniShopPlugin = requirePlugin('mini-shop-plugin');
App({
  onLaunch() {
    miniShopPlugin.initApp(this, wx); }});Copy the code

feeling

Since the micro channel for enterprises, individuals, individuals three types of shop fully open micro channel small stores, one key to create a small store of their own micro channel has become a reality. However, this kind of one-button generated small store has the problem of single template and lack of personalization, so wechat has launched the transaction component to meet the needs of some merchants for customization and personalization. Based on this, is bound to the current overall wechat small program mall development market impact.