Uniapp's experience in developing small programs

1. Create a new UI project

First of all, our UI is based on ColorUI. When ColorUI does not have a style, it is based on the UI that comes with Uniapp. Therefore, these two UI frameworks should be introduced at the beginning of the project.
As follows, create a new uni-ui project.

Create another ColorUI project.

If you need to see the effect of ColorUI so that you know which components you need to use, you can run it as follows.

The same applies to uni-ui. In this way, any styles we need can be taken from these two UIs.

2. Build your own project

Create a new uniapp project of your own and complete it. The project structure is as follows.

Next, introduce the ColorUI style:

• Copy the colorui directory under the ColorUI project to the root directory of your own project.
• Introduce two css files in the App.vue file in the root directory of your project, as follows

<style>
	/*Common CSS for each page */
	@import "colorui/main.css";
	@import "colorui/icon.css";

</style>

• If you need a certain style, you can review the elements in the ColorUI project and copy the corresponding class.

If the style you want is not available in ColorUI, you need to import the style of uni-ui:

• Copy the common in the root directory of the uni-ui project to the root directory of your own project
• Import the css file into the App.vue directory
  

Finally, App.vue is similar to:

<style>
	/*Common CSS for each page */
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import url("common/uni.css");
</style>

Since then, the UI project import is completed

3. Some basic work

Use tabbar: You can go to the uniapp official website to find the tabbar part and copy it for use.

Page jump, initiate request: go to uniapp official website and use uniapp components

If a page is too complex, it is recommended to divide it into multiple components. Create a new compoment directory under the page directory, and create multiple components (vue files) under the compoment directory, as shown in the following figure:

Import components: As shown in the figure below, import components where needed, and even pass values.

4. Page Layout

Here are some practical suggestions for page layout.

• The elements are from top to bottom, occupying a single line, and can be laid out using the standard flow div
• If the elements need to be arranged in a row, a float layout is required. However, the floating layout cannot accurately place elements at a specified position in the container, so the position layout is required. However, this method needs to be separated from the document flow and requires various clear operations to clear the floats, so this method is outdated. It is recommended to use flex layout
• In summary, div is used for top-to-bottom layout, and float and position are used for left-to-right layout. Or use flex
• There are many benefits to using flex. You can use justify-content to layout elements to specified positions in left and right layouts. Therefore this layout is popular.

Summarize

This is the end of this article about the uniapp development mini program. For more relevant uniapp development mini program content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!