慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-获取正在热映、即将上映和Top250的数据

获取正在热映、即将上映和Top250的数据

1.进入目录 pages/movies，修改文件 movies.wxml，添加样式

<import src="movie-list/movie-list-template.wxml" />
<view class="container">
  <view class="movies-template">
    <template is="movieListTemplate" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" />
  </view>
</view>

2.进入目录 pages/movies，修改文件 movies.wxss，添加样式　　

@import "movie-list/movie-list-template.wxss";
.container {
  background-color: #f2f2f2;
}

.movies-template {
  margin-bottom: 30rpx;
}

3.进入目录 pages/movies，修改文件 movies.json，添加标题　

{
  "navigationBarTitleText": "光和影"
}

4.进入目录 pages/movies，修改文件 movies.js，添加api

var app = getApp();
Page({
  onLoad: function(event) {
    var inTheatersUrl = app.globalData.doubanBase + "/v2/movie/in_theaters";
    var comingSoonUrl = app.globalData.doubanBase + "/v2/movie/coming_soon";
    var top250Url = app.globalData.doubanBase + "v2/movie/top250";
    this.getMovieListData(inTheatersUrl);
    this.getMovieListData(comingSoonUrl);
    this.getMovieListData(top250Url);
  },
  getMovieListData: function(url) {
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function(res) {
        console.log(res)
      },
      fail: function(error) {
        console.log(error)
      },
    })
  }
})

5.修改文件 app.js，添加全局变量

App({
  globalData: {
    g_isPlayingMusic: false,
    g_currentMusicPostId: null,
    doubanBase: "https://api.douban.com",
  }
})