2020.8.06 微信小程序

**

今天写了一个简单的微信小程序调用接口获取数据渲染页面的案例：

**

首先，这是我的代码目录：

logs文件夹是我的主页面， movieDetail文件夹是我的详情页面，如图所示：

要在logs.js里面请求数据：(豆瓣的接口)

Page({
  data: {
    movieList: [],
  },

  onLoad: function (options) {
    this.getMovieList()
  },
  getMovieList() {
    let url = "https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b"
    // 数据加载时开启
    wx.showLoading({
      title: '别急，拼命加载中.....',
    })
    wx.request({
      url: url,
      data: {
      },
      //设置请求头
      header: {
        "Content-Type": "appLication/text"
      },
      success: (res) => {
        console.log(res)
        //拿到数据
        let {statusCode,data} = res;
        let {subjects} = data;  
        if (statusCode === 200) {
          this.setData({
            movieList: subjects
          })
          // 数据加载完成隐藏
          wx.hideLoading()
        }
      }
    })
  },
})

拿到数据后，直接在logs.wxml渲染即可，代码如下：（我用的标签式导航的跳转详情页，注意跳转路径后id的拼接）

<!--logs.wxml-->
<view>
	<view class="movie">影院热映</view>
	<view wx:for="{{movieList}}" wx:key="index" class="list-box">
		<navigator url="/pages/movieDetail/movieDetail?id={{item.id}}">
			<image src="{{item.images.small}}" class="list-image"></image>
			<view class="list-title">{{item.title}}</view>
			<view class="list-title">评分：<text class="fonts">{{item.rating.average}}</text></view>
		</navigator>
	</view>
</view>

logs.wxss样式代码：

.list-box {
  display: inline-block;
  margin-left: 28rpx;
  font-size: 27rpx;
  padding-top: 25rpx;
}

.list-box .list-image {
  width: 210rpx;
  height: 270rpx;
  border-radius: 10rpx;
}

.list-title {
  margin-top: 10rpx;
}

.movie {
  font-size: 50rpx;
  margin-top: 50rpx;
  margin-left: 28rpx;
}

.fonts {
  color: red;
  font-size: 30rpx;
}

然后在movieDetail.js文件里面请求详情页的数据，代码如下：(老规矩，正常请求数据，注意接口参数的字符串拼接)

// pages/movieDetail/movieDetail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: 0,
    dataList: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    let id = options.id;
    console.log(options.id)
    this.setData({
        id: id
      }),
      this.goDetails()
  },
  goDetails() {
    let url = "https://api.douban.com/v2/movie/subject/" + this.data.id + "?apikey=0b2bdeda43b5688921839c8ecb20399b"
    wx.request({
      url: url,
      header: {
        "Content-Type": "appLication/json"
      },
      success: (res) => {
        //console.log(res)
        let {statusCode,data} = res;
        if (statusCode === 200) {
          this.setData({
            dataList: data
          })
        }
      }
    })
  },
})

最后在movieDetail.wxml里面正常渲染数据就可以：

<!--pages/movieDetail/movieDetail.wxml-->
<view class="bigBox">
	<view class="movie">电影详情</view>
	<!-- 大盒子 -->
	<view class="box-list">
		<!-- 大盒子左边的图片 -->
		<view class="box-list-left-image">
			<image src="{{dataList.images.small}}"></image>
		</view>
		<!-- 大盒子右边的文字 -->
		<view class="box-list-right-font">
			<view class="box-list-font">{{dataList.title}}</view>
			<view class="box-list-eng">{{dataList.original_title}} ({{dataList.year}}) </view>
			<view class="box-list-cate">{{dataList.countries}}/{{dataList.genres}}/{{dataList.mainland_pubdate}}(中国大陆)上映/片长{{dataList.durations}}</view>
		</view>
	</view>
	<!-- 剧情简介 -->
	<view class="juqing">剧情简介</view>
	<view class="summary">{{dataList.summary}}</view>
</view>

然后这是movieDetail.wxss的样式代码：

/* pages/movieDetail/movieDetail.wxss */
.movie {
  font-size: 50rpx;
  margin-top: 50rpx;
  margin-left: 28rpx;
}

.box-list {
  margin-top: 50rpx;
  width: 100%;
  height: 420rpx;
  border: 1rpx solid #7B7F7F;
  background: #7B7F7F;
  display: flex;
}

.box-list .box-list-left-image {
  width: 250rpx;
  height: 320rpx;
  margin-left: 35rpx;
  margin-top: 45rpx;
}

.box-list .box-list-left-image image {
  width: 250rpx;
  height: 320rpx;
  border-radius: 10rpx;
}

.box-list-right-font {

  margin-left: 35rpx;
  margin-top: 50rpx;

}

.box-list-right-font .box-list-font {
  color: white;
  font-size: 50rpx;
}

.box-list-right-font .box-list-eng {
  color: white;
  margin-top: 5rpx;
}

.box-list-right-font .box-list-cate {
  color: #D8D9D9;
  font-size: 25rpx;
  margin-top: 15rpx;
}

.juqing {
  font-size: 35rpx;
  margin-top: 40rpx;
  margin-left: 28rpx;
  color: #7B7F7F;
}

.summary {
  width: 93%;
  margin: 0 auto;
  font-size: 34rpx;
  margin-top: 30rpx;
}

这样基本就完成了…