微信小程序：wx.request网络请求

buchuifabo

已于 2024-03-18 16:08:15 修改

阅读量451

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

于 2023-09-19 21:53:51 首次发布

本文链接：https://blog.csdn.net/buchuifabo/article/details/133047595

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js部分：

// index.js

// 获取应用实例

const app = getApp()



Page({

  data: {

    list:[] //创建list数组

  },

  // 事件处理函数

  bindViewTap() {

    

  },

  onLoad() {

      //保存this对象  代表page对象

      var that=this;

    wx.request({

        url: 'https://m.maoyan.com/ajax/movieOnInfoList', //仅为示例，并非真实的接口地址，可以打开不校验合法域名

        header: {

          'content-type': 'application/json' // 默认值

        },

        success (res) {

            var movieList=res.data.movieList;

          that.setData({

              list:movieList  //将获取的数据给list数组

          })

        }

      })

  },



})

wxml部分：

<view class="item" wx:for="{{list}}">

    <image class="cover" src="{{item.img}}"></image>

        <view class="main">电影名字：{{item.nm}}</view>

        <view class="info">播放情况：{{item.showInfo}}</view>

        <view class="star">{{item.start}}</view>

    <text class="score">评分：{{item.sc}}</text>

</view>

wxss部分:

/**index.wxss**/

.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

  color: #aaa;

}



.userinfo-avatar {

  overflow: hidden;

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}



.usermotto {

  margin-top: 200px;

}



.cover{

    width: 150rpx;

    height: 150rpx;

    margin-left: 20rpx; 

    display:flex;                    

    justify-content: center; 

}

.middle{

    margin-left: 200rpx;

    padding-top: 2rpx;

}