9-微信小程序的网站的接口调用(直接调用)
微信小程序除了在第三方调用接口，还可以直接从网站调用接口，但是每个网站都有保护措施，所以要寻找那些没有防护的，可以来直接调用的网站。
案例：豆瓣电影的接口调用
1.百度豆瓣电源，找寻需要调用的页面
2.右键检查，或F12
3.回车，再次发起请求，查看网站接口
微信小程序作为新兴的技术，可能无法从网站直接调用，这样就需要后端开发语言来进行获取，例如：java、php、go等。
代码示例：
wxml：
<view class="warp">
<view class="content" wx:for="{{movieList}}" wx:key="id">
<view class="img">
<image src="{{item.cover_url}}" mode=""></image>
</view>
<view class="text">
<view>{{item.title}}</view>
<view>{{item.actors[0]}}/{{item.actors[1]}}</view>
<view>{{item.regions}}</view>
<view>
<view class="p">{{item.vote_count}}</view>{{item.score}}
</view>
</view>
</view>
</view>
wxss：
.content{
height: 300rpx;
display: flex;
margin-top: 40rpx;
}
.content .img{
width: 30%;
height: 300rpx;
}
.content .img image{
width: 100%;
height: 100%;
}
.content .text{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 100rpx;
font-size: 28rpx;
}
.text view:nth-child(1){
color: blueviolet;
font-weight: bold;
}
wx.js:
Page({
/**
* 页面的初始数据
*/
data: {
movieList:[],
start:0,
limit:20,
flag:false,
newLength:0
},
getMovie(){
this.setData({
flag:true
})
wx.showLoading({
title: '加载中',
})
wx.request({
url: 'https://www.itnan.cc//api/xcxapi/getDouBanMovie.php',
data:{
start:this.data.start,
limit:this.data.limit
},
success:(res)=>{
console.log(res);
this.setData({
movieList:[...this.data.movieList,...res.data],
newLength:res.data.length
})
},
complete:()=>{
wx.hideLoading()
this.setData({
flag:false
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getMovie();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
this.getMovie()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if(!this.data.newLength){
wx.showToast({
title: '没有更多数据了',
icon:'error'
})
return
}
this.setData({
start:this.data.start + 20
}),
this.getMovie()
},
})
总结：
1.创建请求接口的函数，向网站发起请求
2.进行了分页处理，及或许新的数据后保留原始数据
3.遍历渲染里面的数据
4.wxml和wxss呈现到页面
结果演示：