为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 UNI-APP教程：新手入门与实践指南

UNI-APP教程：新手入门与实践指南

标签：
Vue.js 移动开发
概述

本文提供了详细的UNI-APP教程，涵盖框架介绍、环境搭建和项目开发全流程。从安装Node.js和HBuilderX到创建首个UNI-APP项目，再到常用组件使用、页面导航及数据绑定，帮助开发者快速上手UNI-APP开发。

UNI-APP简介与安装
UNI-APP介绍

UNI-APP 是一个使用 Vue.js 开发跨平台应用的前端框架，支持多个平台，如微信小程序、支付宝小程序、H5、Android 和 iOS 等。它利用单一代码库来搭建多个前端应用，大大提高了开发效率，减少了跨平台开发的复杂性。

UNI-APP 框架的核心特性包括：

  • 单一代码库：通过一套代码，可以在多个平台上运行。
  • Vue.js 框架：使用 Vue.js 的语法和特性，便于快速开发。
  • 组件库：内置了丰富的基础组件和自定义组件。
  • 路由管理：提供页面跳转和路由管理功能。
  • 数据绑定与事件处理：支持数据绑定和事件处理机制。
  • 字节跳动定制组件：为字节跳动生态提供了专门的组件支持。
开发环境搭建

要开始使用 UNI-APP，首先需要搭建好开发环境。以下是开发环境搭建的步骤：

  1. 安装 Node.js
    UNI-APP 需要 Node.js 环境来进行编译和运行。你可以从 Node.js 官方网站下载并安装最新版本的 Node.js。

  2. 安装 HBuilderX
    HBuilderX 是 UNI-APP 的官方 IDE，提供了强大的代码编辑、调试和打包功能。你可以从官方网站下载 HBuilderX，并按照安装向导进行安装。

    # 下载 HBuilderX
https://www.dcloud.io/hbuilderx.html
  3. 创建 UNI-APP 项目
    使用 HBuilderX 创建一个新的 UNI-APP 项目。在 HBuilderX 中选择“文件”>“新建”>“UNI-APP 项目”，按照提示填写项目名称和路径，然后选择要支持的平台（如 H5、小程序、App 等）并完成创建。
第一个 UNI-APP 项目创建

创建一个简单的“Hello World”项目，来熟悉 UNI-APP 的基本结构和开发流程。

  1. 创建项目
    在 HBuilderX 中选择“文件”>“新建”>“UNI-APP 项目”，填写项目名称，例如 MyFirstUniApp，设置项目目录，选择目标平台（如 H5）后点击“完成”。

  2. 项目结构
    创建的项目会包含以下基本文件和文件夹：

    • pages: 项目页面的根目录，每个页面都有一个文件夹，里面包含 index.vue 页面文件。
    • static: 存放静态资源文件，如图片、字体等。
    • App.vue: 应用的根组件。
    • main.js: 应用的入口文件。
    • uni.scss: 项目全局样式文件。
    • uni.config.js: 项目配置文件。

  3. 编写代码
    修改 pages/index/index.vue 文件，编写简单的“Hello World”页面。

    <template>
 <view class="container">
   <text class="hello">Hello World</text>
 </view>
</template>

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

<style scoped>
.container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 font-size: 24px;
}

.hello {
 color: #333;
}
</style>
  4. 运行项目
    在 HBuilderX 中选择“运行”>“在浏览器中运行”，或者使用终端命令 npm run dev 运行项目。浏览器中会打开新标签页展示“Hello World”页面。
常用UI组件使用
基础组件介绍

UNI-APP 提供了一套丰富的基础组件，诸如 view、text、button 等，用于构建页面的结构和样式。以下是一些常见的基础组件及其用法：

view 组件

view 组件用于创建页面中的容器，类似于 HTML 中的 <div> 标签。

<view class="container">
  <text class="content">Hello, UNI-APP!</text>
</view>

text 组件

text 组件用于显示文本内容，类似于 HTML 中的 <span> 或 <p> 标签。

<text class="content">Hello, UNI-APP!</text>

button 组件

button 组件用于创建按钮，可以通过 type 属性设置按钮的样式。

<button type="primary">点击我</button>

input 组件

input 组件用于创建输入框，可以通过 type 属性设置输入类型，如 text、number、date 等。

<input type="text" placeholder="请输入内容" />

image 组件

image 组件用于显示图片，可以通过 src 属性指定图片的路径。

<image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/logo.png" mode="widthFix" />

list 组件

list 组件用于展示列表数据。可以通过 mode 属性设置列表的显示模式。

<list mode="waterfall">
  <cell v-for="(item, index) in items" :key="index">
    <view>{{ item.title }}</view>
  </cell>
</list>
常见组件实践

我们可以通过实际的案例来展示如何使用这些组件。例如，创建一个简单的表单，包含输入框、按钮和图片。

<template>
  <view class="container">
    <view class="form">
      <view class="input-row">
        <text class="input-label">用户名:</text>
        <input type="text" placeholder="请输入用户名" v-model="username" />
      </view>
      <view class="input-row">
        <text class="input-label">密码:</text>
        <input type="password" placeholder="请输入密码" v-model="password" />
      </view>
      <button type="primary" @tap="submit">提交</button>
    </view>
    <image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/logo.png" mode="widthFix" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submit() {
      console.log('用户名: ' + this.username)
      console.log('密码: ' + this.password)
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 300px;
}

.input-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.input-label {
  margin-bottom: 5px;
}

button {
  margin-top: 10px;
}
</style>
页面导航与跳转
页面跳转基础

在 UNI-APP 中，页面跳转是通过路由管理来实现的。页面之间的跳转可以通过 navigator 组件或编程方式来实现。

使用 navigator 组件

navigator 组件用于创建页面跳转链接，类似于 HTML 中的 <a> 标签。

<template>
  <view class="container">
    <navigator url="/pages/about/index">跳转到关于页面</navigator>
  </view>
</template>

编程式跳转

在 Vue 组件的方法中，可以通过 uni.navigateTo 或 uni.redirectTo 等 API 进行页面跳转。

<script>
export default {
  data() {
    return {};
  },
  methods: {
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/about/index'
      })
    }
  }
}
</script>
路由管理

UNI-APP 提供了基于 Vue Router 的路由管理功能，用于管理页面之间的导航。路由配置通常在 uniapp/router.js 文件中定义。

路由配置

// uniapp/router.js
import Vue from 'vue'
import Router from 'vue-router'
import AboutPage from '@/pages/about/index.vue'
import DetailPage from '@/pages/detail/index.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/pages/index/index',
      component: () => import('@/pages/index/index.vue')
    },
    {
      path: '/pages/about/index',
      component: AboutPage
    },
    {
      path: '/pages/detail/index/:id',
      component: DetailPage
    }
  ]
})

动态路由

UNI-APP 支持动态路由，可以在路由配置中使用动态参数。

// pages/detail/index.vue
<template>
  <view class="container">
    <text>{{ id }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: ''
    }
  },
  onLoad(query) {
    this.id = query.id
  }
}
</script>

路由配置：

// uniapp/router.js
import DetailPage from '@/pages/detail/index.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/pages/index/index',
      component: () => import('@/pages/index/index.vue')
    },
    {
      path: '/pages/about/index',
      component: AboutPage
    },
    {
      path: '/pages/detail/index/:id',
      component: DetailPage
    }
  ]
})
数据绑定与事件处理
数据绑定介绍

数据绑定是 UNI-APP 中非常重要的特性之一，它允许我们直接在模板中展示和操作数据。主要有三种数据绑定方式：插值绑定、v-model、指令绑定。

插值绑定

插值绑定使用 {{ }} 语法，可以在模板中展示数据。

<template>
  <view class="container">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, UNI-APP!'
    }
  }
}
</script>

v-model 绑定

v-model 用于双向数据绑定，通常用于表单输入控件。

<template>
  <view class="container">
    <input type="text" v-model="username" placeholder="请输入用户名" />
    <text>{{ username }}</text>
  </view>
</template>

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

指令绑定

UNI-APP 支持多种自定义指令，如 v-bind、v-on 等。

<template>
  <view class="container">
    <view :class="active ? 'active' : ''">点击我</view>
    <button @tap="toggleActive">切换状态</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: false
    }
  },
  methods: {
    toggleActive() {
      this.active = !this.active
    }
  }
}
</script>

<style scoped>
.active {
  color: #333;
  background-color: #ffcccc;
}
</style>
事件处理基础

UNI-APP 提供了多种事件处理机制，可以通过 v-on 指令来绑定事件。

基本事件

<template>
  <view class="container">
    <button @tap="handleTap">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      console.log('按钮被点击了')
    }
  }
}
</script>

阻止单击事件冒泡

有时需要阻止事件冒泡，防止触发父元素的事件。

<template>
  <view class="container">
    <view @tap="handleTapParent" style="padding: 10px;">
      <button @tap.stop="handleTapChild">点击我</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleTapParent() {
      console.log('父元素被点击了')
    },
    handleTapChild() {
      console.log('子元素被点击了')
    }
  }
}
</script>

事件修饰符

UNI-APP 支持多种事件修饰符，如 .prevent、.stop、.once 等。

<template>
  <view class="container">
    <button @tap.prevent="handleTap">阻止默认行为</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      console.log('按钮被点击了')
    }
  }
}
</script>
列表与循环
列表基本用法

在 UNI-APP 中，可以通过 v-for 指令来遍历数组和对象，并根据数据渲染列表。

遍历数组

<template>
  <view class="container">
    <view v-for="(item, index) in items" :key="index">
      <text>{{ item.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: '项目1' },
        { title: '项目2' },
        { title: '项目3' }
      ]
    }
  }
}
</script>

遍历对象

<template>
  <view class="container">
    <view v-for="(value, key) in object" :key="key">
      <text>{{ key }}: {{ value }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      object: {
        name: '张三',
        age: 28,
        job: '程序员'
      }
    }
  }
}
</script>
条件渲染与循环

UNI-APP 支持条件渲染和循环，可以基于不同条件渲染不同的内容。

条件渲染

<template>
  <view class="container">
    <text v-if="show">显示内容</text>
    <text v-else>隐藏内容</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

当前项

在循环中，可以通过 v-for 提供的 current 参数来获取当前项。

<template>
  <view class="container">
    <view v-for="(item, index, current) in items" :key="index">
      <text>{{ current }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: '项目1' },
        { title: '项目2' },
        { title: '项目3' }
      ]
    }
  }
}
</script>
项目实战：打造第一个UNI-APP应用
项目需求分析

我们将开发一个简单的待办事项应用，用户可以添加、删除和标记待办事项。

功能需求

  1. 添加待办事项：用户可以输入内容并添加新的待办事项。
  2. 删除待办事项：用户可以删除已完成的待办事项。
  3. 标记待办事项：用户可以标记已完成的待办事项。
项目开发流程

  1. 项目初始化
    创建一个新的 UNI-APP 项目，并设置好目标平台。

  2. 页面设计
    设计主页面和添加页面的布局和样式。

  3. 功能实现
    实现各项功能，包括添加、删除和标记待办事项。

主页面代码

<template>
  <view class="container">
    <view class="todo-list">
      <view v-for="(item, index) in todos" :key="index" class="todo-item">
        <text class="todo-title" @tap="toggleCompleted(index)">{{ item.title }}</text>
        <button @tap="deleteTodo(index)">删除</button>
      </view>
    </view>
    <view class="add-todo">
      <input type="text" v-model="newTodo" placeholder="添加事项" />
      <button @tap="addTodo">添加</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ title: this.newTodo, completed: false })
        this.newTodo = ''
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    },
    toggleCompleted(index) {
      this.todos[index].completed = !this.todos[index].completed
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.todo-list {
  margin-bottom: 20px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.todo-title {
  text-decoration: line-through;
}

.add-todo {
  display: flex;
  justify-content: space-between;
}
</style>

添加页面代码

<template>
  <view class="container">
    <input type="text" v-model="newTodo" placeholder="添加事项" />
    <button @tap="addTodo">添加</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        uni.$emit('add-todo', this.newTodo)
        this.newTodo = ''
        uni.navigateBack()
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #333;
  color: #fff;
}
</style>
应用发布与调试

应用发布

发布应用之前，需要进行详细的调试和测试，确保应用在各个平台上的兼容性和稳定性。

调试工具

使用 HBuilderX 提供的调试工具进行调试。可以在 HBuilderX 中选择“运行”>“在浏览器中运行”，或者使用 devtools 查看应用在不同平台上的表现。

发布平台

可以将应用发布到微信小程序、支付宝小程序、H5 等多个平台。在 HBuilderX 中选择“构建”>“构建到本地”，然后选择目标平台进行构建。

# 构建到微信小程序
npm run build:wxapp

# 构建到支付宝小程序
npm run build:alipayapp

# 构建到H5
npm run build:h5

通过以上步骤，你可以完成一个简单的待办事项应用的开发、调试和发布。

点击查看更多内容
发表于 2024.11.02 00:25， 共 56 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

扬帆大鱼

手记
篇
粉丝
13
获赞与收藏
50

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消