The author has been concerned about cloud development for a long time, recently began to do before a group purchase small program reconstruction and migration to the cloud development, while the source code open source, welcome interested friends to exchange.

  • Code warehouse
  • Print screen
  • The case shows

Technology selection

Small program

  • The underlying framework: Taro 3.0 (React)
  • Interface: Vant
  • State machine: SWR

Management background interface

  • The underlying framework: React
  • Interface: eui
  • State machine: SWR

The service side

  • CloudBase cloud development

Taro is now in the 3.x era and allows developers to develop with full React, Vue and other frameworks. As a heavy React user, I naturally chose Taro among many frameworks (and then Kbone).

Because the development of the shopping class small program so will choose a praise open source Vant control library.

In the aspect of State Machines, a more lightweight Hook scheme is chosen. Two libraries React – Query and SWR are investigated in Hook scheme. Generally speaking, SWR is more lightweight and convenient.

In terms of control library at the management end, most of the domestic React system will choose ANTD control library. To tell the truth, the author is an early adoptee and tried Microsoft’s open source FabricUI library in the last open source project (Lucky_Bilibili_Web). This time, I’m looking at the Elastic open source EUI. After I use it, I feel very experienced! It is too convenient to develop some pure tool applications with this control library.

At the end of this article, I will give you a picture 1 of using this control library as a tool application, which is completely combined with EUI controls. You can have a feel for it.

Server side, the author concerned about Serverless for a long time, before is a lot of foreign resources, but also very greedy Google’s Firebase. The author before the development of small programs are self-purchase server, self-built server, but also need to daily server operation and maintenance, trouble and effort. Thank you very much for joining Tencent Cloud in the construction of Serverless ecology, so that domestic developers can also use Serverless services without obstacles. Cloudbase cloud development team has repackaged Serverless, reducing the complexity of Serverless learning, and achieving out-of-the-box, one-button deployment.

Database design

Product, interface display related tables

User, order, payment related tables

Administrator related list

Key technical points

The author also encountered a variety of problems and difficulties in the development of this small program. I consulted a lot of information in the community and did a variety of tests and found the answer. I really want to put all the summaries here once. Talk is cheap,Show me the code. After that, there will be some technical realization schemes summarized by the author and sent separately with private goods.

Small program related:

Use the Zan Vant control library in Taro

See the source code:

/mini/src/app.config.ts
/mini/config/index.js   //line 51
/mini/config/index.js   //line 16

Markdown renders in the applet

See the source code

/mini/src/components/wemark
/mini/config/index.js   //line 74
/mini/src/hooks/useProducts.ts   //line 40
/mini/src/lib/b64.ts
/mini/src/pages/detail/detail.config.ts
/mini/src/pages/detail/detail.tsx   //line 165
/mini/global.d.ts

pay

See the source code

/mini/src/pages/order/detail/detail.tsx     //line 71

/cloud/functions/pay
/cloud/functions/pay_cb

Taro uses CSS in JS

See the source code

/mini/config/index.js   //line 39
/mini/src/conponents/product-list/index.tsx   //line 10
/mini/linaria.config.js
/mini/babel.config.js

Custom Nav with Tabber

See the source code

/mini/src/app.config.ts    //line 41
/mini/src/app.config.ts    //line 95
/mini/src/components/nav
/mini/src/components/tabbar

CI CD continuous integration

See the source code

/mini/wx_ci.js

Manage background related

Subject switch

See the source code

/manage/src/theme/niceup
/manage/src/lib/theme.ts

Integrated CloudBase

See the source code

/manage/src/lib/tcb.ts

The management side realizes the refund

Note: Refunds in the small process cloud development only support the mobile phone terminal to make the request. I made a modification here and realized the refund in the form of HTTP API

See the source code

/manage/src/lib/tcb.ts   //line 18
/manage/src/hook/useOrderMuation.ts   //line 81

/cloud/functions/mini-proxy
/cloud/functions/refund

Statistical analysis of data

See the source code

/manage/src/routes/index.tsx

/cloud/functions/aggregate-psn
/cloud/functions/aggregate-sales

EUI implements convenient operations similar to ANTD Form

Note: Here is my private product in the source code I left a special Ext folder, and the form control of EUI for the second encapsulation. The core library used is rc-field-form, thanks to the original author

See the source code

/manage/src/routes/ext
/manage/src/components/formList
/manage/src/components/formRow
/manage/src/components/formControls

Subscribe to news

See the source code

/cloud/functions/subscribe-message
/manage/src/hook/useMessageMuation.ts

Cloud development custom login, custom permissions, initialization data

See the source code

/cloudbaserc.json //line 8
/cloudbaserc.json //line 18
/cloudbaserc.json //line 192

/cloud/functions/db-init
/cloud/functions/auth

/manage/src/hook/useUser.ts   //line 33

The above is a number of key technical points in the source code annotation.

A key deployment

Finally, you are welcome to try deploying this project to Cloud Development with one click.

There are a number of environment variables that are used in the deployment process. See this article for information on how to obtain the environment variables.

If you want small programs available, the cloud development environment must be a small program opened cloud development environment.

If the deployment fails, please check whether the pay-as-you-go mode has been opened.

When all the variables are ready, click the button below to deploy it

The management end:

Small program:

The appendix

  • The user manual
  • Print screen
  • The case shows

  1. The tool class application developed with EUI is shown in the figure ↩