uni-app 校园社团小程序

针对你提到的uni-app校园社团小程序开发，以下是一个简单的代码案例，用于展示如何实现社团列表展示及详情查看的基本功能。此示例假设你已经熟悉uni-app的开发环境搭建和基础操作。

1. 创建项目结构

首先，创建一个uni-app项目，并在pages目录下添加两个页面：index（社团列表页）和detail（社团详情页）。

2. 数据准备

在main.js或单独的数据文件中准备一些模拟的社团数据。

// mock data in main.js or a separate data file
const clubData = [
    { id: 1, name: '编程社', description: '专注于编程学习与实践。', imageUrl: '/static/images/club1.jpg' },
    { id: 2, name: '摄影社', description: '记录美好瞬间，分享摄影技巧。', imageUrl: '/static/images/club2.jpg' },
    // more clubs...
];

// Export the data for use in pages
export default {
    clubData
};

3. 社团列表页（index.vue）

<template>
    <view>
        <block v-for="club in clubs" :key="club.id">
            <navigator :url="`/pages/detail/detail?id=${club.id}`">
                <view class="club-item">
                    <image :src="club.imageUrl" class="club-image"></image>
                    <text class="club-name">{{ club.name }}</text>
                </view>
            </navigator>
        </block>
    </view>
</template>

<script>
import { clubData } from '@/common/data.js'; // Assuming data is in a separate file

export default {
    data() {
        return {
            clubs: clubData
        };
    }
};
</script>

<style>
.club-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.club-image {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}
.club-name {
    font-size: 16px;
    font-weight: bold;
}
</style>

4. 社团详情页（detail.vue）

<template>
    <view>
        <image :src="club.imageUrl" class="detail-image"></image>
        <text class="detail-name">{{ club.name }}</text>
        <text class="detail-description">{{ club.description }}</text>
    </view>
</template>

<script>
export default {
    data() {
        return {
            club: {}
        };
    },
    onLoad(options) {
        const { clubData } = require('@/common/data.js'); // Load data dynamically if needed
        const clubId = parseInt(options.id);
        this.club = clubData.find(club => club.id === clubId);
    }
};
</script>

<style>
.detail-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 20px;
}
.detail-name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}
.detail-description {
    font-size: 16px;
    color: #555;
}
</style>

以上代码提供了一个基本的社团列表和详情查看功能。根据实际需求，你可以进一步扩展功能，如添加搜索、分类筛选、用户评论等。