devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：很楠不爱3 | 2024-06-05 18:19:15

赞

踩

微信小程序 wx.request

js部分：

  1. // index.js
  2.  
  3. // 获取应用实例
  4.  
  5. const app = getApp()
  6.  
  7.  
  8.  
  9. Page({
  10.  
  11.   data: {
  12.  
  13.     list:[] //创建list数组
  14.  
  15.   },
  16.  
  17.   // 事件处理函数
  18.  
  19.   bindViewTap() {
  20.  
  21.     
  22.  
  23.   },
  24.  
  25.   onLoad() {
  26.  
  27.       //保存this对象  代表page对象
  28.  
  29.       var that=this;
  30.  
  31.     wx.request({
  32.  
  33.         url: 'https://m.maoyan.com/ajax/movieOnInfoList', //仅为示例，并非真实的接口地址，可以打开不校验合法域名
  34.  
  35.         header: {
  36.  
  37.           'content-type': 'application/json' // 默认值
  38.  
  39.         },
  40.  
  41.         success (res) {
  42.  
  43.             var movieList=res.data.movieList;
  44.  
  45.           that.setData({
  46.  
  47.               list:movieList  //将获取的数据给list数组
  48.  
  49.           })
  50.  
  51.         }
  52.  
  53.       })
  54.  
  55.   },
  56.  
  57.  
  58.  
  59. })

wxml部分：

  1. <view class="item" wx:for="{{list}}">
  2.  
  3.     <image class="cover" src="{{item.img}}"></image>
  4.  
  5.         <view class="main">电影名字：{{item.nm}}</view>
  6.  
  7.         <view class="info">播放情况：{{item.showInfo}}</view>
  8.  
  9.         <view class="star">{{item.start}}</view>
  10.  
  11.     <text class="score">评分：{{item.sc}}</text>
  12.  
  13. </view>

wxss部分:

  1. /**index.wxss**/
  2.  
  3. .userinfo {
  4.  
  5.   display: flex;
  6.  
  7.   flex-direction: column;
  8.  
  9.   align-items: center;
  10.  
  11.   color: #aaa;
  12.  
  13. }
  14.  
  15.  
  16.  
  17. .userinfo-avatar {
  18.  
  19.   overflow: hidden;
  20.  
  21.   width: 128rpx;
  22.  
  23.   height: 128rpx;
  24.  
  25.   margin: 20rpx;
  26.  
  27.   border-radius: 50%;
  28.  
  29. }
  30.  
  31.  
  32.  
  33. .usermotto {
  34.  
  35.   margin-top: 200px;
  36.  
  37. }
  38.  
  39.  
  40.  
  41. .cover{
  42.  
  43.     width: 150rpx;
  44.  
  45.     height: 150rpx;
  46.  
  47.     margin-left: 20rpx; 
  48.  
  49.     display:flex;                    
  50.  
  51.     justify-content: center; 
  52.  
  53. }
  54.  
  55. .middle{
  56.  
  57.     margin-left: 200rpx;
  58.  
  59.     padding-top: 2rpx;
  60.  
  61. }

最终效果如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/677637
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号