With the development of the Internet and technology, more and more organizations are using small programs to serve their internal staff. In this paper, the use of micro low code to quickly make a daily menu small program, the internal head of the organization can maintain the weekly menu, employees through paying attention to the small program to view the weekly menu information.

Define the data source

Any small program needs to store the data, we will generally store the data in the database, micro-build provides us with an online document database, can facilitate us to read and store data operations.

You can create our custom data sources, recipes, in data source management.

2. Create an application

Once the data source is defined, we need to create an application, one application corresponds to a small program on the line, the basic version can create 50 small programs, enough for us to use. For details, click App Management and click Create Blank App.

Enter the app name and logo and click OK

Third, page development

After the application is created successfully, we can click the edit application button to carry out the specific development of the page

By default, a home page is created, which is the first page we see when we open the applet

In general, the home page of small programs will place specific functions that can be operated, so we guide users to click in the form of ICONS. First, we develop the function of recipe management. For ICONS, we can download them from Iconfont and use them for free

Enter the recipe in the search box and click PNG to download it

After downloading, we need to upload the icon to our material library for future use. You can click resource Management on the left menu bar to upload the downloaded material

Material we need to consider the realization of the function, the function of the home page needs to choose the appropriate layout, layout is the structure of the page, because it is the form of ICONS and text so we choose the grid layout, there are four columns is enough. The specific operation is to select the corresponding component, you can click or drag into the edit area

If you’re a beginner, you may not understand slots very well, but it’s like building blocks, where there are slots you can continue to put other components, so let’s put a container component in the first slot, and my general habit is to go to the outline view, and then select the slot and put the components in, so it’s more accurate.

The purpose of placing the container components is to align the images and text descriptions vertically, so we need to set the container to the Flex layout with the main axis perpendicular and the main axis and secondary axis centered

Then we put the image component in the container component. Once the image component is in place, we change the width and height of the image to 100 each

Then add a text component to change the content to recipe management

In the same way we put images and text components in the rest of the slots, changing the title to Weekly Menu, Comment Management, Post Comments

Now the image is the default image, we can change the image to use the image library, select the image component, click on the cloud image and use the image library image

Once the icon is defined, we need to define the event for the icon, we select the container component, we define the click event, we select tap click, we select the navigation method in the platform method

Navigation event needs to select the navigation page, we need to create a page, in the page management to create a new page

Once the page has been created we go back to the home page, select our container component, switch to the events TAB and select the page we just created, so the event is defined

4. Preview release

After setting up the page, we can’t see the page jump in the editor. To test our Settings, we click the preview release button and submit the code to production to see how it looks

Just select live Preview

We can scan it or we can open it directly in the browser

Product introduction

Tencent Cloud Micro low code is an efficient and high-performance drag-and-drop low code development platform, which connects the front-end industry business upward and the massive cloud computing capacity downward to help enterprises vertically go to the cloud. Tencent Cloud micro-build low code abstracts the tedious underlying architecture and infrastructure into a graphical interface, and quickly builds multi-terminal applications (small programs, H5 applications, Web applications, etc.) through professional templates, drag-and-drop components and visual configuration, eliminating the need for code writing and allowing you to fully focus on business scenarios. Tencent Cloud micro low code with cloud development as the underlying support, cloud native ability to build a full link through the application, provide a highly open development environment, and always escort your application.

Open the micro: cloud.tencent.com/product/wed…

The product documentation: cloud.tencent.com/product/wed…

Technical exchange group, latest information follow wechat public number