How to Build a WeChat Mini Program in 1 Hour: Personal Developer Tutorial

This article provides a comprehensive tutorial on how to build a WeChat Mini Program (小程序) within an hour, using Tencent Cloud's official "Photo Album" (小相册) demo as a practical example.

The tutorial covers eight main steps:

Step 1: Set up the development environment - Download and install the official WeChat Mini Program IDE from the official website, then scan with WeChat to log in and create a new project.

Step 2: Download the source code - Clone the demo from Tencent Cloud's GitHub repository: git clone https://github.com/CFETeam/weapp-demo-album.git . The project contains three main parts: applet (or app) for the Mini Program code, server for the Node.js backend, and assets for demo screenshots.

Step 3: Analyze the source code - The Photo Album demo includes app.js (logic), app.json (configuration), and app.wxml (structure). Each page requires at least .js and .wxml files, with .wxss and .json being optional. The index page demonstrates basic navigation using the bindtap attribute to trigger the gotoAlbum method:

Page({    // 前往相册页    gotoAlbum() {        wx.navigateTo({ url: '../album/album' });    },});

Step 4: Deploy the server-side code - Use Tencent Cloud's pre-configured CVM image for one-click deployment, or upload the server folder to your own server.

Step 5: Prepare domain and configure HTTPS certificate - WeChat Mini Programs require all network requests to use HTTPS protocol. Apply for an SSL certificate for your domain.

Step 6: Configure Nginx for HTTPS - Modify the Nginx configuration in /etc/nginx/conf.d to set up the domain, certificate, and private key. Set the proxy_pass to the Node.js listening port (default 9993):

sudo service nginx reloadsudo service nginx restart

Step 7: Set up COS (Cloud Object Storage) - Create a Bucket in Tencent Cloud COS console, obtain API credentials (APP ID, SecretID, SecretKey), and create a "photos" folder in the Bucket.

Step 8: Start the Photo Album server - Navigate to the deployment directory and modify the config.js file with your COS credentials:

module.exports = {    // Node 监听的端口号    port: '9993',    ROUTE_BASE_PATH: '/applet',    cosAppId: '填写开通 COS 时分配的 APP ID',    cosSecretID: '填写密钥 SecretID',    cosSecretKey: '填写密钥 SecretKey',    cosFileBucket: '填写创建的公有读私有写的bucket名称',};

Then start the Node service using pm2:

pm2 start process.json

Step 9: Configure the communication domain - Modify the config.js file in the Mini Program to set your domain as the API endpoint.

The Photo Album demo implements features including: listing images from COS, uploading photos via camera or gallery, full-screen image preview with swipe navigation, and image deletion from COS. The architecture follows best practices by separating static assets (stored in COS) from the application server (Node.js with Nginx reverse proxy).