根据构建跨平台应用的利器——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" }, ```javascript ]; 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项目并在模拟器或真机上查看天气预报应用的效果。
