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

醉墨發表於 2020-3-4 10:51:00

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

<h4>需要一点点的Uni-app的经验，如果大家是刚刚上手可以在站内收索：uni-app微信项目练习.先巩固一下基础知识，那么本文针对uni.request(OBJECT) 接入API进行简单的介绍，样式枫瑞就不做演示，能显示内容就行哈哈。</h4>
<fieldset><legend> API：</legend>
小说接口： https://www.apiopen.top/novelApi 详情接口： https://www.apiopen.top/novelInfoApi?name=盗墓笔记
 

</fieldset>
<h3>0x0 建立目录</h3>
使用hbuilder x建立一个uni-app项目，在pages目录下找到index.vue文件，把多余的代码删除
<img class="aligncenter wp-image-1371 size-full lazyload" alt="uni-app 实战接入热门小说API接口适用于新手" width="679" height="530" data-src="https://frbkw.com//wp-center/uploads/2019/03/QQ20190321085032.png">
<h3>0x1 发起网络请求</h3>
script标签下onLoad()中写一个uni.request（），在官方偷来的代码块，其中我们可以把不必要的删除了。比如data，header等
<div class="cnblogs_code">
<pre> 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 });</pre>
</div>
 
url：填写我们的API地址
method：填写POST 还是GET方法，要大写哦，默认GET可以忽略不写
success：访问成功
<div class="cnblogs_code">
<pre>1 uni.request({
2 url: 'https://www.apiopen.top/novelApi', //小说接口
3 success: (res) => {
4 console.log(res.data);
5 }
6 });</pre>
</div>
 
修改好后，我们运行到谷歌浏览器或者微信小程序开发工具，谷歌浏览器中F12打开控制台看下console中是否有数据
<img class="aligncenter wp-image-1413 size-full lazyload" alt="uni-app 实战接入热门小说API接口适用于新手" width="815" height="289" data-src="https://frbkw.com//wp-center/uploads/2019/04/2011161016.png">
有数据我们再将数据赋值给tests，在data里面写一个texts:[]数组，随后把res.data.data的值赋给this.texts，完整的script代码
<div class="cnblogs_code">
<pre> 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></pre>
</div>
 
<h3>0x2 合数据</h3>
我们在template里面建立一个view作为v-for循环，在写一个view作为图书名字，最后一个img小说图片
因为博客前台使用vue渲染，会导致至代码块中内容给直接编译。代码复制到本地后请删除代码中“删”文字后即可恢复正常或者直接下载源文件 
<div class="cnblogs_code">
<pre>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></pre>
</div>
 
<img class="aligncenter wp-image-1419 size-full lazyload" alt="uni-app 实战接入热门小说API接口适用于新手" width="411" height="609" data-src="https://frbkw.com//wp-center/uploads/2019/04/TIM20190411200633.png">
<h3>0x3 新建界面传递参数</h3>
我们再小说遍历出来后，需要做到我们点击其中一条小说，能够获取它自身的数据。添加一个函数@click=”dianji(text)”，当它点击的时候获取自身的数据
因为博客前台使用vue渲染，会导致至代码块中内容给直接编译。代码复制到本地后请删除代码中“删”文字后即可恢复正常或者直接下载源文件 
<div class="cnblogs_code">
<pre>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></pre>
</div>
 
methods方法里面添加相对于的函数，并且打印。自信测试哈不截图了。
<div class="cnblogs_code">
<pre>1 methods: {
2 dianji:function (e) {
3 console.log(e)
4 }
5 }</pre>
</div>
 
确定数据正确后我们在往下，点击其中任意小说，会打开一个新界面，我们在pages目录新建立一个data.vue界面，在跳转是带上小说名字
（小提示：鼠标仿支pages目录上，直接右键新建界面。会自动生成目录以及路由）
使用uni.navigateTo()方法打开新界面。不截图节约服务器==
<div class="cnblogs_code">
<pre>1 methods: {
2 dianji:function (e) {
3 // console.log(e)
4 uni.navigateTo({
5 url: '../data/data?name=' + e.bookname
6 })
7 }
8 }</pre>
</div>
 
<h3>0x4 新界面发起请求</h3>
打开新界面后我们使用onLoad: function(e)去接受传递的参数，且使用上面提到的方法去请求接口
<div class="cnblogs_code">
<pre> 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 },</pre>
</div>
 
 
<img class="aligncenter wp-image-1421 size-full lazyload" alt="uni-app 实战接入热门小说API接口适用于新手" width="484" height="354" data-src="https://frbkw.com//wp-center/uploads/2019/04/TIM20111201751.png">
因为我们接受返回数据的时候不能试用this，所有我们在发送请求的时候再去定义一个let that = this 。我们再去尝试打印一个标题试试
<div class="cnblogs_code">
<pre> 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 },</pre>
</div>
 
这个不是数组了，他只是一个对象，我们在return下应该这么写
<div class="cnblogs_code">
<pre>1 data() {
2 return {
3 title:''
4 };
5 },</pre>
</div>
 
最后自己去view中绑定下数据，剩下的小说详情作者，图片，简介都是这样去添加打印
因为博客前台使用vue渲染，会导致至代码块中内容给直接编译。代码复制到本地后请删除代码中“删”文字后即可恢复正常或者直接下载源文件 
<div class="cnblogs_code">
<pre> 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></pre>
</div>
  
来源：https://www.cnblogs.com/adozheng/p/12408184.html

頁: [1]

琼殿技术论坛's Archiver

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

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