微信小程序豆瓣电影

博客简介

本篇博客是一个经典的豆瓣电影微信小程序实战项目，由于豆瓣API不再对公众开放，这个小项目遇到了不少的阻力，但是最终基本上都得到了解决，本篇博客的中心也是API的调用：

• 项目展示
• 构架和配置
• 城市热榜获取
• 豆瓣电影Top250获取
• 获取电影详情
• 豆瓣电影搜索

项目展示

项目主要实现了轮播图，城市热榜获取，豆瓣电影Top250列表，电影详情页，电影搜索：

豆瓣电影微信小程序

构架和配置

这里主要是用了三个页面，分别是城市热播榜页面，豆瓣电影Top250列表，搜索页面。在三个页面下设有一个跳转页面，用来展示电影详情。

全局的json配置如下：

{
  "pages": [
    "pages/me/me",
    "pages/search/search",
    "pages/index/index",
    "pages/movie/movie"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#87CEFA",
    "navigationBarTitleText": "Movie show",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh":true
  },
  "tabBar":{
      "color":"#708090",
      "selectedColor":"#FF4500",
      "backgroundColor":"#87CEFA",
      "list":[
        {
          "pagePath": "pages/me/me",
          "text": "城市热播",
          "iconPath": "images/me.png",
          "selectedIconPath": "images/now.png"
        },
        {
          "pagePath":"pages/index/index",
          "text":"Top250",
          "iconPath":"images/index.png",
          "selectedIconPath":"images/now.png"
        },
        {
          "pagePath": "pages/search/search",
          "text": "搜索",
          "iconPath": "images/search.png",
          "selectedIconPath": "images/now.png"
        }
      ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

城市热榜获取

城市热榜页面获取的是城市热榜数据，我们先用微信APi获取经纬度，再用百度地图API获取中心城市，获取之后再有豆瓣API获取城市热播，步骤如下

• 用wx.getLocation获取当前位置的经纬度
• 用百度地图的接口：https://api.map.baidu.com/reverse_geocoding/v3/获取城市信息
• 豆瓣API获取城市热播榜：https://douban.uieee.com/v2/movie/in_theaters
• 设置必要的弹窗提示用户
• 效果展示

（1）用wx.getLocation获取当前位置的经纬度

function getLocation() {
  var that = this;
  wx.getLocation({
    type: 'wgs84',
    //请求成功
    success(res) {
      const latitude = res.latitude
      const longitude = res.longitude
      getCity(latitude, longitude);
    },
    //请求失败
    fail() {
      wx.showToast({
        title: '获取失败,请检查网络设置',
        icon: 'none',
        duration: 2000
      });
    }
  })
}

（2）用百度地图的接口获取城市信息

• API：https://api.map.baidu.com/reverse_geocoding/v3/

//获取城市信息
function getCity(latitude, longitude) {
  var url = "https://api.map.baidu.com/reverse_geocoding/v3/";
  var struct = {
    location: latitude + "," + longitude,
    ak: "jENyKFL5cVcIHtRanGbvaBllXFbTDexu",
    output: "json"
  }
  wx.request({
    url: url,
    data: struct,
    //成功
    success: function (res) {
      var city = res.data.result.addressComponent.city;//获取城市信息
      city = city.slice(0,city.length-1);
      //获取城市电影
      getMovies(city);
    },
    //失败
    fail: function (res) {
      wx.showToast({
        title: '获取失败,请检查网络设置',
        icon: 'none',
        duration: 2000
      });
    }
  })
}

豆瓣API获取城市热播榜：

• API：https://douban.uieee.com/v2/movie/in_theaters

//获取当地电影信息
function getMovies(city)
{
  wx.request({
    url: 'https://douban.uieee.com/v2/movie/in_theaters',
    data: {
      city:city
    },
    header: { 'content-type': 'application/text' },
    //成功
    success: function (res) {
      wx.hideToast();
      page.setData({
        movies: res.data.subjects,
        title: res.data.title
      });
      console.log(page.data.movies);
      console.log(page.data.title);
    },
    fail: function (res) {
      wx.showToast({
        title: '获取失败,请检查网络设置',
        icon: 'none',
        duration: 2000
      });
    },
  });
}

豆瓣电影Top250获取

豆瓣电影Top250获取算是一个很基础的API请求，我们直接调用即可，重要的是信息的展示。Top250拿到数据后，用于index页面的信息展示

• URL：https://douban.uieee.com/v2/movie/top250
• 注意做一些必要的弹窗

  onReady: function () {
    //显示消息提示弹窗
    var that=this;
    wx.showToast({
      title: 'Loading',
      icon: 'loading',
      duration: 60000
    });
    //发送网络请求，调用API，获取信息
    wx.request({
      url: 'https://douban.uieee.com/v2/movie/top250', 
      data:{
        count:100
      },
      header: {
        'content-type': 'application/text' // 默认值
      },
      success(res) {
        console.log(res.data);
        var data=res.data;
        that.setData({
          text:data.title,
          movies: data.subjects
        });
        wx.hideToast();
      },
      //请求失败
      fail()
      {
        console.log('fail request!');
        //调用失败，提示失败弹窗
        wx.showToast({
          title: '获取失败，请检查网络连接',
          icon: 'none',
          duration: 2000
        });
      }
    })
  },

获取电影详情

电影详情页面，这个页面主要是根据电影id获取当前id电影对应的电影详情，步骤如下：

• 在首页用navigator标签做跳转，带上参数
• 在详情页面调用API
• 通过API获取信息，展示页面

（1）在首页用navigator标签做跳转，带上参数

 <navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
          <view class="page-areas">
            <view class="page-image">
              <image src="{{item.images.small}}"></image>
            </view>
            <view class="page-text">
              <text class="text-item1">{{item.title}}</text>
              <text class="text-item2">{{item.original_title}}</text>
              <text class="text-item3">
                  <text wx:for="{{item.genres}}">{{item}} </text>
              </text>
              <text class="text-item4">
                  <text wx:for="{{item.directors}}">{{item.name}}</text>
              </text>
            </view>
            <view class="point">
              <text>{{item.rating.average}}</text>
            </view>
          </view>
    </navigator>

（2）在详情页面调用API

• 通过页面跳转在目标页面的onLoad函数中可以获取这个参数
• 将URL和参数做简单拼接
• 豆瓣URL：https://douban.uieee.com/v2/movie/subject/:id

onLoad: function (options) {
    var that=this;
    console.log(options);//参数
    wx.request({
      url: 'https://douban.uieee.com/v2/movie/subject/'+options.id, //拼接参数
      header: {
        'content-type': 'application/text' // 默认值
      },
      success(res) {
        var data = res.data;
        console.log(data);
        that.setData({
          imageSrc:data.images.large,
          title:data.title,
          countries: data.countries,
          languages: data.languages,
          year:data.year,
          genres: data.genres,
          directors: data.directors,
          casts: data.casts,
          summary: data.summary,
          popular_comments: data.popular_comments
        });
      },
      //请求失败
      fail() {
        console.log('fail request!');
        //调用失败，提示失败弹窗
        wx.showToast({
          title: '获取失败，请检查网络连接',
          icon: 'none',
          duration: 2000
        });
      }
    })
  }

豆瓣电影搜索

关于电影搜索API，博主在网上找了许多，都没有找到能用的接口，目前是想要用其他的电影接口API。最终由于小程序官方域名request请求修改次数过多没能在当月解决，只能下个月解决了，现在这个页面有一个小的搜索栏效果：

当每搜索一次搜索栏的图标将会替换一次，实现方法也很简单，当确认输入后就将图片的来源下标更新：

search:function(e)
  {
    var that=this;
    var num=((this.data.srcs)+1)%2;
    console.log(num);
    this.setData({
      srcs:num,
    });
    if (e.detail.value)
    {
      //提示搜索进行
      wx.showToast({
        title: 'Loading',
        icon: 'loading',
        duration: 60000
      });
      //发送网络请求，调用API，获取信息
      wx.request({
        url: 'php.test',
        data: {
          tag: e.detail.value,
        },
        header: {
          'content-type': 'application/json'
        },
        success(res) {
          console.log(res.data);
          var data = res.data;
          that.setData({
          });
          wx.hideToast();
        },
        //请求失败
        fail() {
          console.log('fail request!');
          //调用失败，提示失败弹窗
          wx.showToast({
            title: '由于开发者本月的域名修改次数不慎用完，搜索功能要到次月才能开放',
            icon: 'none',
            duration: 8000
          });
        }
      })
    }
  },