新闻资讯小程序

新闻资讯小程序

项目简介

这是一个新闻资讯阅读的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了新闻浏览、分类筛选、新闻详情、用户注册登录、个人信息管理等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

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

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：用户数据使用 wx.setStorageSync 本地存储，关闭小程序后数据不丢失
• 完整业务流程：涵盖新闻浏览、分类筛选、用户注册登录、个人信息管理等完整流程
• UI设计简洁：界面风格简洁大方，蓝色主题配色，符合新闻资讯类应用调性
• 分类丰富：支持推荐、科技、娱乐、体育、财经、国际、社会、军事、时尚、游戏等10个新闻分类
• 分页加载：支持下拉刷新和上拉加载更多功能

功能模块

1. 首页模块 (pages/home)

• 轮播图展示热点新闻
• 推荐新闻列表展示
• 新闻封面图、标题、发布时间
• 点击新闻进入详情页

2. 新闻列表模块 (pages/news)

• 新闻分类Tab导航（推荐、科技、娱乐、体育、财经、国际、社会、军事、时尚、游戏）
• 分类切换筛选新闻
• 新闻列表展示（封面图、标题、发布时间）
• 下拉刷新功能
• 上拉加载更多功能
• 点击进入新闻详情

3. 新闻详情模块 (pages/detail)

• 新闻标题展示
• 发布时间展示
• 新闻封面大图
• 新闻正文内容展示

4. 用户中心模块 (pages/user)

• 用户头像、昵称展示
• 登录状态判断
• 登录入口
• 注册入口
• 个人资料入口
• 退出登录功能

5. 登录模块 (pages/login)

• 用户名输入
• 密码输入
• 登录验证
• 跳转注册页面
• 登录成功跳转用户中心

6. 注册模块 (pages/register)

• 用户名输入
• 密码输入
• 确认密码输入
• 密码长度验证（至少6位）
• 密码一致性验证
• 用户名重复检测
• 注册成功跳转登录页

7. 个人资料模块 (pages/profile)

• 显示当前用户信息
• 修改昵称功能
• 保存个人信息
• 登录状态验证

项目结构

new-min/
├── app.js                    # 小程序入口文件，全局数据管理和用户初始化
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── mockData/                 # Mock数据目录
│   └── mockData.js           # Mock数据文件（新闻、分类、用户数据）
├── images/                   # 图片资源目录
│   ├── tabbar/               # TabBar图标
│   │   ├── home.png          # 首页图标
│   │   ├── home_selected.png # 首页选中图标
│   │   ├── news.png          # 新闻图标
│   │   ├── news_selected.png # 新闻选中图标
│   │   ├── user.png          # 我的图标
│   │   └── user_selected.png # 我的选中图标
│   ├── default_avatar.png    # 默认头像
│   ├── icon_login.png        # 登录图标
│   ├── icon_logout.png       # 退出图标
│   ├── icon_profile.png      # 个人资料图标
│   ├── icon_register.png     # 注册图标
│   ├── news1.jpg             # 新闻图片
│   ├── swiper1.jpg           # 轮播图1
│   ├── swiper2.jpg           # 轮播图2
│   └── swiper3.jpg           # 轮播图3
├── pages/                    # 页面目录
│   ├── home/                 # 首页
│   │   ├── home.js
│   │   ├── home.json
│   │   ├── home.wxml
│   │   └── home.wxss
│   ├── news/                 # 新闻列表页
│   │   ├── news.js
│   │   ├── news.json
│   │   ├── news.wxml
│   │   └── news.wxss
│   ├── detail/               # 新闻详情页
│   │   ├── detail.js
│   │   ├── detail.json
│   │   ├── detail.wxml
│   │   └── detail.wxss
│   ├── user/                 # 用户中心页
│   │   ├── user.js
│   │   ├── user.json
│   │   ├── user.wxml
│   │   └── user.wxss
│   ├── login/                # 登录页
│   │   ├── login.js
│   │   ├── login.json
│   │   ├── login.wxml
│   │   └── login.wxss
│   ├── register/             # 注册页
│   │   ├── register.js
│   │   ├── register.json
│   │   ├── register.wxml
│   │   └── register.wxss
│   └── profile/              # 个人资料页
│       ├── profile.js
│       ├── profile.json
│       ├── profile.wxml
│       └── profile.wxss
└── utils/                    # 工具类目录
    ├── request.js            # 请求封装（Mock数据处理）
    └── util.js               # 工具函数

数据模型

轮播图数据 (swiperList)

{
  id: 1,                          // 轮播图ID
  image: '/images/swiper1.jpg',   // 图片路径
  title: '新闻热点一：全球科技创新峰会召开' // 标题
}

新闻分类数据 (newsCategories)

{
  id: 1,                          // 分类ID
  name: '推荐'                    // 分类名称
}

新闻数据 (allNews)

{
  id: 101,                        // 新闻ID
  categoryId: 1,                  // 所属分类ID
  title: '深度解读：全球经济复苏面临的新挑战与机遇', // 新闻标题
  content: '新闻正文内容...',     // 新闻正文
  imageUrl: '/images/news1.jpg',  // 封面图片
  publishTime: '2025-06-27 10:00' // 发布时间
}

用户数据 (users)

{
  userId: 1,                      // 用户ID
  username: 'test',               // 用户名
  password: '123',                // 密码
  nickname: '测试用户'            // 昵称
}

核心业务逻辑

1. 请求封装（Mock数据处理）

// utils/request.js
const request = (options) => {
  return new Promise((resolve, reject) => {
    wx.showLoading({ title: '加载中...', mask: true });

    setTimeout(() => {
      let res;
      if (options.url.includes('/swiper')) {
        res = { code: 200, data: mockData.swiperList };
      } else if (options.url.includes('/news/categories')) {
        res = { code: 200, data: mockData.newsCategories };
      } else if (options.url.includes('/news/list')) {
        const { categoryId, page, pageSize } = options.data;
        res = {
          code: 200,
          data: mockData.generateNewsList(categoryId, page, pageSize),
        };
      } else if (options.url.includes('/news/detail')) {
        const { id } = options.data;
        res = { code: 200, data: mockData.getNewsDetail(id) };
      }

      wx.hideLoading();
      resolve(res.data);
    }, 500); // 模拟500ms延迟
  });
};

2. 新闻分页查询

// mockData/mockData.js
generateNewsList: (categoryId, page = 1, pageSize = 10) => {
  const filteredNews =
    categoryId === 1
      ? allNews
      : allNews.filter((news) => news.categoryId === categoryId);
  const startIndex = (page - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return filteredNews.slice(startIndex, endIndex);
};

3. 用户登录验证

// pages/login/login.js
onLoginSubmit(e) {
  const { username, password } = e.detail.value;
  const users = wx.getStorageSync('mock_users') || [];
  const user = users.find(u => u.username === username && u.password === password);

  if (user) {
    const mockToken = `mock_token_${user.userId}`;
    wx.setStorageSync('token', mockToken);
    wx.setStorageSync('userInfo', {
      userId: user.userId,
      nickname: user.nickname,
      username: user.username
    });
    // 登录成功
  }
}

4. 用户注册

// pages/register/register.js
onRegisterSubmit(e) {
  const { username, password, confirmPassword } = e.detail.value;
  let users = wx.getStorageSync('mock_users') || [];
  let nextUserId = wx.getStorageSync('nextUserId') || 1;

  const newUser = {
    username: username,
    password: password,
    userId: nextUserId,
    nickname: username
  };

  users.push(newUser);
  wx.setStorageSync('mock_users', users);
  wx.setStorageSync('nextUserId', nextUserId + 1);
}

5. 数据初始化

// app.js
onLaunch() {
  let users = wx.getStorageSync('mock_users');
  if (!users || users.length === 0) {
    wx.setStorageSync('mock_users', mockData.initialUsers);
    // 初始化下一个用户ID
    let maxId = 0;
    mockData.initialUsers.forEach(user => {
      if (user.userId > maxId) maxId = user.userId;
    });
    wx.setStorageSync('nextUserId', maxId + 1);
  }
}

页面路由配置

{
  "pages": [
    "pages/home/home", // 首页（默认启动页）
    "pages/news/news", // 新闻列表
    "pages/user/user", // 用户中心
    "pages/detail/detail", // 新闻详情
    "pages/login/login", // 登录页
    "pages/register/register", // 注册页
    "pages/profile/profile" // 个人资料页
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#999",
    "selectedColor": "#007bff",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻",
        "iconPath": "images/tabbar/news.png",
        "selectedIconPath": "images/tabbar/news_selected.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "images/tabbar/user.png",
        "selectedIconPath": "images/tabbar/user_selected.png"
      }
    ]
  }
}

运行环境要求

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

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

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

3. 运行项目

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

4. 真机调试

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

预置测试数据

新闻分类

分类ID	分类名称
1	推荐
2	科技
3	娱乐
4	体育
5	财经
6	国际
7	社会
8	军事
9	时尚
10	游戏

轮播图

标题
新闻热点一：全球科技创新峰会召开
新闻热点二：世界杯预选赛激战正酣
新闻热点三：最新健康生活方式报告发布

新闻内容（部分）

标题	分类	发布时间
深度解读：全球经济复苏面临的新挑战与机遇	推荐	2025-06-27 10:00
地方两会聚焦民生：就业、教育、医疗成热点	推荐	2025-06-27 09:00
AI芯片迎来新一轮爆发：算力提升推动大模型发展	科技	2025-06-27 09:30
热门电影票房再创新高：艺术与商业的完美融合	娱乐	2025-06-27 08:45
欧洲杯小组赛战况激烈：多支强队面临出线考验	体育	2025-06-27 07:00
A股市场震荡调整：结构性行情显现，关注新兴产业	财经	2025-06-27 06:30

测试账号

用户名	密码	昵称
test	123	测试用户
admin	admin	管理员

界面预览

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

扩展建议

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

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 新闻搜索：实现新闻关键词搜索功能
4. 新闻收藏：添加新闻收藏功能
5. 阅读历史：记录用户阅读历史
6. 评论功能：添加新闻评论和互动功能
7. 分享功能：支持分享新闻到好友和朋友圈
8. 消息推送：热点新闻推送通知
9. 夜间模式：添加深色主题切换
10. 字体设置：支持正文字体大小调节

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 登录功能为模拟实现，密码以明文存储，仅供学习使用
3. 新闻内容为虚构内容，仅供演示
4. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

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

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/new-min