更新记录

1.0.1（2026-05-14） 下载此版本

首次更新

平台兼容性

uni-app(4.0)

其他

ren-news 新闻资讯插件

一款功能完整的 uni-app 新闻资讯插件，包含新闻列表、分类筛选、新闻详情等功能。

✨ 功能特点

• 📰 新闻列表 - 支持分类筛选的新闻列表展示
• 📋 分类标签 - 科技、财经、体育、娱乐、健康等多分类
• 📖 新闻详情 - 完整的新闻详情页面
• 🔗 分享功能 - 支持分享到朋友、朋友圈
• ❤️ 收藏功能 - 支持新闻收藏
• 📱 响应式设计 - 完美适配各种屏幕尺寸

📦 安装方式

方式一：插件市场导入

在 HBuilderX 中：

1. 打开插件市场，搜索 ren-news
2. 点击「导入项目」
3. 自动集成到 uni_modules 目录

方式二：手动安装

# 复制插件到 uni_modules 目录
cp -r ren-news /path/to/your/project/uni_modules/

🚀 使用方法

1. 在页面中使用新闻列表组件

<template>
  <view class="news-container">
    <NewsList />
  </view>
</template>

<script setup lang="ts">
import NewsList from '@/uni_modules/ren-news/components/NewsList/NewsList.vue'
</script>

<style lang="scss" scoped>
.news-container {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>

2. 使用单个新闻卡片组件

<template>
  <view class="news-list">
    <NewsItem 
      v-for="news in newsData" 
      :key="news.id" 
      :news="news" 
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NewsItem from '@/uni_modules/ren-news/components/NewsItem/NewsItem.vue'

const newsData = ref([
  {
    id: 1,
    title: '新闻标题',
    summary: '新闻摘要',
    cover: 'https://example.com/cover.jpg',
    category: '科技',
    author: '作者',
    publishTime: '2024-01-15 10:30',
    readCount: 12580,
    commentCount: 326
  }
])
</script>

3. 跳转到新闻详情页

// 在列表页点击新闻自动跳转
// 或手动调用
uni.navigateTo({
  url: `/uni_modules/ren-news/pages/detail/detail?id=1`
})

📝 数据结构

新闻数据格式

interface NewsItem {
  id: number                    // 新闻ID
  title: string                 // 新闻标题
  summary: string               // 新闻摘要
  cover: string                 // 封面图片URL
  category: string              // 分类名称
  categoryId: number            // 分类ID
  author: string                // 作者
  publishTime: string           // 发布时间
  readCount: number             // 阅读量
  commentCount: number          // 评论数
}

分类数据格式

interface Category {
  id: number      // 分类ID
  name: string    // 分类名称
  icon: string    // 分类图标
}

🎨 组件 API

NewsList 组件

NewsItem 组件

📁 项目结构

ren-news/
├── components/           # 组件目录
│   ├── NewsItem/        # 新闻列表项组件
│   │   └── NewsItem.vue
│   └── NewsList/        # 新闻列表组件
│       └── NewsList.vue
├── data/                # 数据目录
│   └── mock-news.js     # 模拟数据
├── pages/               # 页面目录
│   └── detail/          # 新闻详情页
│       └── detail.vue
├── index.js             # 导出入口
└── package.json         # 插件配置

🔧 自定义配置

自定义分类数据

<template>
  <view>
    <NewsList :categories="customCategories" />
  </view>
</template>

<script setup lang="ts">
import NewsList from '@/uni_modules/ren-news/components/NewsList/NewsList.vue'

const customCategories = [
  { id: 1, name: '全部', icon: '📰' },
  { id: 2, name: '科技', icon: '💻' },
  { id: 3, name: '娱乐', icon: '🎬' }
]
</script>

自定义新闻数据

import { ref } from 'vue'

// 从后端接口获取数据
const newsData = ref([])

uni.request({
  url: 'https://api.example.com/news',
  success: (res) => {
    newsData.value = res.data
  }
})

📱 支持平台

📄 License

MIT License

📧 联系作者

如有问题或建议，欢迎反馈！

使用提示：将插件导入项目后，在 pages.json 中注册详情页路由即可使用完整功能。