Recently, small program cloud development has officially supported CMS content management system (review here), the following simple mall project as an example to help developers better understand and apply this ability.

Resources to prepare

Before building a mall, you need to understand:

Technology stack

  • Cloud Development CloudBase: cloud native integrated application development platform
  • Taro: A multi-terminal development solution that follows the React syntax specification

The development tools

You are advised to install it in advance

  • Wechat developer tools
  • The Node LTS versions
  • VS Code editor
  • CloudBase VS Code plug-in

Demand analysis

Simple mall features include:

  • Commodity list and order: display commodity information and create order
  • Order list: Displays the order list

Multi-terminal support – cross-platform

  • Small program
  • Web

The configuration process

1. Open cloud development in wechat developer tools and choose to pay by volume

If your environment is pre-paid, go to your Settings and switch to pay-as-you-go.

2. Install the CMS

(1) In the latest edition of wechat Development Tool, click the Cloud Development Console, and in the top Tab, click “More” – “Content Management”.

(2) Click “Open”, check “Agree”, and click “OK”.

(3) To open content management, fill in the administrator account. After filling in the account, click “OK” to complete.

(4) It will take some time to open and expand, please wait patiently.

(5) After completion, click “more” – “Content Management”, you can see the entrance of content management and related information. Click the access address, you can perform related configuration of content management in the pop-up window.

3. Log in to the CMS system and create resources

The CloudBase CMS has been deployed in static web hosting in the current environment. The access address is in the following format: Default domain name/deployment path for cloud development static hosting, for example:

Envid.ap-shanghai.app.tcloudbase.com/tcb-cms/ (at the end… / symbol). The default domain name can be viewed by visiting the console.

After you open CloudBase CMS, you need to log in to the CMS using the administrator account and password specified during the installation.

Before we can start managing content data, we need to create a project. The CloudBase CMS uses items to divide different types of content to facilitate data usage and rights management.

First, we need to click on the Create New project button below the New project to create a project named Small Shop with the Id of Shop.

After creating the project, click the project card to enter the project management page, we will see the welcome page of the project.

Create commodity types and manage commodity information:

Create a content model named goods, a database named GOODS, and store the goods data into the GOODS data set. If the specified collection does not exist when the content is created, CloudBase CMS automatically creates a new collection.

After creating the content model, we get an empty content model.

Next, you need to add the item name, item picture, price, stock quantity, and other fields for the item.

When adding the commodity name attribute to an item, because the commodity name is usually a short text, you can select the single-line string field, click the single-line string card on the right, and fill in the field information for the commodity name.

In addition to the basic name, database field name, you can add additional restrictions to this field, such as the maximum length to fill in the commodity name, whether it is required to fill in when creating the commodity, and so on.

Similarly, we can create a price field of numeric type and an item picture field of stock quantity and picture type. When creating the image field, considering that there may be multiple images of an item, we can turn on the Allow multiple content button to indicate that multiple images can be uploaded.

The structure of the goods database collection created is as follows:

Similarly, create a content model named order list and a database set named ORDER to manage order information. The structure of the order database collection created is as follows:

Add an item:

Create a project

1. Pull the template

# Install the taro CLI tool NPM install -g@tarojs /[email protected] # https://github.com/TencentCloudBase/cloudbase-minishop.gitCopy the code

Use the wechat developer tool to import the project, enter the client directory, and install dependencies:

npm i
Copy the code

Cloud /functions includes two written wechat payment cloud functions, pay and pay-callback cloud function for receiving payment message push. These two cloud functions need to be uploaded using wechat developer tools.

2. Project Catalog

. ├ ─ ─ client / / small program source │ ├ ─ ─ the config │ └ ─ ─ the SRC │ ├ ─ ─ assets │ ├ ─ ─ components │ └ ─ ─ pages │ ├ ─ ─ index │ └ ─ ─ the order - the list └ ─ ─ ├─ ├─ ├─ ├─ ├─ ├─ project.config.json // Applets configurationCopy the code

Call wechat pay to place an order

After the completion of the project creation, with the help of cloud development call wechat payment ability, to achieve the mall order process.

  • The small program calls the cloud function and invokes the unified ordering interface in the cloud function, with the name of the cloud function that receives the result of asynchronous payment and the Id of its cloud environment in the parameter
const cloud = require("wx-server-sdk"); Const res = await cloud. CloudPay. UnifiedOrder ({envId: ' ', subMchId: "', body:" brand name ", totalFee: 100, outTradeNo: 'order number ', spbillCreateIp: "127.0.0.1", functionName: "pay-callback"}); / / return res. PaymentCopy the code

The payment result callback cloud function must return one of the following objects, otherwise the callback is considered unsuccessful and the cloud function receives repeated payment callbacks.

{

errcode: '',

errmsg: '',

}
Copy the code
  • The success result object returned by the unified order interface has the Payment field, which is all the information required by the interface wx. RequestPayment on the applet side to initiate payment
  • The applet side gets the result of the cloud function and calls wx.requestPayemnt to initiate payment
wx.requestPayment({ ... payment, success (res) { }, fail (res) { }tt })https://docs.cloudbase.net/Copy the code
  • After the payment is completed, the cloud function configured in the unified ordering interface will receive the payment result notification.

Product introduction

Cloud Development (TCB) is a cloud native integrated development environment and tool platform provided by Tencent Cloud. It provides developers with highly available, automatic and flexible expansion of back-end cloud services, including computing, storage, hosting and other serverless capabilities, which can be used for cloud integrated development of various end applications (small programs, Public account, Web application, Flutter client, etc.) to help developers build and manage back-end services and cloud resources in a unified manner, avoiding tedious server construction, operation and maintenance during application development. Developers can focus on the implementation of business logic, with lower development threshold and higher efficiency.

Open cloud development: console.cloud.tencent.com/tcb?tdl_anc…

The product documentation: cloud.tencent.com/product/tcb…

Technical documentation: Cloudbase.net? From =10004

Technical exchange plus Q group: 601134960

Latest news follow wechat official account [Tencent Yunyun Development]