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呈现到页面

 

结果演示：