uniapp quick start series (1) - Overview and basic knowledge

Chapter 1: Overview and Basics

1.1 Introduction to uniapp

1.1.1 What is uniapp?

uniapp is a cross-platform application development framework based on the Vue.js framework. It allows developers to use a set of codes to build multiple platforms at the same time (including but not limited to WeChat mini-programs, Alipay mini-programs, Douyin mini-programs, etc.) s application.

In the past, we may have needed to use different technologies and tools to develop applications for different platforms, but the emergence of uniapp allows developers to conduct cross-platform development more efficiently.

In this series of columns, we mainly use WeChat mini programs as a demonstration platform, so the relevant examples are generally based on WeChat mini programs.

1.1.2 Why choose uniapp?

• Cross-platform: Using uniapp, you can develop applications for multiple platforms at the same time, avoiding the need to relearn and adapt to the development technologies of different platforms.
• Easy to use: The syntax and components of uniapp are very similar to Vue.js. If you are already familiar with Vue.js, it will be very easy to get started with uniapp.
• Excellent performance: uniapp uses a high-performance rendering engine and also implements a variety of optimization strategies to ensure the running efficiency and smoothness of the application.

1.1.3 The relationship between uniapp and WeChat mini programs

uniapp supports the development of WeChat mini programs and provides a wealth of APIs and components to ensure that applications developed by uniapp can run on WeChat mini programs.

Through uniapp, we can make full use of the features and advantages of Vue.js to quickly develop WeChat mini programs with rich functions and good user experience.

1.2 HBuilderX introduction and installation

1.2.1 What is HBuilderX?

HBuilderX is an integrated development environment (IDE) designed specifically for uniapp developers. It provides a wealth of development tools and functions, including code editing, debugging, compilation, packaging, etc., which greatly improves development efficiency.

1.2.2 Installation of HBuilderX

1.2.2.1 Windows system

On Windows systems, we can install HBuilderX through the following steps:

1. Visit DCloud official website (https://www.dcloud.io/hbuilderx.html).
2. Download the HBuilderX installation package (exe format) from the official website.
3. Double-click the installation package and follow the installation wizard to complete the installation process.

1.2.2.2 macOS system

On macOS systems, we can install HBuilderX through the following steps:

1. Visit DCloud official website (https://www.dcloud.io/hbuilderx.html).
2. Download the HBuilderX installation package (dmg format) from the official website.
3. Double-click the installation package and drag HBuilderX to the "Applications" folder in the pop-up window to complete the installation process.

1.3 uniapp project creation and configuration

1.3.1 Create uniapp project

In HBuilderX, we can create a uniapp project using the following steps:

1. Open HBuilderX.
2. Click "File" - "New" - "Project" in the menu bar.
3. In the new project window, select the "uni-app" type, fill in the name and path of the project, and click the "Create" button.
4. When I created the test project above, I checked an upload to GitCode. This function requires the installation of Little Turtle support. If necessary, you can download it through the blue jump link in front.

1.3.2 uniapp project configuration

After creating the uniapp project, we need to perform some project configurations to ensure that the project can run normally.

1.3.2.1 Configure AppID

In uniapp, each applet needs to have an independent AppID to identify the application on each platform.

In HBuilderX, we can configure the AppID through the following steps:

1. In the root directory of the project, find and open manifest.jsonthe file.
2. In manifest.jsonthe file, find the field mp-weixinunder the node appid.
3. Change appidthe value of the field to the AppID of your WeChat applet.

1.3.2.2 Configure basic libraries and operating environment

Each mini program platform has its own basic library version requirements and running environment requirements. We need to configure these requirements into the uniapp project.

In HBuilderX, we can configure it through the following steps:

1. In the root directory of the project, find and open manifest.jsonthe file.
2. In manifest.jsonthe file, find the fields under each platform node minPlatformVersionand the fields app-plusunder the node appid.
3. Modify the corresponding field values ​​according to the platform and operating environment requirements.

1.4 uniapp directory structure analysis

The directory structure of the uniapp project is very clear, and each folder has a specific purpose.

The following is the directory structure of a typical uniapp project:

├── components    // 组件目录
├── pages         // 页面目录
├── static        // 静态资源目录
├── uview-ui      // uView UI组件库目录（可选，根据需要自行添加）
├── App.vue       // 应用根组件
├── main.js       // 应用入口文件
└── manifest.json // 项目配置文件

• componentsThe folder is used to store the components of the uniapp project.
• pagesThe folder is used to store the pages of the uniapp project.
• staticThe folder is used to store static resources of the uniapp project, such as pictures, fonts, etc.
• uview-uiThe folder is the directory of the uView UI component library and can be added or deleted according to your own needs.
• App.vueIt is the root component of the application. The layout and logic of the entire application are defined in this component.
• main.jsIt is the entry file of the application, mainly used to initialize the vue instance and configure global settings.
• manifest.jsonIt is the configuration file of uniapp, used to configure the basic information of the project and the specific configuration of each platform.

1.5 uniapp life cycle

The life cycle of uniapp is very similar to the life cycle of Vue.js, and different life cycle callback functions are triggered at different stages.

The following are the commonly used life cycle callback functions of uniapp:

• onLaunch: Triggered when the mini program initialization is completed, and only triggered once globally.
• onShow: Triggered when the applet is started or displayed from the background to the foreground.
• onHide: Triggered when the applet enters the background from the foreground.
• onError: Triggered when an error occurs in the applet.
• onPageNotFound: Triggered when the mini program page does not exist.
• onUniNViewMessage: Triggered when communicating between uniapp pages.

We can write corresponding logic in these life cycles to meet the needs of the project.

1.6 Introduction to uniapp syntax and basic components

1.6.1 uniapp syntax

The syntax of uniapp is very similar to Vue.js. If you are already familiar with Vue.js, it will be very easy to get started with uniapp.

The following is the commonly used syntax for uniapp:

• { {}}: Used to interpolate bound properties or expressions.
• v-bind: Used for dynamically binding properties.
• v-ifand v-show: used to control the display and hiding of elements.
• v-for: Used to loop through the rendering list.
• v-on: used to bind events.
• v-model: used for two-way data binding.

1.6.2 Introduction to basic components of uniapp

uniapp provides a wealth of basic components to quickly build application interfaces.

The following are the basic components commonly used by uniapp:

• view: Container for displaying content.
• text: Used to display text content.
• image: Used to display pictures.
• button: Used to create buttons.
• input: Used to receive user input.
• scroll-view: Scrollable view container.
• swiper: Used to create carousel images.
• picker: Used for selectors, such as date selection, time selection, etc.

We can choose appropriate components according to the needs of the application and develop them based on the syntax of uniapp.

Sample code:

<template>
  <view>
    <text>Hello, uniapp!</text>
    <button @click="handleClick">Click me!</button>
  </view>
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleClick() {
      
      
      uni.showToast({
      
      
        title: 'Hello, World!',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
view {
      
      
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
text {
      
      
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}
button {
      
      
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  outline: none;
  border: none;
  cursor: pointer;
}
</style>

In this example, we use basic components such as view, , textand button, and implement the function of clicking a button to display a prompt box through uniapp's syntax and event binding.

1.7 Hello World

In the project view, locate and expand pagesthe folder and double-click index.vuethe file to open it. We see that a Hello project has been automatically created for us in our new project. We add a World after Hello, and then click the Run button in the toolbar:

Or click Run-Run to the mini program simulator, and then select WeChat Developer Tools. If you have not installed the WeChat developer tools, you can click here to download. The successful operation interface is as shown below: