uniapp新闻项目

￡神魔★判官ぃ 2023-08-17 16:28 139阅读 0赞

创建项目 uni-app  
创建 hello uni-app 项目  
把hello项目的common和components文件复制过来  
page、index.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

<template>
    	<view class="content">   
    		<view class="uni-list">
    			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index"
    			 @tap="openinfo" :data-newsid="item.post_id">
    				<view class="uni-media-list">
    					<image class="uni-media-list-logo" :src="item.author_avatar"></image>
    					<view class="uni-media-list-body">
    						<view class="uni-media-list-text-top">{
       {item.title}}</view>
    						<view class="uni-media-list-text-bottom uni-ellipsis">{
       {item.content}}</view>
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {			
    				news:[]
    			}
    		},
    		onLoad:function() {  //生命周期只执行一次
    			uni.showLoading({
    				title: '加载中...',  //数据加载转转圈圈操作
    			});
               uni.request({   //数据请求
               	url: 'https://unidemo.dcloud.net.cn/api/news',
               	method: 'GET',
               	data: {},
               	success: res => {
    				console.log(res);
    				this.news=res.data;
    				uni.hideLoading(); // 关闭转圈圈操作
    			},
               	fail: () => {},
               	complete: () => {}
               });		   
    		},
    		methods: {   //方法
                openinfo(e){				
    				var newsid = e.currentTarget.dataset.newsid;   //数据id
    				console.log(newsid)
    				uni.navigateTo({  //跳转页面
    					url: '../info/info?newsid='+newsid,    //url加id
    				});
    			}
    		}
    		
    	}
    </script>
    
    <style>
    	.uni-media-list-body{
    		height: auto;
    	}
    	.uni-media-list-text-top{
    		line-height: 1.6em;
    	}
    </style>

page、info.vue

<template>
    	<view class="content">
    		<view class="title">{
       {title}}</view>
    		<view class="art-content">
    			<rich-text class="richText" :nodes="strings"></rich-text>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title:'',
    				strings:''
    			}
    		},
    		onLoad:function(e){			
    			uni.request({
    				url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newsid,  //详情页数据请求
    				method: 'GET',
    				data: {},
    				success: res => {
    					console.log(res);
    					this.title = res.data.title;
    					this.strings = res.data.content;  //组件渲染
    				},
    				fail: () => {},
    				complete: () => {}
    			});
    		},
    		methods: {
    			
    		}
    	}
    </script>
    
    <style>
    .content{
    	padding: 10upx 2%;
    	width:96%;
    	flex-wrap: wrap;
    	
    }
    .title{
    	line-height: 2em;
    	font-weight: 700;
    	font-size: 38upx;
    }
    .art-content{
    	line-height: 2em;
    }
    </style>

在app.vue文件引入uni.css文件  
@import url("./common/uni.css");  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20230810/b6fd5ad0c75a45f58099e615778c797f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]: /images/20230810/97ee8d8db3e74c5eb6f72a1b3fae8088.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 2]: /images/20230810/44e8c54550e64cadb53ab58f41985a2e.png