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

UNI-APP项目实战：新手入门与初级教程

标签：
Vue.js 移动开发

本文详细介绍了使用UNI-APP进行项目实战的相关内容，包括环境搭建、基础组件使用、页面路由与导航、数据绑定与事件处理、本地存储与网络请求等。通过构建一个简单的待办事项应用项目，进一步讲解了UNI-APP的实际开发流程和关键步骤。文中提供了丰富的代码示例，帮助开发者快速掌握UNI-APP项目实战技巧。

UNI-APP简介与环境搭建

UNI-APP是什么

UNI-APP是由DCloud开发的跨平台开发框架，支持通过一套代码同时运行在多个平台（如Android、iOS、H5等），大大提高了开发效率。UNI-APP的模板系统、组件系统、样式系统、事件系统等都与原生App高度相似，使得开发者可以更方便地进行原生App的开发。

开发环境搭建

要开始使用UNI-APP开发，首先需要搭建开发环境。请按照以下步骤进行：

  1. 安装Node.js：UNI-APP的开发需要Node.js环境支持，可以从Node.js官方网站下载安装最新版本。
  2. 安装HBuilderX：HBuilderX是UNI-APP的官方开发工具，可以从DCloud官网下载HBuilderX安装包并安装。
  3. 配置HBuilderX：打开HBuilderX后，需要安装一些必要的插件，如uni-app插件、ESLint等，这些插件可以提高开发效率。可以通过HBuilderX左侧的插件市场安装这些插件。

第一个UNI-APP项目创建

创建第一个UNI-APP项目，可以在HBuilderX中按照以下步骤操作：

  1. 打开HBuilderX，选择“文件”->“打开项目”或“新建项目”。
  2. 选择“uni-app”模板，输入项目名称，选择项目保存位置，点击“确定”。
  3. 项目创建完成后，HBuilderX会自动生成一些基础文件和目录结构，包括app.vue、pages等。
  4. 在pages目录下创建一个新的页面文件，例如pages/index/index.vue，用于定义首页的逻辑。
<!-- pages/index/index.vue -->
<template>
  <view>
    <h1>欢迎来到我的UNI-APP应用</h1>
    <button @click="handleClick">点击我</button>
  </view>
</template>

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

<style scoped>
h1 {
  color: #007AFF;
}
</style>
基础组件使用教程

常用UI组件介绍

UNI-APP提供了丰富的UI组件，包括但不限于<view>、<text>、<button>、<image>等，用于构建界面。例如：

<!-- pages/index/index.vue -->
<template>
  <view>
    <view>这是一个视图组件</view>
    <text>这是一个文本组件</text>
    <button>这是一个按钮组件</button>
    <image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="static/logo.png"></image>
  </view>
</template>

组件的基本使用方法

在UNI-APP中，组件的基本使用方式与HTML类似。例如，创建一个按钮组件，可以在模板中定义<button>标签，并通过@click事件绑定事件处理器。

<!-- pages/index/index.vue -->
<template>
  <view>
    <button @click="handleClick">点击我</button>
  </view>
</template>

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

组件属性的修改与自定义

UNI-APP的组件支持直接修改属性。例如，在定义按钮组件时，可以通过type属性来设置按钮的类型。

<!-- pages/index/index.vue -->
<template>
  <view>
    <button type="primary" @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
}
</script>
页面路由与导航

页面路由的基本概念

在UNI-APP中，页面路由是应用程序中页面之间的流转方式。每个页面都有一个唯一的路径，可以通过路由进行跳转。

页面跳转与传参

页面跳转可以通过uni.navigateTo方法实现，并可以传递参数。例如：

<!-- pages/index/index.vue -->
<template>
  <view>
    <button @click="navigateTo">跳转到详情页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo() {
      uni.navigateTo({
        url: '/pages/detail/detail',
        success: (res) => {
          console.log('跳转成功');
        },
        fail: (err) => {
          console.error('跳转失败', err);
        }
      });
    }
  }
}
</script>

在/pages/detail/detail.vue中可以通过$options.params来接收传递的参数。

<!-- pages/detail/detail.vue -->
<template>
  <view>
    <h1>详情页</h1>
    <p>传递的参数是: {{ $options.params.id }}</p>
  </view>
</template>

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

导航栏的基本使用

导航栏用于显示页面的标题和导航按钮。可以通过<view>组件来定义导航栏，并使用<text>组件显示标题。

<!-- pages/index/index.vue -->
<template>
  <view>
    <view class="navbar">
      <text>首页</text>
    </view>
    <button @click="navigateTo">跳转到详情页</button>
  </view>
</template>

<style scoped>
.navbar {
  height: 44px;
  background-color: #007AFF;
  color: white;
  padding: 10px 16px;
}
</style>

<script>
export default {
  methods: {
    navigateTo() {
      uni.navigateTo({
        url: '/pages/detail/detail',
        success: (res) => {
          console.log('跳转成功');
        },
        fail: (err) => {
          console.error('跳转失败', err);
        }
      });
    }
  }
}
</script>
数据绑定与事件处理

数据绑定的基础知识

数据绑定是连接Vue实例的数据和DOM的方式。在UNI-APP中，通过v-model、v-bind等指令来实现数据的双向绑定。

<!-- pages/index/index.vue -->
<template>
  <view>
    <input type="text" v-model="inputValue" />
    <span>输入的内容是: {{ inputValue }}</span>
  </view>
</template>

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

事件绑定与事件处理

事件绑定也是通过指令实现的，常用的事件绑定指令有@click、@change等。

<!-- pages/index/index.vue -->
<template>
  <view>
    <input type="text" v-model="inputValue" @input="handleInput" />
    <span>输入的内容是: {{ inputValue }}</span>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput(e) {
      console.log('输入的内容', e.detail.value);
    }
  }
}
</script>

条件渲染与列表渲染

条件渲染和列表渲染是通过v-if、v-for等指令实现的。

<!-- pages/index/index.vue -->
<template>
  <view>
    <view v-if="show">显示内容</view>
    <view v-else>隐藏内容</view>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>
本地存储与网络请求

本地存储的基本使用

本地存储包括uni.setStorage、uni.getStorage等API，用于存储和获取数据。

<!-- pages/index/index.vue -->
<template>
  <view>
    <button @click="saveData">保存数据</button>
    <button @click="readData">读取数据</button>
  </view>
</template>

<script>
export default {
  methods: {
    saveData() {
      uni.setStorage({
        key: 'name',
        data: '张三',
        success: () => {
          console.log('数据保存成功');
        }
      });
    },
    readData() {
      uni.getStorage({
        key: 'name',
        success: (res) => {
          console.log('读取的数据', res.data);
        },
        fail: (err) => {
          console.error('读取数据失败', err);
        }
      });
    }
  }
}
</script>

网络请求的基础知识

网络请求是通过uni.request方法实现的，可以发送GET、POST等请求。

<!-- pages/index/index.vue -->
<template>
  <view>
    <button @click="requestData">发起网络请求</button>
  </view>
</template>

<script>
export default {
  methods: {
    requestData() {
      uni.request({
        url: 'https://api.example.com/data',
        method: 'GET',
        data: {
          id: 1
        },
        success: (res) => {
          console.log('请求成功', res.data);
        },
        fail: (err) => {
          console.error('请求失败', err);
        }
      });
    }
  }
}
</script>
项目实战：开发一个简单的应用

项目需求分析

假设我们要开发一个简单的待办事项（To-Do List）应用，主要功能包括：

  1. 用户可以添加新的待办事项。
  2. 用户可以查看所有待办事项。
  3. 用户可以删除已完成的待办事项。

功能模块设计

根据需求，功能模块可以划分为以下几个部分：

  1. 首页（Home）：展示所有待办事项列表。
  2. 添加事项页面（Add）：提供输入框让用户输入新的待办事项。
  3. 详情页面（Detail）：显示单个待办事项的详细信息，以及删除选项。

功能模块实现与调试

根据功能模块设计，我们可以开始实现具体的功能代码。首先创建几个基本页面文件。

首页（Home）

<!-- pages/home/home.vue -->
<template>
  <view>
    <h1>待办事项列表</h1>
    <ul>
      <li v-for="item in todoItems" :key="item.id">
        {{ item.content }}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
    <button @click="navigateToAdd">添加事项</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      todoItems: [
        { id: 1, content: '买牛奶', completed: false },
        { id: 2, content: '做饭', completed: false }
      ]
    }
  },
  methods: {
    deleteItem(id) {
      this.todoItems = this.todoItems.filter(item => item.id !== id);
    },
    navigateToAdd() {
      uni.navigateTo({
        url: '/pages/add/add'
      });
    }
  }
}
</script>

添加事项页面（Add）


<!-- pages/add/add.vue -->
<template>
  <view>
    <h1>添加待办事项</h1>
    <input type="text" v-model="newItem" />
    <button @click="addItem">添加</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim() === '') {
        return;
      }
      this.$options.router.push({
        path: '/pages/home/home',
        query: {
          newItem: this.newItem
        }
      });
      this.newItem = '';
    }
  }
}
</script>
``

#### 详情页面（Detail）

```html
<!-- pages/detail/detail.vue -->
<template>
  <view>
    <h1>{{ item.content }}</h1>
    <button @click="deleteItem">删除</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {}
    }
  },
  onLoad(options) {
    this.item = JSON.parse(options.item);
  },
  methods: {
    deleteItem() {
      this.$options.router.push({
        path: '/pages/home/home',
        query: {
          id: this.item.id
        }
      });
    }
  }
}
</script>
``

#### 初始化首页待办事项列表

在首页初始化时，需要获取存储在本地的待办事项列表，可以使用`uni.getStorage`来实现。

```html
<!-- pages/home/home.vue -->
<script>
export default {
  data() {
    return {
      todoItems: []
    }
  },
  onLoad() {
    this.initTodoItems();
  },
  methods: {
    initTodoItems() {
      uni.getStorage({
        key: 'todoItems',
        success: (res) => {
          this.todoItems = JSON.parse(res.data);
        }
      });
    },
    deleteItem(id) {
      this.todoItems = this.todoItems.filter(item => item.id !== id);
      this.saveTodoItems();
    },
    navigateToAdd() {
      uni.navigateTo({
        url: '/pages/add/add'
      });
    },
    saveTodoItems() {
      uni.setStorage({
        key: 'todoItems',
        data: JSON.stringify(this.todoItems)
      });
    }
  }
}
</script>
``

#### 添加待办事项逻辑

在添加页面中，添加待办事项后需要将其保存到本地存储，并更新首页待办事项列表。

```html
<!-- pages/add/add.vue -->
<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim() === '') {
        return;
      }
      const todoId = this.$options.router.query.id || 0;
      const newTodo = {
        id: todoId + 1,
        content: this.newItem,
        completed: false
      };
      this.$options.router.push({
        path: '/pages/home/home',
        query: {
          newItem: this.newItem
        }
      });
      this.$options.router.push({
        path: '/pages/home/home',
        query: {
          id: newTodo.id
        }
      });
      this.newItem = '';
      this.saveTodoItems(newTodo);
    },
    saveTodoItems(newTodo) {
      let todoItems = [];
      uni.getStorage({
        key: 'todoItems',
        success: (res) => {
          todoItems = JSON.parse(res.data);
        },
        complete: () => {
          todoItems.push(newTodo);
          uni.setStorage({
            key: 'todoItems',
            data: JSON.stringify(todoItems)
          });
        }
      });
    }
  }
}
</script>
``

### 总结
通过上述步骤，我们可以构建一个简单的UNI-APP待办事项应用。文章中提供了完整的代码示例，帮助开发者快速上手UNI-APP项目实战。
点击查看更多内容
发表于 2024.11.02 02:33， 共 110 人浏览

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

举报
为 TA 点赞

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

评论

作者其他优质文章

正在加载中

莫回无

手记
篇
粉丝
3
获赞与收藏
2

关注作者，订阅最新文章

阅读免费教程

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消