构建跨平台应用的利器——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" });
    },
    goToTaskDetail(task) {
      uni.navigateTo({
        url: "/pages/taskDetail/taskDetail?id=" + task.id,
      });
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 24rpx;
  font-weight: bold;
}

.task {
  padding: 10rpx;
  border: 1rpx solid #ccc;
  margin-bottom: 10rpx;
  cursor: pointer;
}

.add-task {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  background-color: #ccc;
  color: #fff;
  border-radius: 50%;
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
}
</style>

解释：

• 页面中的data属性tasks是一个数组，用于存储待办事项列表。
• v-for指令用于遍历tasks数组，将每个任务显示为一个可点击的视图。
• goToTaskDetail方法用于在点击任务时导航到任务详情页，并通过路由参数传递任务ID。
• goToAddTask方法用于在点击添加按钮时导航到任务详情页。

4. 编写任务详情页

在/pages/taskDetail/taskDetail.vue文件中编写任务详情页的代码。任务详情页将显示选定任务的详细信息。

<template>
  <view class="container">
    <view class="header">
      <text class="title">Task Detail</text>
    </view>
    <view class="task-detail">
      <text>{{ task.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      task: null,
    };
  },
  mounted() {
    this.fetchTask();
  },
  methods: {
    fetchTask() {
      const taskId = this.$route.query.id;
      // 在实际应用中，可以通过异步请求获取任务数据
      // 这里使用静态数据作为示例
      const tasks = [
        { id: 1, title: "Task 1", description: "Description 1" },
        { id: 2, title: "Task 2", description: "Description 2" },
        { id: 3, title: "Task 3", description: "Description 3" },
      ];
      this.task = tasks.find((task) => task.id === Number(taskId));
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 24rpx;
  font-weight: bold;
}

.task-detail {
  padding: 10rpx;
  border: 1rpx solid #ccc;
}
</style>

解释：

• 页面中的data属性task用于存储选定任务的详细信息。
• mounted钩子函数在页面加载后调用fetchTask方法，根据路由参数获取任务ID，并通过静态数据查找匹配的任务。
• fetchTask方法可以替换为实际的异步请求，从服务器获取任务数据并更新task属性。

5. 完善导航功能

在UniApp中，使用uni.navigateTo方法进行页面导航。在主页和任务详情页的导航方法中，我们使用了uni.navigateTo方法来跳转到对应的页面。

6. 运行项目

完成以上步骤后，你可以运行UniApp项目并在模拟器或真机上查看待办事项列表应用的效果。

天气预报应用

1. 创建项目和页面

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

2. 设置路由

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

3. 编写主页

在/pages/home/home.vue文件中编写主页的代码。主页将显示城市列表，并提供选择城市查看天气的功能。

<template>
  <view class="container">
    <view class="header">
      <text class="title">Weather App</text>
    </view>
    <scroll-view class="city-list" scroll-y>
      <block v-for="(city, index) in cities" :key="index">
        <view class="city" @click="goToWeatherDetail(city)">
          <text>{{ city.name }}</text>
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        { id: 1, name: "New York" },
        { id: 2, name: "London" },
        { id: 3, name: "Tokyo" },
      ],
    };
  },
  methods: {
    goToWeatherDetail(city) {
      uni.navigateTo({
        url: "/pages/weatherDetail/weatherDetail?id=" + city.id,
      });
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 24rpx;
  font-weight: bold;
}

.city {
  padding: 10rpx;
  border: 1rpx solid #ccc;
  margin-bottom: 10rpx;
  cursor: pointer;
}
</style>

解释：

• 页面中的data属性cities是一个数组，用于存储城市列表。
• v-for指令用于遍历cities数组，将每个城市显示为一个可点击的视图。
• goToWeatherDetail方法用于在点击城市时导航到天气详情页，并通过路由参数传递城市ID。

4. 编写天气详情页

在/pages/weatherDetail/weatherDetail.vue文件中编写天气详情页的代码。天气详情页将显示选定城市的天气信息。

<template>
  <view class="container">
    <view class="header">
      <text class="title">Weather Detail</text>
    </view>
    <view class="weather-detail">
      <text>{{ weather.city }}</text>
      <text>Temperature: {{ weather.temperature }}°C</text>
      <text>Humidity: {{ weather.humidity }}%</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weather: null,
    };
  },
  mounted() {
    this.fetchWeather();
  },
  methods: {
    fetchWeather() {
      const cityId = this.$route.query.id;
      // 在实际应用中，可以通过异步请求获取天气数据
      // 这里使用静态数据作为示例
      const weatherData = {
        1: { city: "New York", temperature: 28, humidity: 60 },
        2: { city: "London", temperature: 20, humidity: 70 },
        3: { city: "Tokyo", temperature: 32, humidity: 50 },
      };
      this.weather = weatherData[cityId];
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 24rpx;
  font-weight: bold;
}

.weather-detail {
  padding: 10rpx;
  border: 1rpx solid #ccc;
}
</style>

解释：

• 页面中的data属性weather用于存储选定城市的天气信息。
• mounted钩子函数在页面加载后调用fetchWeather方法，根据路由参数获取城市ID，并通过静态数据查找匹配的天气信息。
• fetchWeather方法可以替换为实际的异步请求，从天气API获取天气数据并更新weather属性。

5. 完善导航功能

在UniApp中，使用uni.navigateTo方法进行页面导航。在主页和天气详情页的导航方法中，我们使用了uni.navigateTo方法来跳转到对应的页面。

6. 运行项目

完成以上步骤后，你可以运行UniApp项目并在模拟器或真机上查看天气预报应用的效果。