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