Tengxunyun micro-build (WeDa) low code introduction: zero basic hand part teaches you to develop a WeChat applet

Want to develop a small program, but see those dense code, complex interface configuration, and front-end joint tuning on the head?

In the past, do not understand the programming really can only stare. But now, tengxunyun has produced a son-level tool of its own--

WeDa Low Code Development Platform

. Its biggest advantage is:

Naturally, it has opened up Tencent's own WeChat ecology.

. You don't need to study WeChat developer tools, you don't need to configure your own server and database, or even your domain name and SSL certificate.

Today, we won’t talk about abstract concepts. Get your WeChat, computer and a cup of tea ready. I'll take you from scratch and drag and configure a WeChat applet of your own.

The first stage: enter the battlefield and understand the interface of micro-building.

The computer browser opens the official website of Tengxun Cloud and searches for the "WeDa" console.

If it is the first time to use it, the system will let you choose an experience version (usually there is a free quota, which is completely enough for hand training and development).

Click "Application Management"-> "New Application", select "New Blank Application" and give it a name, such as my first low-code applet, and select "applet" for application type ".

Click into the application, you will see an extremely comfortable visual editor.

Don't be scared by the buttons inside. We broke it down into three main areas:

Left: Component library (your box of parts). There are text, pictures, buttons, input boxes, lists, etc. What do you need to drag directly to the middle with the mouse.

Middle: Canvas (your phone screen). This is the real-time preview area. What parts do you drag in on the left, and the middle will show what it looks like on the phone in real time.

Right: Properties panel (your screwdriver). After selecting a part in the middle, you can adjust its size, color, margin, or bind data on the right.

The second stage: the core bottom layer-using the "data model" to build a cloud database

To develop a small program, it is not enough to have a good-looking interface, it must be able to store data. For example, we are going to take you to make a "employee feedback/collection mini program" today. Where are the opinions submitted by users stored? This requires the use of the core trick of micro-building:

Data Model

.

In the micro-match, you don't need to understand SQL statements. Building a database is as simple as playing Excel.

Click on the left side of the editor to switch to the "Data Model" tab (usually a small table-like icon).

Click "New Data Model" and call it the feedback form.

Click "Add Field" and we will add three columns like Excel: Field 1: Name is the name of the feedback person, and type is "Single Line Text". Field 2: The name is contact number, and the type is "phone number" (the system will automatically check the format for you). Field 3: the name is feedback content, and the type is "multi-line text".

Click Save and Publish. OK, your cloud database and back-end interface have been automatically created and welded to death in the background.

Third level

Segment: drag and bind, spell out the interactive interface in 5 minutes

Once the database is built, we go back to the canvas and spell out the foreground interface.

1. Build a form interface

In the component library on the left, find the Form category.

One by one, drag the input boxes one by one. There is an artifact called "form container". Drag the Form Container directly onto the middle phone canvas.

With this form container selected, look at the properties panel on the right. In the "Data Source" column, select the data model we just built-the feedback form.

A miracle happened: the micro-match will automatically identify the fields in your database, and instantly automatically generate three input boxes of "feedback person's name", "contact number" and "feedback content" on the mobile phone screen. even the "submit" button at the bottom will help you match!

2. Polish the interface (refuse straight men's aesthetic)

Do you think the default interface is too fast?

Select the outermost page and change the background color to light gray (such as# F7F8FA) in the property bar on the right.

Above the form container, drag a "picture" component from the left component library. Upload a good-looking Banner banner you designed on the right.

Drag another "text" component, make the font size bigger and bold, and write "welcome to submit your valuable opinions". Just fine-tune the margin (Margin/Padding), and a beautiful form interface at the factory level will come out.

The fourth stage: a key joint debugging, let the data really move

With the interface, how can the data really enter the Excel form just now when the user clicks "submit?

In fact, when you bound the data source with the "form container" just now, micro-matching already helped you write the logic by default. Do not believe us to test:

Click the Preview button in the top right corner of the editor.

In the pop-up simulator, like a real user, enter your name, phone number, and write a comment.

Click the "Submit" button at the bottom, and the page will prompt "Submit Successfully".

At this time, turn off the preview, return to the "Data Model" on the left, click on your feedback form, and switch to the "Data Management" tab.

See? The data you just filled in the simulator is already neatly lying in the form! You haven't written any line of front-end and back-end debugging code like getInstance() or wx.request().

The fifth stage: the ultimate customs clearance-release online to WeChat

In the past, to publish the developed applet, you needed to download WeChat developer tools, export code packages, upload audits, and configure legal domain names. However, in the micro-channel, Tencent has completely opened up its own channel, and the release only takes two steps.

Step 1: Bind your WeChat applet account

In the settings of the micro-platform console, click "applet authorization" and use your WeChat scan code as administrator. Bind the small program account you applied for in advance on WeChat public platform.

Step 2: One-click release

Go back to the micro-editor and click "Publish" in the upper right corner ".

Selection

The release channel is "WeChat applet", the version number is 1.0.0, and the update log "Initial Version Online" is written ".

Click OK. Microbus will directly compile your visual interface into the native code at the bottom of WeChat in the cloud and automatically submit it to WeChat officials for review.

Usually, a personal homepage or a simple collection of small programs, the official review only takes a few hours to a day. After the approval is passed, more than one billion WeChat users in China can directly open the little program you made by yourself by searching or scanning the code.

Summary

The essence of Tencent's cloud micro-build is to turn complex software engineering into "Lego building blocks". You just need to sort out the business logic (what data I want to save), and the rest of the dirty work is done by the platform at the bottom.

After using the logic of this "data model form container", you can try to add "list components" for item display and "permission control" for internal management of the enterprise by analogy. Zero foundation is no longer a stumbling block, as long as you have the idea, you can become a full stack developer this afternoon.