Shulou(Shulou.com)06/02 Report--

This article will give you a detailed explanation on how to develop Mini Program. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

The official simple course of Wechat

Let's first take a look at the simple tutorial given on Wechat's official website.

As a starting point, after registering a Mini Program account, you need to install the development tools, and then enter the code into the official development tools to make them.

Basic code composition:

JSON configuration:

We can see that there is an app.json and project.config.json in the root directory of the project, and there is also a logs.json in the pages/logs directory. Let's explain their purpose in turn. Mini Program configuration app.json,app.json is the current global configuration of Mini Program, including all page paths, interface performance, network timeout, bottom tab, etc., of Mini Program.

WXML template:

People who have been engaged in web programming know that web programming uses a combination of HTML + CSS + JS, in which HTML is used to describe the current structure of the page, CSS is used to describe what the page looks like, and JS is usually used to deal with the interaction between the page and the user.

WXSS style:

WXSS has most of the features of CSS, and Mini Program has also made some extensions and modifications in WXSS. New dimension units have been added. When writing the CSS style, developers need to consider that the screen of mobile devices will have different widths and device pixel ratios, and use some techniques to convert some pixel units. WXSS supports a new size unit rpx at the bottom layer, so developers can eliminate the trouble of conversion and simply hand it over to the bottom layer of Mini Program for conversion. Due to the floating-point operation used in the conversion, the result will deviate slightly from the expected result. Provides global and local styles. With the previous app.json, page.json concept is the same, you can write an app.wxss as a global style, will work on all pages of the current Mini Program, local page style page.wxss only works on the current page. In addition, WXSS only supports some CSS selectors.

JS interaction logic:

It is not enough for a service to just show the interface, it also needs to interact with the user: responding to the user's click, getting the user's location, and so on. In Mini Program, we deal with users' operations by writing JS script files.

Well, the above is a small part of the official definition of "simple tutorials", yes, simple tutorials, "easy". At this point of introduction, I can no longer feel the word "simple".

After finishing the basics, there are more advanced articles waiting for you, frameworks, components, API, tools. These words look simple, and the content is enough to write a few textbooks. How many grass-mud horses float through my heart at the moment.

How to make Mini Program quickly in three minutes

We will not analyze whether the definition of the official tutorial is simple or not. For a businessman and enterprise, I also need to know so much code knowledge to make a Mini Program. Or someone said, I can hire a programmer and designer lion, yes, tuhao please feel free, but a programmer also needs to take the time to knock the code, design. When this whole set is made, smart people don't learn it for at least a month or two, more than half a year, or even years.

In such a competitive society, our enterprises and businesses pay attention to time is money, peer competition, seize the first opportunity. Would you still be willing to spend so much time learning, typing code, or even asking people to raise costs? I think your answer is no.

So is there any way for us to make Mini Program easily and quickly?

Of course there is!

Let's take a look at how to make Mini Program easily without a code base, and teach you how to make Mini Program!

Search-city website alliance-enter the official website-one-click generation

"City Alliance" Mini Program visual production tool decoration interface, you can clearly see the left side of the "pages, components, modules, templates" and other functions. There is a visual design interface in the middle and settings on the right.

1. Components

Component functions can add text, pictures, videos, articles and merchandise lists and other elements, you can customize the style, size, border, background, color, shadow, fillet, transparency and other functions, as well as slide rotation effect.

2. Module

In the module library, there are ready-made component modules adapted to the scene of the whole industry, including slide broadcast class, navigation column class, commodity display class, picture and text display class, pure text class, creative picture and text class, element icon class, commodity list, exquisite title class, and so on. Users can add module layout pages with one click, and the component content can be customized. There is no need to redesign typesetting, there are many module components, high adaptability, drag and drop, you can complete it. Free combination and collocation, really achieve thousands of people and thousands of stores.

3. Template

Template library has ready-made templates to adapt to the scene of the whole industry, users can add and use layout pages with one click, the content on the template can be customized, and they can all be redesigned and customized. There are many templates, high adaptability, and one-click generation, and the production of Mini Program is a quick step.

If you use the template function, one click to generate production and use, less than three minutes to make a Mini Program, is not very convenient.

Speaking of which, what's the key?

The key is that code has never appeared in the background of this sacred thing, no code, no code, important to say three times! Silly operation, the elements on the page can be dragged with the mouse to make the design. The layout only needs to add text, pictures, modules, templates, drag and drop the mouse to make the style you want easily, and generate Mini Program with one click at will, isn't it easy to compare with the official "easy" tutorial?

This is the end of the article on "how to develop Mini Program". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.