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等

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

 

url：填写我们的API地址

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

success：访问成功

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

 

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

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

 1 <script>
 2     export default {
 3         data() {
 4             return {
 5                 texts:[]
 6             }
 7         },
 8         onLoad() {
 9             uni.request({
10                 url: 'https://www.apiopen.top/novelApi', //小说接口
11                 success: (res) => {                    
12                     this.texts = res.data.data;
13                     console.log(this.texts);
14                 }
15             });
16         },
17         methods: {
18 
19         }
20     }
21 </script>

 

0x2 合数据

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

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

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

 

0x3 新建界面传递参数

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

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

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

 

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

1 methods: {
2     dianji:function (e) {
3         console.log(e)
4     }
5 }

 

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

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

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

1 methods: {
2     dianji:function (e) {
3         // console.log(e)
4         uni.navigateTo({
5         url: '../data/data?name=' + e.bookname
6     })
7 }
8 }

 

0x4 新界面发起请求

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

 1 onLoad: function(e) {//接受id
 2             console.log(e.name)
 3             uni.request({//接口请求
 4                 url: 'https://www.apiopen.top/novelInfoApi?name=' + e.name ,//接口添加小说名字
 5                 success: function(res) {
 6                     console.log(res.data.data.aladdin)
 7 
 8                 }
 9             });
10         },

 

 

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

 1 onLoad: function(e) {//接受id
 2     let that =  this;
 3     console.log(e.name)
 4     uni.request({//接口请求
 5         url: 'https://www.apiopen.top/novelInfoApi?name=' + e.name ,//接口添加小说名字
 6         success: function(res) {
 7             console.log(res.data.data.aladdin)
 8             that.title = res.data.data.aladdin.title;
 9             console.log(that.title)
10         }
11     });
12 },

 

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

1 data() {
2     return {
3         title:''
4     };
5 },

 

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

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

 1 <template>
 2     <view>
 3         <view class="">{删{title}}</view>
 4         <view class="">{删{author}}</view>
 5         <view class="">{删{desc}}</view>
 6         <image :src="cover"></image>
 7         
 8     </view>
 9 </template>
10 
11 <script>
12     export default {
13         data() {
14             return {
15                 title:'',
16                 desc:'',
17                 author:'',
18                 cover:''
19             };
20         },
21         onLoad: function(e) {//接受id
22             let that =  this;
23             console.log(e.name)
24             uni.request({//接口请求
25                 url: 'https://www.apiopen.top/novelInfoApi?name=' + e.name ,//接口添加小说名字
26                 success: function(res) {
27                     console.log(res.data.data.aladdin)
28                     that.title = res.data.data.aladdin.title;
29                     // console.log(that.title)
30                     that.author = res.data.data.aladdin.author;
31                     that.category = res.data.data.aladdin.category; 
32                     that.cover = res.data.data.aladdin.cover; 
33                     that.desc = res.data.data.aladdin.desc; 
34                 }
35             });
36         },
37     }
38 </script>

 

来源：https://www.cnblogs.com/adozheng/p/12408184.html