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

王小婷

发布于 2020-07-10 11:17:05

2.1K0

发布于 2020-07-10 11:17:05

文章被收录于专栏：编程微刊

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

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

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

导入之后，可以看到目录结构如下

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浏览器里面。

运行成功，显示的界面效果，这个是静态的。

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

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

接口地址：https://unidemo.dcloud.net.cn/api/news

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)，将数据打印在控制台方便查看。

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

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

参考代码;

<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>

效果就可以出来了