Develop a WeChat Mini Program

About this tutorial

This tutorial uses a sample to-do list Mini Program to demonstrate how to use the EMAS Serverless software development kit (SDK) in the WeChat IDE to develop a WeChat Mini Program by calling Cloud Database APIs. The sample code already includes the required business logic. You only need to activate EMAS Serverless and configure the Mini Program to run the application.

Preparations

Before you begin, complete the following preparations:

• Register a WeChat Mini Program.

• Download and install WeChat Developer Tools.

  For more information, see Download Instructions.

  Important

  Make sure you download the latest version of the WeChat IDE.

• Activate the EMAS service.

  Before you use EMAS Serverless for the first time, you must activate the EMAS service. For more information, see the "Activate the EMAS service" section of Create your first service space.

• Download the sample Mini Program project.

  Important

  The sample Mini Program project uses EMAS Serverless SDK V3.1. For more information, see Install the client SDK.

Step 1: Create a service space

The cloud resources that you create during mini program development are associated with a service space. Each service space has a globally unique space ID. Cloud resources are associated with your project through this space ID.

For instructions on how to create a service space, see Create your first service space.

Step 2: Set database permissions

1. Log on to the EMAS console, select Serverless, and click Enter to open the Serverless console.

2. In the navigation pane on the left, select ApsaraDB. Then, in the upper-left corner of the page, select the service space that you created.

3. On the ApsaraDB page, click Add Now.

4. Click your data table, and then select Permissions > Edit Permissions.

   Note

   To ensure data security, database access is restricted by default. Set database permissions as needed. For more information, see Data permission management.

5. On the Permission Management page, click Custom Security Rules and set the write permission to true.

6. Click OK.

Add a WeChat mini program

Before you start development, add your WeChat Mini Program information to the Alibaba Cloud EMAS Serverless console.

Follow these steps to add the WeChat Mini Program information:

1. Log on to the EMAS console. Choose Serverless > Click to Enter to go to the Serverless console.

2. In the navigation pane on the left, you can choose Settings.

3. On the WeChat tab, click Add Secret.

4. On the Add WeChat Secret page, enter the required information and click OK.

   • AppID: Enter the App ID of your WeChat Mini Program.

     Log on to the WeChat Official Accounts Platform and obtain the App ID on the Development Settings page.

   • App Secret: Enter the App Secret for your WeChat Mini Program.

Step 3: Develop a WeChat Mini Program

Follow these steps to develop the WeChat Mini Program:

Configure server domain names for the Mini Program

1. Log on to the WeChat Mini Program platform.

2. In the navigation pane on the left, click Development and then click Development Settings.

3. In the Server Domain Name section, click Modify.

4. In the Configure Server Information panel, enter the required information.

   1. Click the plus sign (+) next to the request valid domain names text box and enter the Mini Program API and file upload Endpoints.

   2. Then, enter the file upload and download Endpoints in the uploadFile valid domain names and downloadFile valid domain names text boxes.

      Note

      For more information about server domain name configuration, see the WeChat Mini Program documentation.

      You can find the SpaceID, Secret, API Endpoint, and File Upload Endpoint in the EMAS console by choosing Platform Service, and then from the navigation pane on the left. The information is located on the Space Access Information tab of the overview page.

Import the sample Mini Program files

1. Click here to download the to-do Mini Program sample project files, and then unzip the downloaded file.

2. In the WeChat Mini Program IDE menu bar, choose to import the decompressed sample files from the previous step.

   Important

   You must replace the AppID in the image with your own WeChat Mini Program App ID.

   

3. Click OK.

Configure the app.js file

1. Open the app.js file, configure the following information, and then save the file.

   

   • appId is the ID of the WeChat Mini Program. You can obtain the App ID on the Development Settings page of the WeChat Official Accounts Platform.

   • The spaceId, clientSecret, and endpoint parameters are available after you create a service space in the EMAS Serverless console. For more information, see Create your first service space.

Local settings

• In the upper-right corner of the WeChat IDE, click Details. Select the Compile JS to ES5 and Use npm module options.

Install the SDK

Install the EMAS Serverless SDK dependency in the Mini Program and then build the project.

1. In the Mini Program terminal, run the npm install command to install the SDK.

2. In WeChat Developer Tools, click Build npm.

Step 4: Debug the Mini Program

Open the Mini Program emulator. Click Add to add a to-do item.