WeChat Mini Program provides a set of solutions for running Mini Programs on WeChat. It has a relatively complete framework, components and APIs. There is a lot of room for imagination on this platform.
Small Album is an example of a WeChat applet made in conjunction with Tencent Cloud Object Service (COS for short). The code structure consists of the following two parts:
applet: Small photo album application package code, which can be opened directly as a project in WeChat developer toolsserver: The built Node server code acts as the server to communicate with the applet, and provides CGI interface examples for pulling COS image resources, uploading images to COS, deleting COS images, etc.
The main functions of the small album are as follows:
- List pictures in COS server
- Click the upload picture icon in the upper left corner, you can call the camera to take a picture or select a picture from the mobile phone album, and upload the selected picture to the COS server
- Tap any picture to enter full-screen picture preview mode, and swipe left and right to switch preview pictures
- Long press any picture to save it locally or delete it from COS
Deploy and run
Friends who have obtained the source code of this applet can try to run it by themselves.
Overall structure
1. Prepare the domain name and certificate
In the WeChat applet, all network requests are strictly restricted, and domain names and protocols that do not meet the conditions cannot be requested, including:
- It is only allowed to communicate with the domain name configured in the MP. If there is no domain name, you need to register one .
- Network requests must go through the HTTPS protocol, so you also need to apply for a certificate for your domain name .
After the domain name is registered, you can log in to the WeChat public platform to configure the communication domain name.
2. Cloud hosting and image deployment
The server running code and configuration of the small album have been packaged into Tencent Cloud CVM image, and you can use it directly .
Tencent Cloud users can receive free gift packs and experience Tencent Cloud applet solutions.
The image already contains the server environment and code of the two mini-programs "Rock Paper Scissors" and "Little Album". Friends who need to experience the two mini-programs do not need to deploy repeatedly
3. Configure HTTPS
The image has been deployed nginx, and you need /etc/nginx/conf.dto modify the domain name, certificate, and private key in the configuration below.
After the configuration is complete, nginx can be started.
nginx
4. Domain name resolution
We also need to add domain name records to resolve to our cloud server, so that we can use the domain name for HTTPS services.
For domain names registered in Tencent Cloud, you can directly use the cloud DNS console to add host records, and directly select the CVM purchased above.
After the resolution takes effect, we can use the domain name in the browser to access HTTPS.
5. Activate and configure COS
The image resources of the small album example are stored on COS. To use the COS service, you need to log in to the COS management console , and then complete the following operations:
- Open COS service allocation to get a unique
APP ID - Generate a pair of sums using key management
SecretID(SecretKeyfor calling COS API) - Create a public read and private write access, CDN-accelerated bucket in the bucket list (the target container for storing images)
6. Start the small photo album example Node service
In the mirror, the Node service code of the small photo album example has been deployed in the directory /data/release/qcloud-applet-album:
Enter this directory:
cd /data/release/qcloud-applet-album
There is a configuration file named in this directory config.js(as shown below), modify the corresponding COS configuration according to the comments:
module.exports = {
// Node 监听的端口号
port: '9993',
ROUTE_BASE_PATH: '/applet',
cosAppId: '填写开通 COS 时分配的 APP ID',
cosSecretId: '填写密钥 SecretID',
cosSecretKey: '填写密钥 SecretKey',
cosFileBucket: '填写创建的公有读私有写的bucket名称',
};
The small photo album example uses the pm2management Node process, and executes the following command to start the node service:
pm2 start process.json
7. WeChat applet server configuration
Enter the WeChat public platform management background to set the server configuration, the configuration is similar to the following settings:
Note: You need to www.qcloud.laset the domain name applied above, and set the legal domain name of downloadFile to the corresponding CDN acceleration access address of the bucket created by yourself in the COS management console, as shown in the following figure:
8. Start the small photo album Demo
Add the source code of the small photo album application package as a project in the WeChat developer tool, and config.jsmodify the communication domain name in the source file to the domain name applied for above.
Then click debug to open the small album Demo to start the experience.
There is a problem here. Up to now, the upload and download API provided by the WeChat applet cannot work properly in the debugging tool, and you need to scan the code on your mobile phone WeChat to preview the experience.
Main function realization
upload image
To upload pictures, use the WeChat applet to wx.chooseImage(OBJECT)obtain the file path to be uploaded, and then call the upload file interface wx.request(OBJECT)to send an HTTPS POST request to the backend server you specify. Like traditional form file uploads, so do request Content-Typeheaders multipart/form-data. After the background server receives the request, it uses the npm module multiparty to parse the multipart/form-data request, and saves the parsed data as a temporary file in the specified directory. After getting the path of the temporary file, you can directly call the file upload API provided by the COS SDK to store the image, and finally get the storage path and access address of the image (the stored image path can also be viewed directly in the COS management console).
Get a list of pictures
Calling the List Files & Directories API can get the pictures stored in the specified bucket on the COS server and the specified path of the bucket.
Download and save pictures
wx.downloadFile(OBJECT)Specify the access address of the picture, and then call the interface provided by the WeChat applet to wx.saveFile(OBJECT)directly download and save the picture locally. It should be noted here that the domain name of the image access address needs to be the same as the legal domain name of the dowmloadFile configured on the server, otherwise it cannot be downloaded.
delete image
Deleting pictures is also very simple. The pictures stored on the COS server can be deleted directly by calling the file deletion API .