返回

从入门到精通 uni-app

前端

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

入门准备

  • 安装Node.js和npm
  • 安装uni-app CLI
  • 创建uni-app项目

环境搭建

  1. 安装Node.js和npm
# macOS / Linux
brew install node
# Windows
visit the Node.js download page and install the LTS version
  1. 安装uni-app CLI
npm install -g @uni/cli
  1. 创建uni-app项目
uni-app init my-project
cd my-project

组件使用

uni-app提供了丰富的组件库，可用于构建各种页面和应用。

  • 视图容器组件 ：如View、Scrollview、Swiper等，用于布局页面内容。
  • 基础组件 ：如Text、Image、Button等，用于展示和交互。
  • 表单组件 ：如Input、Textarea、Checkbox等，用于收集用户输入。
  • 导航组件 ：如NavigationBar、TabBar等，用于页面导航。
  • 扩展组件 ：如Map、Camera、Audio等，用于访问设备功能。

组件的使用非常简单，只需在页面模板中声明即可。例如：

<template>
  <view class="container">
    <text>Hello uni-app!</text>
    <button @click="onClick">Click me</button>
  </view>
</template>

<script>
export default {
  methods: {
    onClick() {
      uni.showToast({
        title: 'Button clicked'
      })
    }
  }
}
</script>

数据绑定

uni-app支持数据绑定，可以方便地将数据与视图同步。

数据绑定有两种方式：

  • 插值表达式 ：在模板中使用双花括号表达式，即可将数据绑定到视图上。例如：
<view class="container">
  <text>{{ message }}</text>
</view>

">export default {
  data() {
    return {
      message: 'Hello uni-app!'
    }
  }
}
</script>
  • v-model指令 ：v-model指令可以将表单组件的值与数据绑定。例如：
<view class="container">
  <input v-model="message">
</view>

">export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

事件处理

uni-app支持事件处理，可以方便地响应用户交互。

事件处理有两种方式：

  • 事件监听器 ：在模板中使用@事件名的方式，即可监听事件。例如：
<view class="container">
  <button @click="onClick">Click me</button>
</view>

">export default {
  methods: {
    onClick() {
      uni.showToast({
        title: 'Button clicked'
      })
    }
  }
}
</script>
  • v-on指令 ：v-on指令可以将事件绑定到组件上。例如：
<view class="container">
  <button v-on:click="onClick">Click me</button>
</view>

">export default {
  methods: {
    onClick() {
      uni.showToast({
        title: 'Button clicked'
      })
    }
  }
}
</script>

网络请求

uni-app支持网络请求，可以方便地与后端服务器通信。

网络请求有两种方式：

  • uni.request()方法 ：uni.request()方法可以发送HTTP请求。例如：
uni.request({
  url: 'https://example.com/api/v1/users',
  success: (res) => {
    console.log(res.data)
  }
})
  • axios库 ：axios库是一个流行的HTTP请求库，也可以在uni-app中使用。例如：
import axios from 'axios'

axios.get('https://example.com/api/v1/users')
  .then((res) => {
    console.log(res.data)
  })

结语

本指南只是uni-app入门的一小部分，还有更多的内容需要您去探索。

uni-app是一个非常强大的框架，可以帮助您快速开发出高质量的跨平台移动应用。

如果您想了解更多关于uni-app的内容，可以访问uni-app官网或查看uni-app文档。