微信小程序电影列表（一）

我是ed.

13535人浏览 · 2020-02-20 09:49:39

我是ed. · 2020-02-20 09:49:39 发布

微信小程序电影列表（一）

　　当我们再次见面的时候，不得比现在优秀一点点嘛~　　

tab 选项卡

使用 tab 选项卡，首先我们等去之前新闻列表的 welcome.js 文件中修改一个地方：

 // 页面之间平行跳转，之前的页面被关闭，不可返回，进入同级界面
    wx.navigateTo({
      url: '../posts/post',
    });
  },

122100版本中，如果跳转到一个带有 tab 选项卡的页面，必须用 wx.switchTab 这个新增方法。请更改为这个方法。但是如果要跳转到一个不带 tab 选项卡的页面，还是需要使用 redirect 或者 navigate 。

效果图：

微信小程序 tabBar 官方说明文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

tabBar 使用案例：

"tabBar":{
    "list":[
      {
        "pagePath": "",
        "text": "主页"
      },
      {
        "pagePath": "",
        "text": "日志"
      }
    ]
  }

新建 movies 文件夹，并创建对应的四个文件

在 app.js 文件中添加 tarBar 设置

{
  "pages": [
    "pages/posts/post",
    "pages/movies/movies",
    "pages/welcome/welcome",
    "pages/posts/post-detail/post-detail"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar":{
    "list":[
      {
        "pagePath": "pages/movies/movies",
        "text": "电影"
      },
      {
        "pagePath": "pages/posts/post",
        "text": "文章"
      }
    ]
  }
}

设置 tabTar 图标

修改 app.json 文件，为 tabbar list设置图片路径：

{
  "pages": [
    "pages/posts/post",
    "pages/movies/movies",
    "pages/welcome/welcome",
    "pages/posts/post-detail/post-detail"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/posts/post",
        "text": "阅读",
        "iconPath": "/images/tab/yuedu.png",
        "selectedIconPath":"/images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影",
        "iconPath": "/images/tab/dianying.png",
        "selectedIconPath": "/images/tab/dianying_hl.png"
      }
    ]
  }
}

创建电影界面

使用 template 来构建电影界面

创建文件目录结构

stars-template.wxml 文件作为评分（五颗五角星和得分）的模板

<template name="starsTempalte">
  <view>
    <image src='/images/dy/star.png'></image>
    <image src='/images/dy/star.png'></image>
    <image src='/images/dy/star.png'></image>
    <image src='/images/dy/star.png'></image>
    <image src='/images/dy/star.png'></image>
    <text>0.0</text>
  </view>
</template>

movie-template.wxml 文件作为异步电影的（海报名称评分）的模板

<import src="../stars/stars-template.wxml" />

<template name="movieTemplate">
  <view>
    <image src='/images/yourname.jpg'></image>
    <text>你的名字</text>
    <template is="starsTempalte" />
  </view>
</template>

movie-list-template.wxml 文件作为一列电影（分类的名称更多按钮包含三部电影）的模板

<import src="../movie/movie-template.wxml" />

<template name="movieListTemplate">

  <view>

    <view>
      <text>正在热映</text>
      <view>
        <text>更多</text>
        <image src='/images/dy/arrow-right.png'></image>
      </view>
    </view>
    <template is="movieTemplate" />
    <template is="movieTemplate" />
    <template is="movieTemplate" />
  </view>

</template>

将模板构建在电影页面中：

moview.wxml 文件

<import src="movie-list/movie-list-template.wxml" />

<view>
  <template is="movieListTemplate" />
  <template is="movieListTemplate" />
  <template is="movieListTemplate" />
</view>

还没有加样式，比较丑，但是元素都设置成功！

编写样式

编写评分的样式 stars-template.wxss

.stars-container{
  display: flex;
  flex-direction: row;
}

.stars{
  display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 24rpx;
  margin-top: 6rpx;
}

.stars image{
  padding-left: 3rpx;
  height: 17rpx;
  width: 17rpx;
}

.star-score{
  color: #1f3463;
}

编写电影海报和名称的样式 movie-template.wxss

/* 导入写好的评分的样式 */
@import "../stars/stars-template.wxss";

.movie-container {
  display:flex ;
  flex-direction: column;
  padding: 0 22rpx;
}

.movie-img {
  width: 200rpx;
  height: 270rpx;
  padding-bottom: 20rpx;
}

.movie-title{
  margin-bottom: 16rpx;
  font-size: 24rpx;
}

编写三部电影排列的样式 movie-list-template.wxss

@import "../movie/movie-template.wxss";

.movie-list-container{
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.inner-container{
  margin: 0 auto 20rpx;
}

.movie-head{
  padding: 30rpx 20rpx 22rpx;
  /* display: flex;
  flex-direction: row;
  justify-content: space-between; */
}

.slogan{
  font-size: 24rpx;
}

.more{
  float: right;
}

.more-text{
  vertical-align: middle;
  margin-right: 10rpx;
  color: #1f4ba5;
}

.more-img{
  width: 9rpx;
  height: 16rpx;
  vertical-align: middle;
}


.movies-container{
  display: flex;
  flex-direction: row;
}

编写电影界面整体样式 movies.wxss

@import "movie-list/movie-list-template.wxss";

从服务器获取数据

我们将使用豆瓣的API接口获取数据

　　豆瓣API官网：https://developers.douban.com/wiki/?title=guide

注意！因为现在很多小程序学习视频都是拿豆瓣做实验，来自小程序的调用过多，豆瓣来自于小程序的调用被禁止。解决方法：将 https://www.api.douban.com 换成代理 https://douban.uieee.com 。亲测有效！

修改 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>

修改 movise.wxss 文件代码

@import "movie-list/movie-list-template.wxss";

.container{
  background-color: #f2f2f2;
}

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

修改 movises.json 文件代码

{
  "navigationBarTitleText": "光与影"
}

将豆瓣API连接放进全局变量，即修改 app.js 文

App({
  globaData:{
    // 指代音乐是否被播放
    g_isPlayingMusic:false,
    // 哪一个音乐正在被播放
    g_currentMusicPostId:null,
    // 豆瓣接口的全局变量
    doubanBase:"https://douban.uieee.com"
  }
})

修改 movise.js 文件，获取豆瓣正在热映、即将上映、 top250 三组数据

// 获取全局的app
var app = getApp();

Page({

  // RESTFUL API  json
  // SOAP XML 用的相当少

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(event) {
    // 正在热映
    var inTheatersUrl = app.globaData.doubanBase + "/v2/movie/in_theaters"; 
    // 即将上映
    var comingSoonUrl = app.globaData.doubanBase + "/v2/movie/coming_soon";
    // 前250
    var top250Url = app.globaData.doubanBase + "/v2/movie/top250";
    this.getMovieListData(inTheatersUrl);
    this.getMovieListData(inTheatersUrl);
    this.getMovieListData(inTheatersUrl);
   
  },

getMovieListData:function(url){
  wx.request({
    url: url,
    method: 'GET',
    header: {
      'content-type': 'application/xml' // 豆瓣一定不能是json
    },
    success: function (res) {
      console.log(res)
    },
    fail: function (error) {
      console.log(error)
    }
  })
}
})

默认每组数据20条数据，我们只需要三条，我们需要传参数设置只每组获取三条数据 movise.js

// 获取全局的app
var app = getApp();

Page({

  // RESTFUL API  json
  // SOAP XML 用的相当少

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(event) {
    // 正在热映
    var inTheatersUrl = app.globaData.doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
    // 即将上映
    var comingSoonUrl = app.globaData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
    // 前250
    var top250Url = app.globaData.doubanBase + "/v2/movie/top250" + "?start=0&count=3";
    this.getMovieListData(inTheatersUrl);
    this.getMovieListData(inTheatersUrl);
    this.getMovieListData(inTheatersUrl);

  },

  getMovieListData: function(url) {
    wx.request({
      url: url,
      method: 'GET',
      header: {
        'content-type': 'application/xml' // 豆瓣一定不能是json
      },
      success: function(res) {
        console.log(res)
      },
      fail: function(error) {
        console.log(error)
      }
    })
  }
})

处理接收过来的方法

movies.js 文件：获取豆瓣数据

// 获取全局的app
var app = getApp();

Page({

  // RESTFUL API  json
  // SOAP XML 用的相当少

  /**
   * 页面的初始数据
   */
  data: {
    inTheaters:{},
    comingSoon:{},
    top250:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(event) {
    // 正在热映
    var inTheatersUrl = app.globaData.doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
    // 即将上映
    var comingSoonUrl = app.globaData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
    // 前250
    var top250Url = app.globaData.doubanBase + "/v2/movie/top250" + "?start=0&count=3";
    this.getMovieListData(inTheatersUrl,"inTheaters");
    this.getMovieListData(comingSoonUrl,"comingSoon");
    this.getMovieListData(top250Url,"top250");

  },

  getMovieListData: function(url,settedKey) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        'content-type': 'application/xml' // 豆瓣一定不能是json
      },
      success: function(res) {
        that.procseeDoubanData(res.data, settedKey)
      },
      fail: function(error) {
        console.log(error)
      }
    })
  },

  // 处理数据函数
  procseeDoubanData: function (moviesDouban, settedKey) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + "···";
      }
      var temp = {
        title: title, // 电影名称
        average: subject.rating.average, // 评分
        coverageUrl: subject.images.large, // 海报
        movieId: subject.id  // id
      }
      movies.push(temp);
      var readyData={};
      readyData[settedKey] = {
        movies: movies,
      }
      // 数据绑定
      this.setData(readyData);
    }
  },

})

movies.wxml 文件：与数据进行绑定

<import src="movie-list/movie-list-template.wxml" />

<view class='container'>
  <view class=" movies-template">
    <template is="movieListTemplate" data="{{...inTheaters}}" />
  </view>
  <view class=" movies-template">
    <template is="movieListTemplate" data="{{...comingSoon}}" />
  </view>
  <view class=" movies-template ">
    <template is="movieListTemplate" data="{{...top250}}" />
  </view>
</view>

movies-list-template.wxml 文件

<import src="../movie/movie-template.wxml" />

<template name="movieListTemplate">

  <view class='movie-list-container'>
    <view class='inner-container'>
      <view class='movie-head'>
        <text class='slogan'>正在热映</text>
        <view class='more'>
          <text class='more-text'>更多</text>
          <image class='more-img' src='/images/dy/arrow-right.png'></image>
        </view>
      </view>
      <view class='movies-container'>
        <block wx:for="{{movies}}" wx:for-item="movie">
          <template is="movieTemplate" data="{{...movie}}" />
          <!-- <template is="movieTemplate" />
          <template is="movieTemplate" /> -->
        </block>
      </view>
    </view>
  </view>

</template>

修改 stars-template.wxml 文件

<template name="starsTempalte">
  <view class='stars-container'>
    <view class='stars'>
      <image src='/images/dy/star.png'></image>
      <image src='/images/dy/star.png'></image>
      <image src='/images/dy/star.png'></image>
      <image src='/images/dy/star.png'></image>
      <image src='/images/dy/none-star.png'></image>
    </view>
    <text class='star-score'>{{average}}</text>
  </view>
</template>

编写 stars（评分）组件

movies.js

var util = require('../../utils/utils.js')
// 获取全局的app
var app = getApp();

Page({

  // RESTFUL API  json
  // SOAP XML 用的相当少

  /**
   * 页面的初始数据
   */
  data: {
    // 下面三个必须写！！！
    inTheaters: {},
    comingSoon: {},
    top250: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(event) {
    // 正在热映
    var inTheatersUrl = app.globaData.doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
    // 即将上映
    var comingSoonUrl = app.globaData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
    // 前250
    var top250Url = app.globaData.doubanBase + "/v2/movie/top250" + "?start=0&count=3";
    this.getMovieListData(inTheatersUrl, "inTheaters","正在热映");
    this.getMovieListData(comingSoonUrl, "comingSoon","即将上映");
    this.getMovieListData(top250Url, "top250","豆瓣Top250");

  },

  getMovieListData: function (url, settedKey, cagetoryTitle) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        'content-type': 'application/xml' // 豆瓣一定不能是json
      },
      success: function(res) {
        that.procseeDoubanData(res.data, settedKey, cagetoryTitle)
      },
      fail: function(error) {
        console.log(error)
      }
    })
  },

  // 处理数据函数
  procseeDoubanData: function(moviesDouban, settedKey,cagetoryTitle) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + "···";
      }
      // [1,1,1,1,1]  [1,1,1,0,0]
      var temp = {
        stars: util.converToStarsArray(subject.rating.stars), // 评分，星星
        title: title, // 电影名称
        average: subject.rating.average, // 评分
        coverageUrl: subject.images.large, // 海报
        movieId: subject.id // id
      }
      movies.push(temp);
      var readyData = {};
      readyData[settedKey] = {
        cagetoryTitle: cagetoryTitle,
        movies: movies,
      }
      // 数据绑定
      this.setData(readyData);
    }
  },

})

在根目录下创建一个utils文件夹，其中创建一个 utils.js 文件，用于储存常用函数

utils.js

function converToStarsArray(stars) {
  var num = stars.toString().substring(0, 1);
  var array = [];
  for(var i=1;i<=5;i++){
    if(i<num){
      array.push(1);
    }else{
      array.push(0);
    }
  }
  return array;
}

// 导出
module.exports ={
  converToStarsArray: converToStarsArray,
}

movie-template.wxml 修改传入评分模板的参数

<import src="../stars/stars-template.wxml" />

<template name="movieTemplate">
  <view class='movie-container'>
    <image class='movie-img' src='{{coverageUrl}}'></image>
    <text class='movie-title'>{{title}}</text>
    <template is="starsTempalte" data="{{stars:stars,score:average}}" />
  </view>
</template>

stars-template.wxml 修改获取的评分参数

<template name="starsTempalte">
  <view class='stars-container'>
    <view class='stars'>
      <!-- <image src='/images/dy/star.png'></image>
      <image src='/images/dy/star.png'></image>
      <image src='/images/dy/star.png'></image>
      <image src='/images/dy/star.png'></image>
      <image src='/images/dy/none-star.png'></image> -->
      <block wx:for="{{stars}}" wx:for-item="i">
        <image wx:if="{{i}}" src='/images/dy/star.png'></image>
        <image wx:else src='/images/dy/none-star.png'></image>
      </block>
    </view>
    <text class='star-score'>{{score}}</text>
  </view>
</template>

movie-list-template.wxml ：

<import src="../movie/movie-template.wxml" />

<template name="movieListTemplate">

  <view class='movie-list-container'>
    <view class='inner-container'>
      <view class='movie-head'>
        <text class='slogan'>{{cagetoryTitle}}</text>
        <view class='more'>
          <text class='more-text'>更多</text>
          <image class='more-img' src='/images/dy/arrow-right.png'></image>
        </view>
      </view>
      <view class='movies-container'>
        <block wx:for="{{movies}}" wx:for-item="movie">
          <template is="movieTemplate" data="{{...movie}}" />
          <!-- <template is="movieTemplate" />
          <template is="movieTemplate" /> -->
        </block>
      </view>
    </view>
  </view>

</template>