Requirements: The user will import the Excel table into the applet, and the data in the table will be parsed and rendered to the front page

First, let’s analyze the process according to the requirements:

  1. Select the Excel spreadsheet and upload it
  2. Through the cloud function analysis, and stored in the cloud database
  3. Data is read from the database and returned to the front end for rendering

starts

I. Preparation

  1. Open the cloud service through the wechat developer tool (check the document by yourself)
  2. Open the cloud development interface => Database: Create the collection Users(PS: Collection name optional)
  3. Find the project.config.json file in the root directory of the small program and modify it as follows:

Create a cloud functions folder

Create a folder in the directory configured in the preceding figure (recommended in the root directory). Right-click the folder and open it to configure the current environment

Create cloud function:

  1. Right click on cloudfunctions cloudfunctions folder,Create a node.js cloud function, function name custom, tentativeupLoadExcel;
  2. UpLoadExcel will automatically generate four files, index.js as the entry file
  3. NPM install –save wx-server-sdk@latest, NPM install node-xlsx

4. Write the logical body of the cloud function (parse and store in the database)

5. Right click on cloudfunctions folder => synchronize cloudfunctions list; Right click on upLoadExcel folder => Upload and Deploy: Cloud Install Dependency

6. Open the cloud development interface => Cloud function, see upLoadExcel in the list, you are done.

4. Write small program side logic

  1. To initialize, add the following code to app.js

2. Open the requirement realization page and define the database and collection

const db = wx.cloud.database({})

const users = db.collection(‘users’)

3. Write the main logic

4. Verify

5. Optimize

In order to avoid a large amount of collected data, the original data in the collected data will be cleared every time when a new Excel is uploaded (great idea, let’s start).

  1. As in the first three steps of step 3, create a cloud function named deleteExcel
  2. Add body functions (cloud function side can be batch deleted, small program side can only be single deleted)

4. In the small program side, add the following code

I tested it. It worked. It was perfect

rendering

Look at the data in the cloud database collection: make sure that only the data in each uploaded table is OK

Call it a day