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

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文件,把多余的代码删除

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

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中是否有数据

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

有数据我们再将数据赋值给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>

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

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)

				}
			});
		},

 

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

因为我们接受返回数据的时候不能试用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>

 

抱歉,隐藏内容 回复 后刷新可见

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《uni-app 实战接入热门小说API接口 适用于新手》 发布于2019-04-11

赞(2) 生成海报

评论 10

8 + 1 =
  1. #0

    123123阿斯顿发放

    Uuuuuu2个月前 (08-17)
  2. #0

    大佬,求教下,如果图片和文章标题不在一个api内,那该如何写,最近学习写一个对接苹果cms的app,他的电影图片和电影名称不在一个api内的,困扰好几天了,求教

    yy12个月前 (11-06)
  3. 网盘连接问题嘛

    管理员fengrui991年前 (2019-05-16)
  4. #0

    怎么下载不了了

    小可爱1年前 (2019-05-15)
  5. #0

    不错

    小可爱1年前 (2019-05-15)
  6. #0

    不错不错?

    落水无情1年前 (2019-05-07)
  7. #0

    一直找这个很久了,最近也想学这些,还是这里比较全方面的学习,赞一个

    小爱2年前 (2019-04-28)
  8. #0

    21
    12

    1231232年前 (2019-04-26)
  9. #0

    楼主写的东西真的挺有用,但为什么就是很少人看呢 :smile:

    王鹏2年前 (2019-04-11)

长按图片转发给朋友

微信 QQ双端发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....