微信小程序入门级教程-10

前言

  上节课中我们写好了电影列表的页面，接下来我们就开始正式开始获取网络数据了，不再是拿本地数组来自慰了，所以咱们也闲话少说，直接开始吧！

效果图

目录

https://www.jianshu.com/p/9c9b555b52e8

步骤

  在微信中，咱们获取数据有一个方法，就是wx.request(OBJECT)，具体的参数和咱们使用的jquery的ajax十分相似，我们这里就详细的看看他的参数有哪些，如下所示：

请求数据参数表

1. 首先咱们打开豆瓣的API公共接口文档：https://developers.douban.com/wiki/?title=movie_v2。
2. 我们可以找到我们需要的三个接口：

正在热映：/v2/movie/in_theaters

即将上映：/v2/movie/coming_soon

Top250： /v2/movie/top250

请求类型： GET
参数：count（获取内容条数） // 这里我们只需要这个参数

3. 在app.js中配置一个全局的请求路径头，然后命名为BASEPATH，在movies中引入app.js：
   app.js

BASEPATH: "https://d1ouban.uieee.com/" 
// 豆瓣本身的地址请求会发生403错误，所以在这里我们使用大佬提供的服务器地址

let app = getApp();

onLoad: function(){
  let inTheaters = app.globalData.BASEPATH + "v2/movie/in_theaters",
  wx.request({
    url: inTheaters,
    data: { count: 3 }, // 页面中目前我们只需要3条数据
    header:{ "Content-Type":"json" },
    success: function(res) {
      console.log(res)
    }
  });
}

报错信息

注意：

  在这里报错了，微信也提示了我们需要去配置域名，所以登录微信开放平台，找到自己的小程序，在请求配置里面配置BASEPATH那个地址，这样子我们家就可以在小程序中访问https://d1ouban.uieee.com/了，切记，配置域名的时候，不要最后的斜杠，不然域名配置提示错误！！配置好了，退出小程序，然后重新进来，再看看控制台，可以看到如下结果：

数据图

4. 接下来我们就可以规划，先把所有需要的数据全部拿下再说：

let app = getApp();
Page({
    onLoad: function(e){
        let inTheaters = app.globalData.BASEPATH + "v2/movie/in_theaters",
            comeingSoon = app.globalData.BASEPATH + "v2/movie/coming_soon",
            top250 = app.globalData.BASEPATH + "v2/movie/top250";

        // 调用三次不同的接口请求不同的数据
        this.getData(inTheaters, "inTheaters");
        this.getData(comeingSoon, "comeingSoon");
        this.getData(top250, "top250");

    },

    // 封装请求数据的函数
    // 参数： [ 路径 ，接收结果的对象 ]
    getData: function(url, setKey){
        let that = this;
        wx.request({
            url: url,
            data: { count: 3 }, // 页面中目前我们只需要3条数据
            header:{ "Content-Type":"json" },
            success: function(res) {
                // 调用专门处理数据的函数
                // 参数： [ 数据， 接收结果的对象 ]
                that.processDoubanData(res.data.subjects, setKey);
            }
        });
    },

    //处理数据的函数 
    // 参数： [ 数据， 接收结果的对象 ]
    processDoubanData: function(data, setKey){
        var movie = [];
        for(let subject of data){
            let temp = {}
            temp.title = subject.title; // 标题
            temp.average = subject.rating.average.toFixed(1); // 评分值
            temp.coverageUrl = subject.images.large; // 封面图
            temp.movieId = subject.id; // 电影ID
            movie.push(temp);
        }
        // 往data中动态创建变量来保存数据
        this.setData({
            // 因为这里不能直接写setKey，所以用[]来包裹住变量key，相当于占位符
            [setKey]: {
                // 这里额外创建了一个对象，赋予movies属性我们的数据
                // 因为在后面，我们的模板是循环写的，所以在这里，
                // 我们需要让他们三个都有一个共同的属性值，方便模板循环遍历
                movies: movie
            }
    });
    }
})

5. 在已经拿到数据了，我们的data中就有了3个变量：

   
   
   

   控制台

然后我们开始往模板中赋值：

movies.wxml