uni-app里面使用uni.request请求并且渲染列表

Myth丶恋晨 2022-12-19 03:38 89阅读 0赞

##### 1：新建一个uniapp项目，命名为test。 #####

![1b7f307e47e00c0b066808563bd88d01.png][]

##### 2：官方网站找文档，要用到列表组件 #####

地址导航：https://ext.dcloud.net.cn/plugin?id=24  
导入到自己的test项目里面去  
![35d3d2d9c659eb75437c97866f199a99.png][]

![0735dd54697fe1d9e29d414c0466c048.png][]

导入之后，可以看到目录结构如下  
![0fe0f4648e1c7f09a92dfc3349e22e5c.png][]

##### 3：打开index，开始写代码 #####

使用方式列表的方式，在 script 中引用组件并且在 template 中使用组件 。

import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    export default {
        components: {uniList,uniListItem}
    }

index代码写好了参考如下：

<template>
    	<view>	
    	
    	<uni-list>		
    	    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>	   
    	</uni-list>
    	<uni-list>
    	    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>	   
    	</uni-list>
    	<uni-list>
    	    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>	   
    	</uni-list>
    	
    	</view>
    </template>
    <script>
    	import uniList from "@/components/uni-list/uni-list.vue"
    	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    	export default {
    	    components: {uniList,uniListItem}
    	}	
    </script>
    <style>
    </style>

##### 4：运行到浏览器 #####

点击运行的菜单，运行到chrom浏览器里面。  
![471d15c2d2db09ac8b0d150859bdde6f.png][]

运行成功，显示的界面效果，这个是静态的。  
![484c1bb6e96e21b25a31720655cfb0a2.png][]

##### 5：准备一个可以使用的接口 #####

找了一个可以使用的接口，网上有很多免费的api接口，但是很多免费的接口都容易被攻击，很容易失效，在使用之前，请先点击去查看一下，接口是否是完整的。

接口地址：[https://unidemo.dcloud.net.cn/api/news][https_unidemo.dcloud.net.cn_api_news]

![7c1738021e01dd04d25eaad8d7cb9256.png][]

##### 6：开始写请求 #####

这里是请求使用的一个方法uni.request(OBJECT)：官方文档放在这里：https://uniapp.dcloud.io/api/request/request  
官网的例子是这样的

示例
    
    uni.request({
        url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
        data: {
            text: 'uni.request'
        },
        header: {
            'custom-header': 'hello' //自定义请求头信息
        },
        success: (res) => {
            console.log(res.data);
            this.text = 'request success';
        }
    });

我们可以直接复制，放到自己的代码里面，并且把url修改成我上一步准备的接口数据。

index.vue代码如下

<template>
    	<view>	
    	<uni-list>		
    	    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>	   
    	</uni-list>
    	<uni-list>
    	    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>	   
    	</uni-list>
    	<uni-list>
    	    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>	   
    	</uni-list>
    	</view>
    </template>
    <script>
    	import uniList from "@/components/uni-list/uni-list.vue"
    	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    	export default {
    	    components: {uniList,uniListItem},
    		data() {
    			return {
    				// productList: [],
    			};
    		},
    		onLoad() {
    			this.getList();
    		},
    		methods: {			
    			getList() {			
    				uni.request({
    					url: "https://unidemo.dcloud.net.cn/api/news",					
    					method: 'get',
    					dataType: 'json',
    					success: (res) => {
    						console.log(res.data);
    						// this.productList = res.data;
    					},					
    				});
    			},
    		}
    	}	
    </script>
    <style>
    </style>

写完代码之后，打开我们的控制台，可以看到请求的免费的api里面的数据，是请求成功了 的，在请求成功的success方法里面，写一个console.log(res.data)，将数据打印在控制台方便查看。

![3296ddc687a3cc7f752954e9a9bcedc7.png][]

##### 7：开始赋值，渲染到前端界面 #####

这个时候的步骤就不多说了，大家都非常的清楚，在data()里面定义一个空数组，将请求到的res.data赋值给空数组，然后进到view里面进行遍历，渲染数据到页面。

![ea5b3227f3f4adb9d0f528b2de869bf7.png][]

![b02db053dd130beec89e6860eaadff9e.png][]

参考代码;

<template>
    	<view>	
    	<uni-list  v-for="(item,index) in productList" :key="index">		
    	    <uni-list-item :title="item.author_name"  :note="item.title"></uni-list-item>	  		 
    	</uni-list>
    	
    	</view>
    </template>
    <script>
    	import uniList from "@/components/uni-list/uni-list.vue"
    	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    	export default {
    	    components: {uniList,uniListItem},
    		data() {
    			return {
    				productList: [],
    			};
    		},
    		onLoad() {
    			this.getList();
    		},
    		methods: {			
    			getList() {			
    				uni.request({
    					url: "https://unidemo.dcloud.net.cn/api/news",					
    					method: 'get',
    					dataType: 'json',
    					success: (res) => {
    						console.log(res.data);
    						this.productList = res.data;
    					},					
    				});
    			},
    		}
    	}	
    </script>
    <style>
    </style>

效果就可以出来了  
![3fa52446893a811141bb7637a415bba3.png][]

![欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。][500G]

[1b7f307e47e00c0b066808563bd88d01.png]: /images/20221120/2b2b60a2ceeb4202a05ffc57ae877429.png
[35d3d2d9c659eb75437c97866f199a99.png]: /images/20221120/59198d42c0f74f4ca917e1e3062f9a07.png
[0735dd54697fe1d9e29d414c0466c048.png]: https://img-blog.csdnimg.cn/img_convert/0735dd54697fe1d9e29d414c0466c048.png
[0fe0f4648e1c7f09a92dfc3349e22e5c.png]: https://img-blog.csdnimg.cn/img_convert/0fe0f4648e1c7f09a92dfc3349e22e5c.png
[471d15c2d2db09ac8b0d150859bdde6f.png]: https://img-blog.csdnimg.cn/img_convert/471d15c2d2db09ac8b0d150859bdde6f.png
[484c1bb6e96e21b25a31720655cfb0a2.png]: https://img-blog.csdnimg.cn/img_convert/484c1bb6e96e21b25a31720655cfb0a2.png
[https_unidemo.dcloud.net.cn_api_news]: https://unidemo.dcloud.net.cn/api/news
[7c1738021e01dd04d25eaad8d7cb9256.png]: https://img-blog.csdnimg.cn/img_convert/7c1738021e01dd04d25eaad8d7cb9256.png
[3296ddc687a3cc7f752954e9a9bcedc7.png]: https://img-blog.csdnimg.cn/img_convert/3296ddc687a3cc7f752954e9a9bcedc7.png
[ea5b3227f3f4adb9d0f528b2de869bf7.png]: https://img-blog.csdnimg.cn/img_convert/ea5b3227f3f4adb9d0f528b2de869bf7.png
[b02db053dd130beec89e6860eaadff9e.png]: https://img-blog.csdnimg.cn/img_convert/b02db053dd130beec89e6860eaadff9e.png
[3fa52446893a811141bb7637a415bba3.png]: https://img-blog.csdnimg.cn/img_convert/3fa52446893a811141bb7637a415bba3.png
[500G]: https://img-blog.csdnimg.cn/20201105105227502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center