UniApp新闻阅读应用开发实战：跨平台开发完整指南 | UniApp教程

// 定义路由
const routes = [
{ path: ‘/’, component: HomePage },
{ path: ‘/categories’, component: CategoriesPage },
{ path: ‘/category/:id’, component: CategoryNewsPage },
{ path: ‘/news/:id’, component: NewsDetailPage },
{ path: ‘/favorites’, component: FavoritesPage },
{ path: ‘/profile’, component: ProfilePage },
{ path: ‘/search’, component: SearchPage }
];

// 简单路由实现
const router = {
routes: routes,
current: window.location.hash.slice(1) || ‘/’,
init() {
window.addEventListener(‘hashchange’, () => {
this.current = window.location.hash.slice(1) || ‘/’;
this.render();
});
this.render();
},
render() {
const route = this.routes.find(route => route.path === this.current) || { component: { template: ‘

‘ } };
document.querySelector(‘router-view’).innerHTML = route.component.template;

// 触发页面更新
if (route.component.data) {
Object.assign(route.component, route.component.data());
}
if (route.component.mounted) {
route.component.mounted();
}
},
push(path) {
window.location.hash = path;
}
};

// 模拟API数据
const mockApi = {
getNewsList(categoryId = 0, page = 1) {
const categories = [‘推荐’, ‘科技’, ‘财经’, ‘体育’, ‘娱乐’, ‘健康’];
const news = [];

for (let i = 0; i 0.7
});
}

return Promise.resolve({
data: news,
hasMore: page < 3
});
},

getNewsDetail(id) {
return Promise.resolve({
id: id,
title: `新闻详细标题 ${id}`,
content: `

这是新闻编号${id}的详细内容。

UniApp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序等多个平台。

无论您开发的是新闻应用、电商平台还是企业级应用，UniApp都能提供出色的开发体验和性能表现。

图片展示：

以上是新闻的完整内容，感谢您的阅读。

`,
author: ‘新闻作者’,
publishTime: ‘2023-11-20 10:30:45’,
readCount: 1234,
source: ‘新闻来源’,
isFavorite: false
});
},

getCategories() {
return Promise.resolve([
{ id: 0, name: ‘推荐’ },
{ id: 1, name: ‘科技’ },
{ id: 2, name: ‘财经’ },
{ id: 3, name: ‘体育’ },
{ id: 4, name: ‘娱乐’ },
{ id: 5, name: ‘健康’ },
{ id: 6, name: ‘教育’ },
{ id: 7, name: ‘汽车’ }
]);
},

toggleFavorite(id) {
return Promise.resolve({ success: true });
}
};

// 首页组件
const HomePage = {
template: `

`,
data() {
return {
banners: [
{
image: ‘https://picsum.photos/750/300?random=1’,
title: ‘全球科技峰会2023即将开幕’
},
{
image: ‘https://picsum.photos/750/300?random=2’,
title: ‘新经济政策助力市场发展’
},
{
image: ‘https://picsum.photos/750/300?random=3’,
title: ‘体育盛事：国际锦标赛精彩瞬间’
}
],
newsList: [],
loading: false,
page: 1,
hasMore: true
};
},
mounted() {
this.loadNews();
},
methods: {
loadNews() {
if (this.loading || !this.hasMore) return;

this.loading = true;
mockApi.getNewsList(0, this.page).then(response => {
this.newsList = […this.newsList, …response.data];
this.hasMore = response.hasMore;
this.page++;
this.loading = false;
});
},
loadMore() {
this.loadNews();
},
goToNewsDetail(id) {
router.push(‘/news/’ + id);
},
goToSearch() {
router.push(‘/search’);
}
}
};

// 新闻详情页组件
const NewsDetailPage = {
template: `

`,
data() {
return {
newsDetail: {
title: ”,
content: ”,
author: ”,
publishTime: ”,
readCount: 0,
source: ”,
isFavorite: false
}
};
},
mounted() {
const newsId = this.getNewsIdFromUrl();
this.loadNewsDetail(newsId);
},
methods: {
getNewsIdFromUrl() {
const path = window.location.hash.slice(1);
const match = path.match(//news/(d+)/);
return match ? match[1] : null;
},
loadNewsDetail(id) {
mockApi.getNewsDetail(id).then(response => {
this.newsDetail = response;
});
},
toggleFavorite() {
mockApi.toggleFavorite(this.newsDetail.id).then(() => {
this.newsDetail.isFavorite = !this.newsDetail.isFavorite;
});
}
}
};

// 其他页面组件定义
const CategoriesPage = {
template: `

`,
data() {
return {
categories: []
};
},
mounted() {
mockApi.getCategories().then(response => {
this.categories = response;
});
},
methods: {
goToCategory(id) {
router.push(‘/category/’ + id);
}
}
};

const CategoryNewsPage = { template: ‘

‘ };
const FavoritesPage = { template: ‘

‘ };
const ProfilePage = { template: ‘

‘ };
const SearchPage = { template: ‘

‘ };

// 主Vue实例
new Vue({
el: ‘#app’,
data: {
activeTab: 0,
pageTitle: ‘首页’,
showNavBar: true,
showTabBar: true,
showSearchIcon: true
},
mounted() {
router.init();
this.updateUI();

// 监听路由变化
window.addEventListener(‘hashchange’, this.updateUI);
},
methods: {
onBack() {
window.history.back();
},
goToSearch() {
router.push(‘/search’);
},
updateUI() {
const path = window.location.hash.slice(1);

// 根据路由更新页面标题
const titles = {
‘/’: ‘首页’,
‘/categories’: ‘新闻分类’,
‘/favorites’: ‘我的收藏’,
‘/profile’: ‘个人中心’,
‘/search’: ‘搜索新闻’
};

// 从路径中提取动态标题
if (path.startsWith(‘/category/’)) {
this.pageTitle = ‘分类新闻’;
} else if (path.startsWith(‘/news/’)) {
this.pageTitle = ‘新闻详情’;
} else {
this.pageTitle = titles[path] || ‘新闻应用’;
}

// 在某些页面隐藏底部标签栏
this.showTabBar = [‘/’, ‘/categories’, ‘/favorites’, ‘/profile’].includes(path);

// 在详情页隐藏搜索图标
this.showSearchIcon = !path.startsWith(‘/news/’);

// 更新活动标签
const tabIndex = [‘/’, ‘/categories’, ‘/favorites’, ‘/profile’].indexOf(path);
if (tabIndex !== -1) {
this.activeTab = tabIndex;
}
}
}
});

/* 全局样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 0;
}

.page-content {
padding-bottom: 50px;
min-height: 100vh;
}

/* 首页样式 */
.home-page {
padding: 10px;
}

.search-bar {
display: flex;
align-items: center;
padding: 10px 15px;
background-color: #fff;
border-radius: 20px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
color: #999;
}

.banner-swipe {
border-radius: 8px;
overflow: hidden;
margin-bottom: 15px;
position: relative;
}

.banner-image {
width: 100%;
height: 180px;
display: block;
}

.banner-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
color: white;
padding: 10px;
font-size: 16px;
}

.section {
background-color: #fff;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}

.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.section-title {
font-size: 18px;
font-weight: bold;
position: relative;
padding-left: 10px;
}

.section-title::before {
content: ”;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background-color: #07c160;
border-radius: 2px;
}

.section-more {
color: #999;
font-size: 14px;
}

.news-list {
display: flex;
flex-direction: column;
gap: 15px;
}

.news-item {
display: flex;
gap: 12px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}

.news-item:last-child {
border-bottom: none;
}

.news-content {
flex: 1;
}

.news-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.news-summary {
font-size: 14px;
color: #666;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.news-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: #999;
}

.news-category {
color: #07c160;
background-color: rgba(7, 193, 96, 0.1);
padding: 2px 6px;
border-radius: 4px;
}

.news-image {
width: 100px;
height: 75px;
border-radius: 4px;
object-fit: cover;
}

.loading {
display: flex;
justify-content: center;
padding: 20px 0;
}

/* 新闻详情页样式 */
.news-detail-page {
padding: 15px;
background-color: #fff;
min-height: 100vh;
}

.news-header {
margin-bottom: 20px;
}

.news-title {
font-size: 22px;
font-weight: bold;
line-height: 1.4;
margin-bottom: 12px;
}

.news-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #999;
}

.news-content {
line-height: 1.8;
font-size: 16px;
}

.news-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 15px 0;
}

.news-actions {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
padding: 20px 0;
}

/* 分类页面样式 */
.categories-page {
padding: 15px;
}

.categories-list {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
}

.category-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eee;
}

.category-item:last-child {
border-bottom: none;
}

.category-name {
font-size: 16px;
}