微信小程序调用api接口实例

页面效果：1、首先在微信开发者工具中开启http域名2、然后回到开发者工具中，找到详情=》项目配置，进行刷新或者重新编译3、在index.wxml页面中写一个button:<view><button bindTap="test">测试</button></view>4、在index.js文件中写入方法：text:function(){var that

柒个M

24318人浏览 · 2020-11-25 17:55:12

柒个M · 2020-11-25 17:55:12 发布

页面效果：

1、首先在微信开发者工具中开启http域名

2、然后回到开发者工具中，找到详情=》项目配置，进行刷新或者重新编译

3、在index.wxml页面中写一个button:

<view>
    <button bindTap="test">测试</button>
</view>

4、在index.js文件中写入方法：

text:function(){
    var that = this;
    wx.request({
      // url: 'https://movie.querydata.org/api?id=1302427',
      url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&id="25907124"',
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      header: {
        'content-type': 'application/xml'
      },
      success: function(res) {
        if(res.statusCode == 200){
          that.setData({   
            movieArr : res.data,
          
          }) 
          console.log(res.data)
        }
       
      },
      fail: function() {
        wx.showToast({
          title: "网络连接失败",
          duration: 3000
        })

      },
    })
}

5、在wxml页面中进行数据绑定：

<!--index.wxml-->
<view class="container">

  <view class="movies">
    <view class="movie-sty" wx:for="{{movieArr.subjects}}" wx:for-item='item'>
      <view class="left">
        <image src="{{ item.cover }}"></image>
      </view>
    
      <view class="right">
        <view class="title">{{item.title}}</view>
        <view class="descripe">
          <view>评分：{{ item.rate }}</view>
          <view>传送门：<text style="color:red;margin-top:10rpx;">{{item.url}}</text></view>
        </view>
        
        <navigator class="btn-sty" url="/pages/details/index">
          <button size="mini" style="font-size:12px;">详情>></button>
        </navigator>
      </view>
    </view>
  </view>
  

</view>

6、index.wxss文件中设置样式：

/**index.wxss**/
page{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  background: #f6f6f6;
  width: 100%;
}
.movies {
  width: 100%;
}
.movie-sty {
  width: 100%;
  height: 400rpx;
  border-radius: 5px;
  background-color: #fff;
  margin: 2% 0;
  display: flex;
  justify-content: space-around;
}
.left{
  width: 50%;
  height: 400rpx;
  margin-left: 2%;
  border-radius: 5px;
}
.left image{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.right {
  width: 45%;
  /* padding: 40rpx 20rpx; */
  font-size: 14px;
}
.right .title {
  font-size: 15px;
  font-weight: bold;
  margin: 10% 5%;
}
.right .descripe {
  margin: 5% 5%;
  width: 90%;
  height: 50%;
  word-break:break-all;
  font-size: 12px;
}
.btn-sty {
  margin-left: 50%;
}