乡村振兴三农小程序

项目简介

这是一个乡村振兴与三农服务的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了政策解读、农业科技、数字乡村、乡村旅游、农产品展销、乡风文明、人才振兴、基层党建、经验分享等核心功能模块，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	最新稳定版
开发语言	JavaScript (ES6+)
样式语言	WXSS (微信小程序样式)
模板语言	WXML (微信小程序模板)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 内容丰富：涵盖乡村振兴战略的多个核心领域
• UI设计清新：界面风格简洁大方，绿色主题配色，符合三农类应用调性
• 模块化设计：功能模块独立，便于扩展和维护
• 信息展示全面：政策解读、科技推广、旅游推介、产品展销一应俱全

功能模块

1. 首页模块 (pages/index)

• 轮播图展示乡村振兴成果
• 核心功能区快捷入口（8大功能模块）
• 焦点新闻动态展示
• 点击进入各功能详情页

2. 政策解读模块 (pages/policy_interpretation)

• 政策分类展示（农业补贴、农村金融、乡村规划）
• 政策列表展示
• 点击进入政策详情

3. 政策详情模块 (pages/policy_detail)

• 政策标题、分类、发布日期
• 政策完整内容展示
• 政策要点解读

4. 农业科技模块 (pages/agricultural_technology)

• 科技分类展示（智慧农业、生物育种、高效种植）
• 科技成果列表
• 技术摘要展示
• 点击进入技术详情

5. 技术详情模块 (pages/technology_detail)

• 技术标题、分类、发布日期
• 技术完整内容介绍
• 应用案例展示

6. 数字乡村模块 (pages/digital_village)

• 数字乡村概念介绍
• 应用场景展示（智慧村务、数字农业、乡村电商、数字生活）
• 典型案例分享

7. 乡村旅游模块 (pages/rural_tourism)

• 旅游目的地推荐
• 目的地图片、名称、简介
• 特色体验项目介绍
• 点击进入旅游详情

8. 旅游详情模块 (pages/tourism_detail)

• 目的地详细介绍
• 景点图片展示
• 特色体验说明

9. 农产品展销模块 (pages/agricultural_product)

• 农产品分类展示（水果、粮油等）
• 产品图片、名称、产地、价格
• 产品特色标签
• 点击进入产品详情

10. 产品详情模块 (pages/product_detail)

• 产品大图展示
• 产品名称、产地、价格
• 产品特色介绍
• 产品故事/背景

11. 乡风文明模块 (pages/rural_civilization)

• 文明主题展示（孝老爱亲、移风易俗、文化传承）
• 文明实践案例分享
• 典型做法介绍

12. 人才振兴模块 (pages/talent_revitalization)

• 人才政策介绍
• 优秀人才展示
• 返乡创业案例
• 咨询服务入口

13. 基层党建模块 (pages/grassroots_party_building)

• 党建工作介绍
• 优秀党支部展示
• 党建活动动态
• 活动图片展示

14. 经验分享模块 (pages/experience_sharing)

• 成功案例分享
• 专家观点展示
• 经验做法介绍

15. 联系我们模块 (pages/contact_us)

• 小程序介绍
• 团队介绍
• 联系方式（地址、电话、邮箱）
• 免责声明
• 版权信息

项目结构

xiangcunzhenxing-min/
├── app.js                    # 小程序入口文件，全局数据管理
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── images/                   # 图片资源目录
│   ├── tabbar/               # TabBar图标
│   │   ├── home.png          # 首页图标
│   │   ├── home1.png         # 首页选中图标
│   │   ├── n.png             # 农产品图标
│   │   ├── n1.png            # 农产品选中图标
│   │   ├── l.png             # 乡村旅游图标
│   │   ├── l1.png            # 乡村旅游选中图标
│   │   ├── user.png          # 联系我们图标
│   │   └── user1.png         # 联系我们选中图标
│   ├── icon_1.png ~ icon_8.png # 功能入口图标
│   ├── banner1.jpg, banner2.jpg # 轮播图
│   ├── b-1.jpg, b-2.jpg      # 党建图片
│   ├── g-1.jpg, g-2.jpg      # 农产品图片
│   └── t-1.jpg, t-2.jpg      # 旅游图片
├── components/               # 自定义组件目录
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── policy_interpretation/ # 政策解读页
│   ├── policy_detail/        # 政策详情页
│   ├── agricultural_technology/ # 农业科技页
│   ├── technology_detail/    # 技术详情页
│   ├── digital_village/      # 数字乡村页
│   ├── rural_tourism/        # 乡村旅游页
│   ├── tourism_detail/       # 旅游详情页
│   ├── agricultural_product/ # 农产品展销页
│   ├── product_detail/       # 产品详情页
│   ├── rural_civilization/   # 乡风文明页
│   ├── talent_revitalization/ # 人才振兴页
│   ├── grassroots_party_building/ # 基层党建页
│   ├── experience_sharing/   # 经验分享页
│   └── contact_us/           # 联系我们页
└── utils/                    # 工具类目录
    ├── mockData.js           # Mock数据文件
    └── util.js               # 工具函数

数据模型

轮播图数据 (bannerList)

{
  id: 1,                      // 轮播图ID
  image: '/images/banner2.jpg', // 图片路径
  title: '金秋丰收，硕果累累'  // 标题
}

快捷入口数据 (quickEntryList)

{
  id: 'policy',               // 入口ID
  name: '政策解读',           // 入口名称
  icon: '/images/icon_1.png', // 图标路径
  url: '/pages/policy_interpretation/policy_interpretation' // 跳转路径
}

政策数据 (policies)

{
  id: 'p001',                 // 政策ID
  category: '农业补贴',       // 政策分类
  title: '2025年农业支持保护补贴政策解读', // 标题
  date: '2025-05-28',         // 发布日期
  content: '政策详细内容...'  // 正文内容
}

农业科技数据 (technologies)

{
  id: 't001',                 // 技术ID
  category: '智慧农业',       // 技术分类
  title: '智慧农场管理系统应用案例', // 标题
  date: '2025-05-25',         // 发布日期
  summary: '技术摘要...',     // 摘要
  content: '技术详细内容...'  // 正文内容
}

农产品数据 (agriculturalProducts)

{
  id: 'ap001',                // 产品ID
  category: '水果',           // 产品分类
  name: '阳光金桔',           // 产品名称
  origin: 'XX县',             // 产地
  price: '12.80/斤',          // 价格
  imageUrl: '/images/g-1.jpg', // 产品图片
  features: ['皮薄肉厚', '汁多味甜', '富含维C'], // 产品特色
  story: '产品故事...'        // 产品背景故事
}

乡村旅游数据 (ruralTourismData)

{
  destinations: [{            // 旅游目的地
    id: 'td001',
    name: 'XX村生态农庄',
    imageUrl: '/images/t-1.jpg',
    description: '目的地简介...'
  }],
  features: [{                // 特色体验
    id: 'tf001',
    title: '特色民宿体验',
    content: '体验内容介绍...'
  }]
}

联系我们数据 (contactUsData)

{
  appName: '乡村振兴三农',    // 应用名称
  appVersion: 'V1.0.0',       // 版本号
  description: '应用介绍...',  // 应用描述
  disclaimer: '免责声明...',   // 免责声明
  teamIntro: '团队介绍...',    // 团队介绍
  contactInfo: [              // 联系方式
    { label: '地址', value: '成都市锦江区XX街道XX号' },
    { label: '电话', value: '028-XXXXXXXX' },
    { label: '邮箱', value: 'service@example.com' }
  ],
  copyright: '© 2025 乡村振兴三农项目组 版权所有'
}

核心业务逻辑

1. 数据获取

// 引入Mock数据
const mockData = require('../../utils/mockData.js');

// 页面加载时获取数据
onLoad: function() {
  this.setData({
    bannerList: mockData.bannerList,
    quickEntryList: mockData.quickEntryList,
    latestNews: mockData.latestNews
  });
}

2. 页面跳转

// 跳转到功能页面
goToPage: function(e) {
  const url = e.currentTarget.dataset.url;
  wx.navigateTo({ url: url });
}

// 跳转到详情页（带参数）
goToDetail: function(e) {
  const id = e.currentTarget.dataset.id;
  wx.navigateTo({
    url: '/pages/policy_detail/policy_detail?id=' + id
  });
}

3. 详情页数据获取

// 根据ID获取详情数据
onLoad: function(options) {
  const id = options.id;
  const policy = mockData.policies.find(p => p.id === id);
  this.setData({ policy: policy });
}

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/policy_interpretation/policy_interpretation", // 政策解读
    "pages/policy_detail/policy_detail", // 政策详情
    "pages/agricultural_technology/agricultural_technology", // 农业科技
    "pages/technology_detail/technology_detail", // 技术详情
    "pages/digital_village/digital_village", // 数字乡村
    "pages/rural_tourism/rural_tourism", // 乡村旅游
    "pages/tourism_detail/tourism_detail", // 旅游详情
    "pages/agricultural_product/agricultural_product", // 农产品展销
    "pages/product_detail/product_detail", // 产品详情
    "pages/rural_civilization/rural_civilization", // 乡风文明
    "pages/talent_revitalization/talent_revitalization", // 人才振兴
    "pages/grassroots_party_building/grassroots_party_building", // 基层党建
    "pages/experience_sharing/experience_sharing", // 经验分享
    "pages/contact_us/contact_us" // 联系我们
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#008000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/agricultural_product/agricultural_product",
        "text": "农产品"
      },
      {
        "pagePath": "pages/rural_tourism/rural_tourism",
        "text": "乡村旅游"
      },
      {
        "pagePath": "pages/contact_us/contact_us",
        "text": "联系我们"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 xiangcunzhenxing-min
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

3. 运行项目

导入成功后，项目会自动编译运行，可在模拟器中预览效果

4. 真机调试

点击工具栏"预览"按钮，扫码在手机上体验

预置测试数据

政策解读

标题	分类	日期
2025年农业支持保护补贴政策解读	农业补贴	2025-05-28
关于支持农村金融发展的指导意见	农村金融	2025-05-20
美丽乡村建设规划编制指南	乡村规划	2025-05-10

农业科技

标题	分类	日期
智慧农场管理系统应用案例	智慧农业	2025-05-25
高产抗病水稻新品种研发进展	生物育种	2025-05-18
温室大棚无土栽培技术推广	高效种植	2025-05-10

农产品

名称	分类	产地	价格
阳光金桔	水果	XX县	¥12.80/斤
生态富硒大米	粮油	XX乡	¥89.00/袋(5kg)

乡村旅游

目的地	简介
XX村生态农庄	集采摘、休闲、餐饮、住宿为一体的生态农庄
千年古镇——XX镇	保留了古朴建筑和传统民俗的千年古镇

界面预览

项目包含演示视频文件 演示视频.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现用户个性化服务
3. 农产品电商：添加购物车、订单、支付功能
4. 地图导航：集成地图功能，实现旅游目的地导航
5. 在线咨询：添加在线客服或留言功能
6. 消息推送：政策更新、活动通知等消息推送
7. 收藏功能：支持收藏感兴趣的政策、技术、产品
8. 搜索功能：实现全局内容搜索
9. 分享功能：支持分享内容到好友和朋友圈
10. 多语言支持：支持少数民族语言版本

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 政策内容仅供参考，具体政策请以政府官方发布为准
3. 联系方式为示例数据，请勿拨打
4. 如需发布上线，请替换为自己的AppID并完善相关资质
5. 涉及党建内容，发布前请确保内容合规

许可证

本项目仅供学习交流使用，请勿用于商业用途。