Build a Full‑Stack WeChat Mini‑Program with Cloud Development: Step‑by‑Step Guide

Quick Start

If you are new to Cloud Development, follow the official documentation to quickly create a cloud‑based mini‑program for reference. You only need to get the program running; the detailed docs can be consulted later.

The mini‑program we build involves a user account system, item management, categorization, and search, leveraging cloud functions, database, storage, and a CMS.

Database

2.1 Content Management System

Manually writing table structures is slow and error‑prone, so we use a Content Management System (CMS) to improve efficiency. Detailed CMS documentation can be found in the CloudBase CMS resources.

The CMS lets you manage content models, create content, and retrieve data via a RESTful API, which is very convenient.

However, using RESTful APIs in mini‑programs has pitfalls:

Updating data with

method

PATCH

is not supported by

wx.request

.

Commands like

$eq

are automatically transformed in the mini‑program.

Therefore we abandon RESTful API for data retrieval and use cloud functions instead.

2.2 Database in Cloud Development Panel

Besides the CMS, you can manage the database directly in the Cloud Development console.

Advanced operations provide additional database examples.

2.3 Database CRUD

Database operations follow three steps (the actual implementation continues in cloud functions):

Select the environment:

<code>const DB = wx.cloud.database({
  env: 'test' // which environment
});</code>

Select the collection:

<code>const users = DB.collection('users');</code>

Perform CRUD on the collection:

<code>const user = users.doc('_id');</code>

For detailed documentation see the Database CRUD SDK.

2.4 Document ID

In the CMS, document IDs are system‑generated and cannot be customized, but you can define custom IDs directly in the Cloud Development panel’s database, subject to length limits.

Custom IDs are useful for querying single records, such as retrieving a user by OpenID:

<code>// Use OpenID as custom document ID
users.doc('openid').get().then(res => {
  console.log(res.data);
}).catch(e => {
  console.log('未注册');
});</code>

Cloud Functions

3.1 First Cloud Function

Refer to the first cloud function documentation. The key library is

wx-server-sdk

, and the important APIs are

getWXContext

and

callFunction

.

3.2 Cloud Function Practice

Steps to create a

user

cloud function:

Create a new Node.js cloud function named

user

in the cloud function directory.

Install dependencies by running

npm i

in the

user

folder.

Enable local debugging for the cloud function.

Write the cloud function code (example shown below).

Initialize cloud capabilities in

app.js

:

<code>App({
  onLaunch() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        env: 'cloud1-xxx',
        traceUser: true,
      });
    }
  },
});</code>

Call the

user

cloud function from the mini‑program:

<code>wx.cloud.callFunction({
  name: 'user',
  data: { type: 'get' },
}).then(res => {
  console.log(res.result);
}).catch(console.error);
</code>

3.3 Cloud Function Management

All cloud functions can be managed through the Cloud Development console.

Cloud Storage

The quick‑start mini‑program already includes an image upload example. Use the provided file storage documentation for further details. Image cropping components are also available online.

Open Data

Cloud Development offers open data verification and decryption. The example below shows how to obtain a user's phone number.

<code><button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button></code>

In the cloud function, retrieve the

cloudID

and call

cloud.getOpenData

:

<code>const { type, cloudID } = event;
if (type === 'getPhone') {
  const res = await cloud.getOpenData({
    list: [cloudID],
  });
  const resPhone = res.list[0].data.phoneNumber;
  return resPhone;
}
</code>

Call the cloud function from the mini‑program to get the phone number:

<code>wx.cloud.callFunction({
  name: 'user',
  data: { type: 'getPhone', cloudID },
}).then(res => {
  console.log(res.result);
}).catch(console.error);
</code>

Summary

Overall, Cloud Development enables a full‑stack experience for WeChat mini‑programs. While the learning curve can be steep and the platform evolves rapidly, mastering these tools allows you to build powerful applications end‑to‑end.