针对您的uni-app二次开发需求,假设您希望在一个现有的影视uni-app中添加新功能,以下是一个简单的代码示例,展示如何增加一个“收藏影片”的功能。这个功能允许用户点击按钮将影片添加到收藏夹,并在收藏夹页面中查看已收藏的影片。
1. 修改影片详情页面
在影片详情页面(假设为pages/movieDetail/movieDetail.vue
),增加一个收藏按钮并绑定点击事件:
<template>
<view>
<!-- 其他影片详情内容 -->
<button @click="addToFavorites(movieId)">收藏</button>
</view>
</template>
<script>
export default {
methods: {
async addToFavorites(movieId) {
const res = await uni.setStorageSync({
key: 'favorites',
value: [...this.getFavorites(), movieId]
});
uni.showToast({
title: '收藏成功',
icon: 'success'
});
},
getFavorites() {
const favorites = uni.getStorageSync({
key: 'favorites',
default: []
}).data;
return favorites;
}
}
}
</script>
2. 创建收藏夹页面
创建一个新的页面(假设为pages/favorites/favorites.vue
),用于展示已收藏的影片:
<template>
<view>
<block v-for="movieId in favorites" :key="movieId">
<!-- 展示影片信息,假设有获取影片详情的函数getMovieDetail -->
<view>{{ getMovieDetail(movieId).title }}</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
favorites: []
};
},
onLoad() {
this.favorites = this.getFavorites();
},
methods: {
getFavorites() {
return uni.getStorageSync({
key: 'favorites',
default: []
}).data;
},
getMovieDetail(movieId) {
// 假设有一个API或本地数据可以获取影片详情
const mockMovies = [
{ id: 1, title: '电影A' },
{ id: 2, title: '电影B' }
// 更多影片...
];
return mockMovies.find(movie => movie.id === movieId);
}
}
}
</script>
3. 注意事项
- 以上代码为简化示例,实际开发中需要考虑数据持久化、API请求、错误处理等。
- 收藏按钮的样式可以根据项目需求进行自定义。
- 收藏夹页面可能需要分页加载、搜索等功能,这些都可以根据实际需求进行扩展。
- 请确保在
pages.json
中正确配置新页面路径。
以上代码提供了一个基础的收藏功能实现,您可以根据具体需求进行进一步的开发和优化。