uni-app 实战接入热门小说API接口 适用于新手

需要一点点的Uni-app的经验，如果大家是刚刚上手可以在站内收索 ：uni-app微信项目练习.先巩固一下基础知识，那么本文针对uni.request(OBJECT) 接入API进行简单的介绍，样式枫瑞就不做演示，能显示内容就行哈哈。

 API：

小说接口：
https://www.apiopen.top/novelApi
详情接口：
https://www.apiopen.top/novelInfoApi?name=盗墓笔记

 

0x0 建立目录

使用hbuilder x建立一个uni-app项目，在pages目录下找到index.vue文件，把多余的代码删除

0x1 发起网络请求

script标签下onLoad()中写一个uni.request（），在官方偷来的代码块，其中我们可以把不必要的删除了。比如data，header等

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：填写我们的API地址

method：填写POST 还是GET方法，要大写哦，默认GET可以忽略不写

success：访问成功

uni.request({
    url: \'https://www.apiopen.top/novelApi\', //小说接口
    success: (res) => {
        console.log(res.data);
    }
});

 

修改好后，我们运行到谷歌浏览器或者微信小程序开发工具，谷歌浏览器中F12打开控制台看下console中是否有数据

有数据我们再将数据赋值给tests，在data里面写一个texts:[]数组，随后把res.data.data的值赋给this.texts，完整的script代码

<script>
    export default {
        data() {
            return {
                texts:[]
            }
        },
        onLoad() {
            uni.request({
                url: \'https://www.apiopen.top/novelApi\', //小说接口
                success: (res) => {                    
                    this.texts = res.data.data;
                    console.log(this.texts);
                }
            });
        },
        methods: {

        }
    }
</script>

 

0x2 合数据

我们在template里面建立一个view作为v-for循环，在写一个view作为图书名字，最后一个img小说图片

[tip type=”error”]因为博客前台使用vue渲染，会导致至代码块中内容给直接编译。代码复制到本地后请删除代码中“删”文字后即可恢复正常或者直接下载源文件 [/tip]

<template>
    <view class="content">
        <view v-for="text in texts">
            <view style="text-align: center;font-size: 22px;margin: 10px;">{删{text.bookname}}</view>
            <image :src="text.book_cover"></image>
        </view>
    </view>
</template>

 

0x3 新建界面传递参数

我们再小说遍历出来后，需要做到我们点击其中一条小说，能够获取它自身的数据。添加一个函数@click=”dianji(text)”，当它点击的时候获取自身的数据

[tip type=”error”]因为博客前台使用vue渲染，会导致至代码块中内容给直接编译。代码复制到本地后请删除代码中“删”文字后即可恢复正常或者直接下载源文件 [/tip]

<template>
    <view class="content">
        <view v-for="text in texts" @click="dianji(text)" >
            <view style="text-align: center;font-size: 22px;margin: 10px;">{删{text.author_name}}</view>
            <image :src="text.book_cover"></image>
        </view>
    </view>
</template>

 

methods方法里面添加相对于的函数，并且打印。自信测试哈不截图了。

methods: {
    dianji:function (e) {
        console.log(e)
    }
}

 

确定数据正确后我们在往下，点击其中任意小说，会打开一个新界面，我们在pages目录新建立一个data.vue界面，在跳转是带上小说名字

（小提示：鼠标仿支pages目录上，直接右键新建界面。会自动生成目录以及路由）

使用uni.navigateTo()方法打开新界面。不截图节约服务器==

methods: {
    dianji:function (e) {
        // console.log(e)
        uni.navigateTo({
        url: \'../data/data?name=\' + e.bookname
    })
}
}

 

0x4 新界面发起请求

打开新界面后我们使用onLoad: function(e)去接受传递的参数，且使用上面提到的方法去请求接口

onLoad: function(e) {//接受id
            console.log(e.name)
            uni.request({//接口请求
                url: \'https://www.apiopen.top/novelInfoApi?name=\' + e.name ,//接口添加小说名字
                success: function(res) {
                    console.log(res.data.data.aladdin)

                }
            });
        },

 

 

因为我们接受返回数据的时候不能试用this，所有我们在发送请求的时候 再去定义一个let that = this 。我们再去尝试打印一个标题试试

onLoad: function(e) {//接受id
    let that =  this;
    console.log(e.name)
    uni.request({//接口请求
        url: \'https://www.apiopen.top/novelInfoApi?name=\' + e.name ,//接口添加小说名字
        success: function(res) {
            console.log(res.data.data.aladdin)
            that.title = res.data.data.aladdin.title;
            console.log(that.title)
        }
    });
},

 

这个不是数组了，他只是一个对象，我们在return下应该这么写

data() {
    return {
        title:\'\'
    };
},

 

最后自己去view中绑定下数据，剩下的小说详情作者，图片，简介都是这样去添加打印

[tip type=”error”]因为博客前台使用vue渲染，会导致至代码块中内容给直接编译。代码复制到本地后请删除代码中“删”文字后即可恢复正常或者直接下载源文件 [/tip]

<template>
    <view>
        <view class="">{删{title}}</view>
        <view class="">{删{author}}</view>
        <view class="">{删{desc}}</view>
        <image :src="cover"></image>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title:\'\',
                desc:\'\',
                author:\'\',
                cover:\'\'
            };
        },
        onLoad: function(e) {//接受id
            let that =  this;
            console.log(e.name)
            uni.request({//接口请求
                url: \'https://www.apiopen.top/novelInfoApi?name=\' + e.name ,//接口添加小说名字
                success: function(res) {
                    console.log(res.data.data.aladdin)
                    that.title = res.data.data.aladdin.title;
                    // console.log(that.title)
                    that.author = res.data.data.aladdin.author;
                    that.category = res.data.data.aladdin.category; 
                    that.cover = res.data.data.aladdin.cover; 
                    that.desc = res.data.data.aladdin.desc; 
                }
            });
        },
    }
</script>