微信小程序开发(四)

文章页面用的是离线数据。电影页面利用豆瓣电影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;
}

坚持原创技术分享,您的支持将鼓励我继续创作!