Let’s talk about how beginners use uniapp

As the mobile application market grows, more and more companies or individuals begin to develop their own mobile applications. However, many developers are deterred by problems such as learning multiple programming languages, adapting to various mobile phone systems and screens of different sizes. The Swiss army knife-like cross-platform development framework uniapp came into being. It is a development framework that can run on multiple platforms, allowing developers to develop full-platform applications that are applicable to multiple platforms under one code.

Uniapp is based on the Vue framework and compiles its source code into native applications for different platforms. Supported platforms include: iOS, Android, H5, mini programs, quick apps, apps, etc. This article will guide beginners on how to use uniapp.

Install uniapp

First of all, before installing uniapp, you need to install the Node.js environment and ensure that its version is 8.0 or above.

After installing the Node.js environment, we can use the npm (Node.js package management tool) command line to install the uniapp scaffolding tool.

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

In this way, you can successfully install uniapp and create an initial project my-project.

Directory structure of uniapp

After creating the project, let’s take a look at the directory structure of the project. The main folders of the project include:

• components: storage component folder, ending with .vue suffix.
• pages: Storage page folder, ending with .vue suffix.
• static: Store static files, such as pictures and fonts, etc.
• unpackage: The folder generated after the project is packaged.
• App.vue: The main page of the entire application.
• main.js: The entry file for the entire application.

Writing uniapp application

We have successfully installed uniapp and created an initial project, so next, let's write some simple code.

Create a page

Create a new vue file in the pages folder of the project, such as home.vue. Write the following code in the file:

<template>
  <view class="content">
    <text>{{ greeting }}</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        greeting: 'Hello uniapp!'
      }
    }
  }
</script>

In this way, we create a new page.

Navigate to another page

Next step, let’s say we want to click a button in page 1 and jump to page 2. We can add the following code to page 1:

<button @click="goToPage2">Go to page 2</button>

After clicking the button, we need to add the following code to the script tag of page 1:

methods: {
  goToPage2() {
    uni.navigateTo({
      url: '/pages/page2.vue'
    })
  }
}

In this way, we can add the following code to page 1 Jump to page 2.

Introduction of pictures

Suppose we need to introduce a picture into the page. You need to store the picture in the static folder first, and then use the relative path to reference it in the .vue file.

<template>
  <view>
    <image :src="`/static/${image}`" mode="aspectFit"></image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        image: 'image.jpg'
      }
    }
  }
</script>

Initiate a network request

get request:

uni.request({
  url: 'https://www.xxx.com/api/list',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

post request:

uni.request({
  url: 'https://www.xxx.com/api/list',
  method: 'POST',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

Run uniapp

After completing the above code writing, We need to run the following command in the command line:

npm run dev:%PLATFORM%

%PLATFORM% represents the required platform, you can fill in iOS, Android, etc. here. After running the above command, you can preview the project effect on the simulator or real machine.

Summary

uniapp provides developers with cross-platform development solutions, greatly reducing development costs and improving development efficiency. Using it, developers only need to master one programming language to develop full-platform applications on multiple platforms, helping developers conduct development operations more efficiently.

The above is the detailed content of Let’s talk about how beginners use uniapp. For more information, please follow other related articles on the PHP Chinese website!