构建跨平台应用的利器——UniApp入门级开发小实战

原创

已于 2023-08-05 23:33:25 修改 · 1.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-06-29 20:09:02 首次发布

文章介绍了如何使用UniApp框架开发两个入门级应用：待办事项列表和天气预报。首先创建项目和页面，设置路由，然后分别编写主页和详情页的代码，实现数据展示和导航功能。最后，通过运行项目在模拟器或真机上查看效果。

文章目录

待办事项列表应用
天气预报应用

根据构建跨平台应用的利器——UniApp入门指南这篇文章我们来简单开发一些常用的入门级项目

待办事项列表应用

当涉及到实战项目时，一个常见的示例是构建一个简单的待办事项列表应用。以下是使用UniApp框架构建该应用的代码示例和详细解释：

1. 创建项目和页面

首先，创建一个新的UniApp项目，并在项目中创建两个页面：主页（Home）和任务详情页（TaskDetail）。

在这里插入图片描述

2. 设置路由

在项目的/pages.json文件中设置页面路由，确保主页对应的路径为"/pages/home/home"，任务详情页对应的路径为"/pages/taskDetail/taskDetail"。

在这里插入图片描述

3. 编写主页

在/pages/home/home.vue文件中编写主页的代码。主页将显示待办事项列表，并提供添加新任务的功能。

<template>
  <view class="container">
    <view class="header">
      <text class="title">Todo List</text>
    </view>
    <scroll-view class="task-list" scroll-y>
      <block v-for="(task, index) in tasks" :key="index">
        <view class="task" @click="goToTaskDetail(task)">
          <text>{
  
  { task.title }}</text>
        </view>
      </block>
    </scroll-view>
    <view class="add-task" @click="goToAddTask">
      <text>+</text>
    </view>
  </view>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      tasks: [
        {
     
      id: 1, title: "Task 1" },
        {
     
      id: 2, title: "Task 2" },
        {
     
      id: 3, title: "Task 3" },
      ],
    };
  },
  methods: {
     
     
    goToAddTask() {
     
     
      uni.navigateTo({
     
      url: "/pages/taskDetail/taskDetail" });
    },