微信小程序开发（四）

发表于 | 更新于 | 分类于 |

文章页面用的是离线数据。电影页面利用豆瓣电影API，更贴近实际开发。主要用到正在热映，即将上映，TOP250，电影详情，查找电影。

电影页面

因图中有多个重复组建，单独拿出来引用。如图中红色框为一个模版，绿色框为一个模版,引用模版时样式也要同步引用。

movies

CODE

pages/movies/movies.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--引用绿色框模版-->
<import src="movie-list/movie-list-template.wxml" />
<!--引用红色框模版-->
<import src="movie-grid/movie-grid-template.wxml" />
<!--搜索框 -->
<view class="search">
  <icon type="search" class="search-img" size="13" color="#405f80" />
  <input type="text" placeholder="变形金刚5、与君相恋" 
  confirm-type="search" bindfocus="onBindFocus" bindconfirm="onBindConfirme" />
  <image wx:if="{{searchPanelShow}}" class="xx-img" src="/image/icon/xx.png" bindtap="onXxTap"></image>
</view>
<!--正在热映，即将上映，TOP250
containerShow为判断是否点击搜索，隐藏原来页面，显示搜索页面
searchPanelShow为判断是否点击XX，隐藏搜索页面，显示原来页面-->
<view class="container" wx:if="{{containerShow}}">
  <view class="movies">
    <template is="movieListTemplate" data="{{...inTheateers}}" />
  </view>
  <view class="movies">
    <template is="movieListTemplate" data="{{...comingSoon}}" />
  </view>
  <view class="movies">
    <template is="movieListTemplate" data="{{...top250}}" />
  </view>
</view>
<view class="search-pannel" wx:if="{{searchPanelShow}}">
<template is="movieGridTemplate" data="{{...searchResult}}" />
</view>

pages/movies/movies.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
//公共js脚本
var util = require("../../utils/util.js");
//全局定义
var app = getApp();

Page({
  //两种服务器API接口方式，现在大多数用JSON,,只有少部分企业级用XML.
  //RESTFul API JSON
  //SOAP XML
  data: {
	//正在热映json
    inTheateers: {},
	//即将上映json
    comingSoon: {},
	//TOP250json
    top250: {},
	//搜索json
    searchResult: {},
	//判断点击搜索框，是否隐藏页面
    containerShow: true,
	//判断点击搜索框XX，是否隐藏搜索页面
    searchPanelShow: false
  },

  onLoad: function (event) {
    var doubanBase = app.globalData.doubanBase;
    var inTheateersUrl = doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
    var comingSoonUrl = doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
    var top250Url = doubanBase + "/v2/movie/top250" + "?start=0&count=3";

    this.getMovieListData(inTheateersUrl, "正在热映", "inTheateers");
    this.getMovieListData(comingSoonUrl, "即将上映", "comingSoon");
    this.getMovieListData(top250Url, "豆瓣Top250", "top250");
  },
  //豆瓣数据 获取API.
  getMovieListData: function (url, titles, settedkey) {
    var that = this;
    wx.request({
      url: url,
      data: {},
      method: 'GET',
      header: {
        "Content-Type": "JOSN"
      },
      success: function (res) {
        //  console.log(res)
        that.processDoubanData(res.data, titles, settedkey)
      },
      fail: function (error) {
        //  console, log(error)
      }
    })
  },
  //星级评分，电影名，海报，评分，ID
  processDoubanData: function (moviesDouban, titles, 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 = {
        stars: util.convertToStarsArray(subject.rating.stars),
        title: title,
        average: subject.rating.average,
        coveragUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp)
    }
    var readyData = {};
    readyData[settedkey] = {
      titles: titles,
      movies: movies
    }

    this.setData(readyData);
    //console.log(readyData)
  },
  //点击更多页面连接。
  onMoreTap: function (event) {
    var titles = event.currentTarget.dataset.category;
    wx.navigateTo({
      url: 'more-movie/more-movie?titles=' + titles
    })
  },
  //点击搜索判断
  onBindFocus: function (event) {
    this.setData({
      containerShow: false,
      searchPanelShow: true,
    })
  },
  //搜索功能 
  onBindConfirme: function (event) {
    var text = event.detail.value;
    var searchUrl = app.globalData.doubanBase + "/v2/movie/search?q=" + text;
    this.getMovieListData(searchUrl, "", "searchResult")
  },
  //关闭搜索功能
  onXxTap: function (event) {
    this.setData({
      containerShow: true,
      searchPanelShow: false,
      searchResult: {}
    })
  },
  // 电影详情页面
  onMovieTap:function(event){
    var movieId = event.currentTarget.dataset.movieid;
    wx.navigateTo({
      url: 'movie-detail/movie-detail?id=' + movieId
    })
  },

})

pages/movies/movies.json

1
2
3
{
  "navigationBarTitleText": "电影"
}

pages/movies/movies.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@import "movie-list/movie-list-template.wxss";
@import "movie-grid/movie-grid-template.wxss";

.xx-img {
  height: 30rpx;
  width: 30rpx;
  margin: auto 0 auto 30rpx;
}

.movies {
  margin-bottom: 30rpx;
}

.placeholder {
  font-size: 14px;
  color: #d1d1d1;
  margin-left: 20rpx;
}

.search input {
  height: 100%;
  width: 600rpx;
  margin-left: 20rpx;
  font-size: 28rpx;
}

.search {
  background-color: #f2f2f2;
  height: 50rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 10rpx 0 10rpx 0;
}

.search-img {
  margin: auto 0 auto 20rpx;
}

.container {
  background-color: #f2f2f2;
}

.search-pannel {
  position: absolute;
  top: 80rpx;
}

公共、模版—code—

utils/util.js

公共JS脚本。多出用到提取出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 公共函数
//豆瓣星星评分函数
function convertToStarsArray(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;
  console.log(array)
}
//豆瓣数据获取
function http(url, callBack) {
  wx.request({
    url: url,
    data: {},
    method: 'GET',
    header: {
      "Content-Type": "JOSN"
    },
    success: function (res) {
      callBack(res.data);
    },
    fail: function (error) {
      console.log(error)
    }
  })
}
// 实现人名“/”隔开
function convertToCastString(casts) {
  var castsjoin = "";
  for (var idx in casts) {
    castsjoin = castsjoin + casts[idx].name + " / ";
  }
  return castsjoin.substring(0, castsjoin.length - 2);
}

function convertToCastInfos(casts) {
  var castsArray = []
  for (var idx in casts) {
    var cast = {
      img: casts[idx].avatars ? casts[idx].avatars.large : "",
      name: casts[idx].name
    }
    castsArray.push(cast);
  }
  return castsArray;
}

// 传递函数
module.exports = {
  convertToStarsArray: convertToStarsArray,
  http: http,
  convertToCastString: convertToCastString,
  convertToCastInfos: convertToCastInfos
}

pages/movies/stars/stars-template.wxml.wxss

星级评分组建

1
2
3
4
5
6
7
8
9
10
11
<template name="starsTemplate">
  <view class="stars-container">
    <view class="stars">
    <block wx:for="{{stars}}" wx:for-item="i">
      <image wx:if="{{i}}" src="/image/icon/star.png"></image>
      <image wx:else src="/image/icon/none-star.png"></image>
    </block>
    </view>
    <text class="stars-score">{{score}}</text>
  </view>
</template>
.stars-container{
  display: flex;
  flex-direction: row;
}
.stars{
   display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 24rpx;
  margin-top:6rpx;
}
.stars image{
  padding: 3rpx;
  height: 17rpx;
  width: 17rpx;
}
.stars-score{
  color: #1f3463;
}

pages/movies/movies-list/movies-list-template.wxml.wxss

电影分栏组件

<import src="../movie/movie-template.wxml" />
<template name="movieListTemplate">
  <view class="movie-list-container">
    <view class="innet-container">
      <view class="movie-head">
        <text class="slogan">{{titles}}</text>
        <view catchtap="onMoreTap" class="more"data-category="{{titles}}">
          <text class="more-text">更多</text>
          <image class="more-img" src="/image/icon/arrow-right.png"></image>
        </view>
      </view>
      <view class="movies-container">
      <block wx:for="{{movies}}" wx:for-item="movie">
         <template is="movieTemplate" data="{{...movie}}"/>
      </block>

        <!--<template is="movieTemplate" />
        <template is="movieTemplate" />-->
      </view>
    </view>
  </view>
</template>

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

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

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

.movie-head {
  padding: 30rpx 20rpx 22rpx;
}

.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;
}

pages/movies/movies-grid/movies-grid-template.wxml.wxss

电影搜索页面

<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
  <view class="grid-contaioner" >
    <block wx:for="{{movies}}" wx:for-item="movie">
      <view class="sing-view-contaioner">
        <template is="movieTemplate" data="{{...movie}}" />
      </view>
    </block>
  </view>
</template>

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

.sing-view-contaioner {
  float: left;
  margin-bottom: 40rpx;
}

.grid-contaioner {
  height: 1300rpx;
  margin: 40rpx 0 40rpx 6rpx;
}

pages/movies/movies/movies-template.wxml.wxss

电影简章，如红框图

<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
  <view class="movie-container" catchtap="onMovieTap" data-movieId="{{movieId}}">
    <image class="movie-img" src="{{coveragUrl}}"></image>
    <text class="movie-title">{{title}}</text>
    <template is="starsTemplate" data="{{stars:stars, score:average}}" />
  </view>
</template>

@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;
}