Create a Photo Mini‑Program on Alipay in 15 Minutes with Alibaba Cloud

What Is Mini‑Program Cloud?

Mini‑Program Cloud is Alibaba Cloud’s one‑stop service for mini‑program scenarios, enabling developers to implement a “one cloud, multiple terminals” strategy. It provides unified resource management, data operations, and business design across front‑end mini‑programs.

It offers Serverless and application services that reduce development and operation costs for mini‑program developers.

Sample: Personal Photo Mini‑Program Development

This tutorial shows how to create a simple personal photo mini‑program using the Mini‑Program Serverless service. Image storage is a common use case; leveraging Mini‑Program Cloud improves development efficiency and data privacy.

Step 1: Create an Alipay Mini‑Program

Open the Mini‑Program Developer Tool.

Select Alipay > Mini‑Program in the left navigation.

Choose a template, go to the “Capabilities” tab, select the Personal Photo template, and click Next.

Set the project name and path, then finish.

Scan the QR code with the Alipay app, associate the created mini‑program, and confirm.

When prompted to bind an Alibaba Cloud account, click to bind and complete verification, or right‑click the “server|unlinked” directory and choose “Bind Serverless”.

Configure Cloud Credentials

In app.js, set the following information:

import MPServerless from '@alicloud/mpserverless-sdk';

const mpserverless = new MPServerless({
  uploadFile: my.uploadFile,
  request: my.request,
  getAuthCode: my.getAuthCode,
}, {
  appId: '',
  spaceId: '',
  clientSecret: '',
  endpoint: '',
});

Authorize the Mini‑Program

Before calling Serverless services, request authorization:

async onSubmit() {
  await mpserverless.user.authorize({
    authProvider: 'alipay_openapi',
    // authType: 'anonymous'
  });
}

Initialize Global Serverless Instance

App({
  mpserverless,
});

Use the SDK in Other Files

Insert a record into the files collection:

const { mpserverless } = getApp();
mpserverless.db.collection('files').insertOne({
  name: 'Table Name',
  userId: 'Table ID'
});

Read Data from the Database

async onReady() {
  const result = await mpserverless.db.collection('files')
    .find({ userId: 'User ID' });
  this.setData({
    files: result.result || [],
  });
}

Upload Images

Select an image and upload it to the Serverless file service:

attach() {
  my.chooseImage({
    chooseImage: 1,
    success: res => {
      const path = res.apFilePaths[0];
      const options = {
        filePath: path,
        headers: {
          contentDisposition: 'attachment',
        },
      };
      mpserverless.file.uploadFile(options).then(image => {
        const { imgs } = this.data;
        imgs.push(image.fileUrl);
        this.setData({ imgs });
      }).catch(console.log);
    },
  });
}

Save Image Info to the Database

async submit() {
  const obj = {
    urls: 'Image Path',
    details: 'Image Description',
    fileId: 'File ID'
  };
  await mpserverless.db.collection('photos').insertOne(obj);
  my.navigateBack();
}