web123456

Summary of knowledge points for cross-platform development of uni-app

Introduction to uni-app

  • uni-app overview:uni-app is a framework that uses to develop all front-end applications. Developers write a set of code that can be published to iOS, Android, Web (responsive), as well as various mini programs (WeChat/Alipay/Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/Taobao), Kuaishou and other platforms.

  • uni-app origin:It's for the solutionCross-platform developmentThe problem. In mobile application development, different platforms (such as iOS and Android) have different development languages ​​and technology stacks, which leads to developers need to develop multiple sets of code for different platforms, increasing the cost of development and maintenance. It was precisely because DCloud saw these problems that it was determined to create an ultimate cross-platform solution. At this time, uni-app came into being. The emergence of Uni-app allows developers to use the same set of code to quickly deploy to multiple platforms, improving development efficiency and reducing development costs.

Article Directory

  1. Uni-app environment construction
  2. Creation and operation of uni-app projects
  3. Uni-app development specifications
  4. uni-app file directory structure
  5. uni-app external resource introduction
  6. Page style and layout of uni-app

one,Uni-app environment construction

  1. Install HBuilderX：HBuilderXIt is an officially recommended development tool by uni-app and supports the development and debugging of uni-app. You canHBuilderX official websiteDownload the installer for your operating system and follow the installation wizard to install it.

  2. Create a uni-app project:OpenHBuilderX, select File > New > Project, and then select the uni-app template. Follow the options provided by the wizard to set the project name, path, and template type, and then click OK to create the project.

  3. Select a project template: When creating a project, you can choose different template types, including empty templates, Hello uni-app,Vue, WeChat mini program, Alipay mini program, etc. Choose the right template type according to your needs.

  4. Installation and operation dependencies: Generally,uni-app projectAfter creation is completed,HBuilderXThe dependencies required by the project will be automatically installed. If it is not installed automatically, you can open the command line terminal in the project root directory and executenpm installCommand to install dependencies.

  5. Run the project: After the dependency installation is completed, you can useHBuilderXThe run button is provided to start the project. Select Run > Run to browser/mobile to preview your uni-app project on your browser or phone.

  6. Writing code:useHBuilderXProvidedCode Editor, you can start writing uni-app code. The syntax of uni-app is similar, so if you are familiar with it, it will be easier to get started.

  7. Debugging and Release: During the development process, you can passHBuilderXProvides debugging tools to check and debug code. After completing the project development, you can useHBuilderXThe publishing feature provided will publish projects as applications on various platforms, such asWeChat applet, Alipay mini-programs, Apps, etc.

two,Creation and operation of uni-app projects

Create a uni-app project:

  1. Install HBuilderX：

    • GoHBuilderX official website, download the installer for your operating system and follow the installation wizard to install it.

  2. Create a new project：

    • Open HBuilderX and select File > New > Project.
    • In the dialog box that pops up, select the "uni-app" template and click "OK".

  3. Fill in project information：

    • In the project wizard, fill in the project name, the path of the project, and select the project type that suits you, such as Vue, WeChat applet, Alipay applet, etc.

  4. Confirm creation：

    • Click the "OK" button, and HBuilderX will automatically create a uni-app project for you and install relevant dependencies.

Run the uni-app project:

  1. Select the running method：

    • In HBuilderX's toolbar, you can see a row of icons with a green triangle icon, which is the run button.
    • Click the Run button and a menu will pop up, select the target you want to run, such as your browser, mobile phone, etc.

  2. Preview project：

    • Select Run to browser and the preview page of the project will be opened in your default browser.
    • To choose to run to your phone, you need to connect to your phone first and make sure that the phone is turned on USB debugging mode. HBuilderX will then compile the project and push it to the phone to run.

  3. Debugging the project：

    • During the run, you can view the run log in the debug console of HBuilderX and debug.

  4. Stop the project：

    • If you need to stop the project, you can click the Stop button in the HBuilderX toolbar

three,Uni-app development specifications

  1. Code structure：

    • Split different functional modules into different pages or components for easy maintenance and reuse.
    • Using the Vue Single File Component (.vue) to organize pages and components to keep the code modular and maintainable.

  2. Naming Specifications：

    • Variable names, function names, component names, etc. are named in meaningful English and follow the camel naming specification.
    • It is recommended to use lowercase letters on the page file name, and hyphens can be used between multiple words.-Separation.

  3. Component Specifications：

    • Write reusable components to avoid duplication of code.
    • The props naming of components should be clear and easy to understand and follow the camel naming specification.

  4. File Management：

    • Unifiedly manage static resources, such as pictures, fonts, etc., and place them in specific directories.
    • Place pages and component files in a unified directory structure for easy search and management.

  5. Resource Management：

    • usestaticThe directory stores static resources, such as pictures, fonts, etc.
    • usepagesCatalog stores page files,componentsThe directory stores component files.

  6. Style specifications：

    • Avoid using element selectors directly in styles, and try to use class selectors or ID selectors.
    • Unified usescssorlessSuch as preprocessors write styles to improve the maintainability of style code.

  7. Comment specifications：

    • Appropriate comments can improve the readability of the code. It is recommended to add comments above key code segments, functions or components to explain their functions.

  8. Code Specification：

    • Follow JavaScript and Vue encoding specifications, such as avoiding the use of global variables, avoiding direct manipulation of DOM, etc.
    • Unify indentation and code formats to keep the code style consistent.

  9. Performance optimization：

    • Avoid loading too many pictures and animations on the page to improve page loading speed and performance.
    • Use the appropriate image format and optimize the image size to reduce the volume of the application.

4. Uni-app file directory structure

  • dist/: The packaged directory contains the compiled applet code for publishing to the online environment.
  • node_modules/: The directory where npm depends on modules.
  • src/: The project source code directory, including page files, component files, static resources, etc.
    • assets/: Store static resources, such as pictures, fonts, etc.
    • components/: Stores common components that can be referenced and reused by multiple pages.
    • pages/: Store page files, each page folder contains the Vue components, configuration files and style files of the page.
    • : The main component of the application is the entrance to the entire application.
    • : Application configuration file, containing global configuration information, such as application name, icon, permissions, etc.
    • : Page routing configuration file, which defines information such as page path, window style, etc.
  • unpackage/: The source code directory before compilation, used for debugging.
  • .gitignore: Git ignores file configuration and specifies which files do not need to be included in version control.
  • : npm dependency configuration file, including project dependency information, script commands, etc.
  • : Project description document, including a brief introduction to the project, instructions for use, etc.

five,uni-app external resource introduction

1. Introduction of local pictures or videos

  • Absolute path, a complete URL address must be provided, including protocol, domain name and resource path.

  • For example:imagesrc="/images/">Relative path, the path relative to the current file needs to be provided

  • For example: <image src="../../static/images/">or <image src="@/static/images/">  But be aware that this writing is neither an absolute path in the traditional sense nor a relative path in the strict sense, but a path alias provided by the uni-app framework to point to resource files in a specific directory.

2. Introduction of js files

For example: import "../../common/js/" or: (The following writing method requires that the export keywords are exported in the js file to be imported in this way)

Writing method one: import common from '@/utils/'

Writing method 2: import common from '../../utils/'  Please set the specific relative path according to the actual folder situation

3. Introduction of css file

Writing method one: @import "@/styles/"

Writing method 2: @import "../../styles/"  Please set the specific relative path according to the actual folder situation

6. Uni-app's page style and cloth

1. Uni-app size unit

      In uni-app, you can use the following size units to define the size of a page element:

      1、px : Pixel is the most common unit of size, representing a fixed-size pixel value. In uni-app, 1px is equivalent to a physical pixel on the device.

      2、rpx : rpx (Responsive Pixel) is a unit of relative length that can be scaled adaptively according to the screen width. On screens of different densities, 1rpx will be converted into different physical pixel counts to ensure the consistent display effect on different screens. Usually recommended in uni-apprpxTo define the unit of length, especially for the development of mobile applets and apps.

      3. Percentage (%):Percentage is a relative length unit, and the size of an element is defined based on the size of the parent element. Percentages can be used to implement responsive layouts, allowing page elements to adaptively adjust according to the size of the parent element.

2. Precautions for setting background pictures

  • supportbase64Format picture,Website

  • Supports network path pictures.

  • Supports pictures less than 40KB.

  • Note:Compress pictures online

      • If the background image is less than 40KB, when uni-app is compiled to a platform that does not support local background image, it will automatically convert it to base64 format.

      • If the background image is greater than 40KB, it is not recommended to use it. If you insist on using it, you need to manually convert it to base64 format for use, or it is best to upload it to the server and reference it through the network path.

        Local background image reference paths are recommended to use the "~@" format to reference, for example:

          

        1. 

          

          .test{
          

          2. 

        2. 

          

          background: url("~@/static/");
          

          3. 

        3. 

          

          }
          

          4.

3. Use font icons

uni-app supports the use of various font icons. The following explains several ways to use font icons:

  • Method 1:Use network path font icon (Alibaba vector icon libraryAs an example)

    • 1. Register and log in to Alibaba vector icon library, find the icon you want, add it to the shopping cart, and then create a new project, add the shopping cart icon to the project, and then enter your project icon, copy the css code

2. Introduce the newly copied code into the project

3. Use font icons through class on the page

Method 2:Font icon using local path (Alibaba vector icon libraryAs an example)

  1. Download font icons

  2. Place the downloaded font icon in the static directory of the uni-app project

3. Modified introduction path

4. Introduced in

5. Use font icons through class on the page

Summarize

uni-app is a cross-platform application development framework based on uni-app, with the following features and advantages:

  1. Cross-platform:uni-app supports the development of applications on multiple platforms such as WeChat mini-programs, Alipay mini-programs, H5 web pages, and Apps. Just write a set of code to run on multiple platforms.

  2. Component development:uni-app adoptionComponentsThe page consists of multiple components, and developers can flexibly combine and reuse components to improve development efficiency and code maintainability.

  3. Ecology:uni-app is based on the framework, and developers can make full use of the ecosystem and rich plug-ins to develop applications, enjoying the convenience and efficiency brought by them.

  4. Excellent performance:uni-app provides excellentPerformance optimizationStrategies, including asynchronous loading, lazy loading, image compression and other technical means, ensure the smoothness and stability of application on different platforms.

  5. Multi-term unity:uni-app provides a multi-end unified development experience. Developers can write code in the same development environment and adapt to the characteristics and requirements of different platforms through conditional compilation.

  6. Community active:uni-app has a huge developer community and a rich resource library. Developers can share experience, solve problems, and quickly grow and improve their technical level through the community.