Making daily menu applet with micro build low code

With the development of Internet and Technology , There are more and more organizations that use small programs to serve internal staff . This article uses Micro build low code To quickly create a daily menu app , The person in charge of the organization can maintain the weekly menu , Employees check weekly menu information by following the app .

One 、 Define data sources

Any small program needs to store data , We usually store data in a database , Micro build Provides us with an online document database , It is convenient for us to read and store data .

We can create our custom data source in data source management , menu .

Two 、 Create an

After the data source is defined , We need to create applications , An application corresponds to a small program on the line , The basic version can create 50 Small program , Enough for us to use . Specific methods click application management , Click the create blank app button .

Enter the application name and logo and click OK

3、 ... and 、 Page development

After the application is created successfully , We can click the edit application button to develop the page

A home page will be created by default , It's the first page we see when we open the app

General small program home page will place specific functions that can be operated , We use icons to guide users to click , First, we develop the function of menu management , We can go to iconfont Upload and download , Free to use

Enter the recipe in the search box , Click on png Download it

After downloading , We need to upload the icon to our material library for later use , You can click resource management in the left menu bar , Upload the downloaded material

With the material, we need to consider the realization of the function , The function of the home page needs to choose the right layout , Layout defines the structure of the page , Because it is in the form of icon plus text, we choose grid layout , Four columns is enough . The specific operation mode is to select the corresponding component , You can click it or drag it into the edit area

Beginners may not understand slots very well , It's like building blocks , Where there is a slot, it means that you can continue to place other components , Here we put a container component in the first slot , My general habit is to switch to the outliner , Then select the slot and put the component in , This is more accurate .

The purpose of placing the container component is to make the picture and text description vertically arranged , So we need to set the style of the container to flex Layout , The main axis is vertical , The main axis and the secondary axis are aligned in the center

Then place the image component in the container component , After the picture component is placed, let's change the width and height of the picture to 100

Then add a text component , Change the content to menu management

In the same way, we place the picture and text components in the remaining slots in turn , Change the title to weekly menu 、 Comment management 、 Post comments

Now the image is the default image , We can change the picture to use the material library , Select the image component and click the image of cloud to use the image of material library

After the icon is defined , We need to define events for icons , We choose the container component , Define click events , choice tap Click on , We choose the navigation method in the platform method

Navigation events need to select the page to navigate , We need to create a page , Create a new page in page management

After the successful creation of the page, we return to the home page , Select our container component , Switch to the event tab and select the page we just created , So the event is defined

Four 、 Preview release

After setting up the page , You can't see the page Jump in the editor , To test whether our settings are correct , Let's click the preview post button , Submit the code to the production environment to see the effect

Just choose live preview

We can scan the code and open it directly in the browser

Product introduction

Tencent cloud micro build low code is efficient 、 High performance drag and drop low code development platform , Connect up to the front end industry business , Connect down to the massive capabilities of Cloud Computing , Help enterprises go to the cloud vertically . Tencent cloud micro builds low code to abstract the tedious underlying architecture and infrastructure into a graphical interface , Through the industrial template 、 Drag and drop components and visual configuration to quickly build multi terminal applications （ Applet 、H5 application 、Web Application etc. ）, No code writing , Enables you to focus completely on business scenarios . Tencent cloud micro builds low-level code with cloud development as the underlying support , The cloud native ability will open up the whole link built by the application , Provide a highly open development environment , And always for your application escort . Open up micro build ：https://cloud.tencent.com/product/weda?tdl_anchor=techsite Product documentation ：https://cloud.tencent.com/product/weda/details?from=12763 Technology exchange group 、 The latest information is concerned about the official account of WeChat 【 Tencent cloud low code 】