原文来自：https://www.frbkw.com/1408/
需要一点点的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等
[Asm] 纯文本查看 复制代码 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：访问成功
[Asm] 纯文本查看 复制代码 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代码
[Asm] 纯文本查看 复制代码 <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小说图片
[Asm] 纯文本查看 复制代码 <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)"，当它点击的时候获取自身的数据
[Asm] 纯文本查看 复制代码 <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方法里面添加相对于的函数，并且打印。自信测试哈不截图了。
[Asm] 纯文本查看 复制代码 methods: {
dianji:function (e) {
console.log(e)
}
}
确定数据正确后我们在往下，点击其中任意小说，会打开一个新界面，我们在pages目录新建立一个data.vue界面，在跳转是带上小说名字（小提示：鼠标仿支pages目录上，直接右键新建界面。会自动生成目录以及路由）使用uni.navigateTo()方法打开新界面。
0x4 新界面发起请求
打开新界面后我们使用onLoad: function(e)去接受传递的参数，且使用上面提到的方法去请求接口
[Asm] 纯文本查看 复制代码 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 。我们再去尝试打印一个标题试试
[Asm] 纯文本查看 复制代码 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下应该这么写
[Asm] 纯文本查看 复制代码 data() {
return {
title:''
};
},
最后自己去view中绑定下数据，剩下的小说详情作者，图片，简介都是这样去添加打印
相关源码下载：
链接: https://pan.baidu.com/s/1V080CcgkWpLN8FYnBj7PDg 提取码: bmpb
| 
[复制链接]
发表于 2019-4-12 10:31
|
发表于 2019-4-25 16:37
哈哈 是我博客转过来的