微信小程序--搜索电影app（续）

热门推荐页面各个文件代码如下：

recommendMovies.wxml：

<view class="wrapper">
<view wx:for="{{topMovies}}" wx:for-item="item">
<view class="content">
<view class="picView">
<image class="pic" src="{{item.images.medium}}" id="{{item.id}}" bindtap="toDetail" />
</view>
<view class="info">
<view class="name">
名称：{{item.title}}
</view>
<view class="score">{{item.rating.average}}分</view>
<view class="type">
类型：
<block wx:for="{{item.genres}}" wx:for-item="type">
{{type}},
<!--注意不要使用<view>，不然调不出效果。。-->
</block>
</view>
<view class="director">
导演：
<block wx:for="{{item.directors}}" wx:for-item="director">
{{director.name}},
</block>
</view>
<view class="actor">
演员：
<block wx:for="{{item.casts}}" wx:for-item="actor">
{{actor.name}},
</block>
</view>
<view class="time">年份： {{item.year}}</view>
</view>
</view>
</view>
</view>

recommendMovies.wxss：

.wrapper{
padding:0;
margin:0;
width:100%;
height:100%;
}
.slide-image{
width:750rpx;
height:100%;
}

.content{
width:100%;
height:300rpx;
padding:10rx;
display: flex;
flex-direction: row;
border-bottom: 2rpx solid #CCCCCC;
}
.picView{
float:left;
padding:20rpx 15rpx;
}
.pic{
width:210rpx;
height:260rpx;
}
.info{
float:left;
display: flex;
flex-direction: column;
color:#888888;
padding-top:20rpx;
font-size: 30rpx;
}
.name{
color:#000;
width:100%;
font-size: 32rpx;
margin-bottom: -19rpx;
}
.score{
position: relative;
width:80rpx;
float:right;
top:-18rpx;
color:#8C5A0D;
right:-433rpx;
}
.type{
display: flex;
flex-direction: row;
margin-bottom: 10rpx;
}
.director{
display: flex;
flex-direction: row;
margin-bottom: 10rpx;
}
.actor{
margin-bottom: 10rpx;
}

recommendMovies.js：

//recommendMovies.js
var util = require('../../utils/util.js')
Page({
data: {
},
onLoad: function () {
/*
var city = wx.getStorageSync('city');
console.log('只在初次进入此页面时执行一次');
var topMovies = wx.getStorageSync('topMovies'+city);
if (!topMovies){
console.log('request');
this.requestTopMovies();
}else{
console.log('storage');
this.setData({
topMovies:topMovies
});
}
*/
},
onShow: function () {
/* var city = wx.getStorageSync('city'); */
console.log('每次进入此页面都会执行此函数，适合放需要实时调用页面逻辑的代码');
/*经测试，此处不需要加city特判，因为请求排行榜靠前的电影时不需要加city参数.
var topMovies = wx.getStorageSync('topMovies' + city);*/
var topMovies = wx.getStorageSync('topMovies');
if (!topMovies) {
console.log('request');
this.requestTopMovies();
} else {
console.log('storage');
this.setData({
topMovies: topMovies
});
}
},
requestTopMovies:function(){
/* console.log('city:' + wx.getStorageSync('city'));
var city = wx.getStorageSync('city');*/
var url = "https://api.douban.com/v2/movie/top250";
/**
* var data = {
city : city //貌似没有这个参数需要传递，结果都一样。
};*/
var that = this;
wx.request({
url:url,
data:'',//data,
header:{
'content-type':'json'//不要写'aplication/json'，会报400错误。
},
success:function(res){
console.log(res);
that.setData({
topMovies:res.data.subjects
});
that.saveData(res.data.subjects/*,city*/);
}
});
},
toDetail:function(event){
wx.navigateTo({//通过 id 请求详情页面
url: '/pages/detail/detail?id='+event.currentTarget.id,
})
},
saveData:function(res/*,city*/){
wx.setStorage({
key:'topMovies'/*+city*/,
data:res
});
}
})

recommendMovies.json:

{
"navigationBarTitleText": "热门电影推荐"
}

这里的页面布局基本同第一个页面一致，热门推荐的电影 api 接口地址为：https://api.douban.com/v2/movie/top250。

没有city的参数，加上没效果，已试过！可以查看上面的截图框。

要注意的一点时，请求 wx.request 时，header:{ 'conten-type':'json' }不能写成 'application/json' 不然会一直报400错误，应该是版本问题。

详情页面各个文件代码如下：

detail.wxml：

<!--detail.wxml-->
<image src="../../assets/imgs/bg.jpg" mode="scaleToFill" />
<view class="wrapper">
<view class="filmIntro">
<view class="filmPic">
<image src="{{filmDetail.images.medium}}" />
</view>
<view class="filmInfo">
<view class="name">名称：{{filmDetail.title}}</view>
<view class="score">{{filmDetail.rating.average}}分</view>
<view class="type">
类型：<block wx:for="{{filmDetail.genres}}" wx:for-item="type">
{{type}},
</block>
</view>
<view class="director">
导演：<block wx:for="{{filmDetail.directors}}" wx:for-item="director">
{{director.name}},
</block>
</view>
<view class="actor">
演员：<block wx:for="{{filmDetail.casts}}" wx:for-item="cast">
{{cast.name}},
</block>
</view>
<view class="time">年份： {{filmDetail.year}}</view>
</view>
</view>
<view class="descrision">
{{filmDetail.summary}}
<!--<textarea value="{{filmDetail.summary}}" auto-height focus="true" />有一些文字出不来不知为啥所以没用textarea-->
</view>
<view class="bottom">
<view class="title">主要参演人员</view>
<scroll-view scroll-x bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" class="casts">
<view wx:for="{{filmDetail.casts}}" wx:for-item="cast" class="castsItem">
<view class="castImg"><image src="{{cast.avatars.medium}}" /></view>
<view class="castName">{{cast.name}}</view>
</view>
<view wx:for="{{filmDetail.directors}}" wx:for-item="director" class="castsItem">
<view class="castImg"><image src="{{director.avatars.medium}}" /></view>
<view class="castName">{{director.name}}</view>
</view>
</scroll-view>
</view>
</view>

detail.wxss代码如下：

/* detail.wxss */
image{
width:750rpx;
height:350rpx;
}
.wrapper{
padding:0;
margin:0;
width:750rpx;
height:100%;
position: absolute;
left:0;
top:0;
}
.filmIntro{
width:100%;
height:350rpx;
}
.filmPic{
float:left;
width:175rpx;
height:300rpx;
padding:40rpx 15rpx 10rpx 40rpx;
}
.filmPic image{
width:175rpx;
height:240rpx;
border:2rpx solid #fff;
}
.filmInfo{
float:right;
position: relative;
width:507rpx;
left:-11rpx;
top:38rpx;
font-size: 0.8rem;
color:#fff;
}
.name{
float:left;
margin-bottom:10rpx;
font-size: 0.9rem;
}
.score{
position: absolute;
right: -10rpx;
color:aqua;
}
.type{
clear:both;
display: flex;
flex-direction: row;
margin-bottom:6rpx;
}
.director{
display: flex;
flex-direction: row;
margin-bottom:6rpx;
}
.actor{
display: flex;
flex-direction: row;
margin-bottom:6rpx;
}
.descrision{
clear:both;
width:700rpx;
height:346rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 11;
-webkit-box-orient: vertical;
padding:30rpx 30rpx;
font-size: 0.8rem;
color:#aaa;
border-bottom:18rpx solid #ccc;
}
.title{
width:100%;
font-size: 1rem;
padding:10rpx;
border-bottom: 2rpx solid #ccc;
}
.casts{
/*display: flex;
flex-direction: row;*/
width:750rpx;
white-space: nowrap;/*不换行（放在父元素）*/
border-bottom:22rpx solid #ccc;
}

.castsItem{
display: inline-block;/*内联块（放在子元素）*/
padding:26rpx;
text-align: center;/*文字居中*/
}
.castImg>image{
width:180rpx;
height:254rpx;
}

.castName{
font-size: 0.7rem;
color:#0ff;
}
textarea{
width:700rpx;
height:350rpx;
}

detail.js代码如下：

// detail.js
Page({

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

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this, data = null;
var filmId = options.id;
console.log('detail\'s id:' + filmId);//获取在首页点击的电影图片的id
/*
一开始在首页电影数据中获取详情页数据，后来发现并没有简介的文字部分，所以上官网找到了相应的api来获取详情页数据，通过id获取的，方便许多！不需遍历数组了。
var hotMovies = wx.getStorageSync('hotMovies');
console.log(hotMovies.length);
if(hotMovies){
for(var i=0;i<hotMovies.length;i++){
if (hotMovies[i].id == filmId){//遍历电影数据找到符合的就退出。
data = hotMovies[i];
break;
}
}
that.setData({
filmDetail: data
});
}
*/
var name = 'detailInfo' + filmId;
var detailInfo = wx.getStorageSync(name);/**获取本地同步数据 */
console.log(detailInfo);
if (!detailInfo) {
console.log('request');
this.requestDetailInfo(filmId);
}else{
console.log('storage');
this.setData({
filmDetail: detailInfo
});
}
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

requestDetailInfo: function (filmId) {
var that = this;
var url = 'https://api.douban.com/v2/movie/subject/'+filmId;
wx.request({
url: url,
data: '',
header: {
'content-type': 'json',
},
success: function (res) {
console.log('detailInfo\'s summary is:' + res.data.summary);
console.log(res.data);
//return res.data;不起作用，因为是回调函数，异步性。
that.setData({
filmDetail: res.data
});
that.saveData(res.data,filmId);
}
});
},
saveData: function (data,id) {
wx.setStorage({
key: 'detailInfo'+id,
data: data,
})
}
})

布局就基本同上，主要是底部鼠标控制滑动图片使用了组件 scroll-view 组件，这里是横向滑动，所以必须设置固定高度，还有就是要使得多个元素横向排列不换行，使用之前flex布局不起作用，得在 scroll-view 组件上加属性： white-space: nowrap;/*不换行（放在父元素）*/，在其子元素（横向排布的元素）加属性：display: inline-block;/*内联块（放在子元素）*/。具体见代码。

搜索页面各个文件代码如下：

searchMovies.wxml代码如下：

<view class="wrapper">
<view class="search">
<input bindinput="keyword" placeholder="请输入主演名字" />
<button type="default" bindtap="searchMovies" data-keyword="{{keyword}}">搜索</button><!--data-keyword向函数传参keyword-->
</view>
<view class="searchText">您要搜索：{{keyword}}</view>
<view class="horLine"></view>
<view wx:for="{{searchMovies}}" wx:for-item="item">
<view class="content">
<view class="picView">
<image class="pic" src="{{item.images.medium}}" id="{{item.id}}" bindtap="toDetail" />
</view>
<view class="info">
<view class="name">
名称：{{item.title}}
</view>
<view class="score">{{item.rating.average}}分</view>
<view class="type">
类型：
<block wx:for="{{item.genres}}" wx:for-item="type">
{{type}},
<!--注意不要使用<view>，不然调不出效果。。-->
</block>
</view>
<view class="director">
导演：
<block wx:for="{{item.directors}}" wx:for-item="director">
{{director.name}},
</block>
</view>
<view class="actor">
演员：
<block wx:for="{{item.casts}}" wx:for-item="actor">
{{actor.name}},
</block>
</view>
<view class="time">年份： {{item.year}}</view>
</view>
</view>
</view>
</view>

searchMovies.wxss 代码如下：

.wrapper{
padding:0;
margin:0;
width:750rpx;
height:100%;
}
.search{
width:100%;
height:92rpx;
display: flex;
flex-direction: row;
}
input{
height:1rem;
flex-grow: 1; /**剩余空间都给我*/
line-height: 70rpx;
border:2rpx solid #ccc;
margin:20rpx;
border-radius: 10rpx;
font-size: 0.8rem;
}
button{
width:130rpx;
height:50rpx;
line-height: 50rpx;
margin:24rpx 30rpx 0rpx 0rpx;
font-size: 0.8rem;
}
.searchText{
margin-left:20rpx;
font-size: 0.8rem;
padding-bottom:20rpx;
}
.horLine{
width:100%;
border:10rpx solid #ccc;
}

.content{
width:100%;
height:300rpx;
padding:10rx;
display: flex;
flex-direction: row;
border-bottom: 2rpx solid #CCCCCC;
}
.picView{
float:left;
padding:20rpx 15rpx;
}
.pic{
width:210rpx;
height:260rpx;
}
.info{
float:left;
display: flex;
flex-direction: column;
color:#888888;
padding-top:20rpx;
font-size: 30rpx;
}
.name{
color:#000;
width:100%;
font-size: 32rpx;
margin-bottom: -19rpx;
}
.score{
position: relative;
width:80rpx;
float:right;
top:-18rpx;
color:#8C5A0D;
right:-433rpx;
}
.type{
display: flex;
flex-direction: row;
margin-bottom: 10rpx;
}
.director{
display: flex;
flex-direction: row;
margin-bottom: 10rpx;
}
.actor{
margin-bottom: 10rpx;
}

searchMovies.js代码如下：

//searchMovies.js
var util = require('../../utils/util.js')
Page({
data: {

},
onLoad: function () {

},
searchMovies:function(event){
var that = this;
var keyword = event.currentTarget.dataset.keyword;
console.log(keyword);
var url = 'https://api.douban.com/v2/movie/search?q='+keyword;
wx.request({
url:url,
data:'',
header:{
'content-type':'json',
},
success:function(res){
console.log(res);
that.setData({
searchMovies:res.data.subjects
});
}
});
},
keyword:function(event){
var keyword = event.detail.value;/**获取input输入的值并设置到搜索值 */
this.setData({
keyword:keyword
});
},
toDetail:function(event){
console.log(event.currentTarget.id);
wx.navigateTo({
url: '/pages/detail/detail?id='+event.currentTarget.id,
});
}
})

searchMovies.json代码如下：

{
"navigationBarTitleText": "电影搜索"
}

布局基本都跟第一个页面一样，api 接口地址：https://api.douban.com/v2/movie/search?q=人名。





这里只选了一个参数即人物名字来搜索，你可以自己扩展。

好了，详情请自己参阅代码吧。这篇博文写了好久啊啊。。

尴尬死了，中午写到两点多要发布博文时居然把我博客关闭了，后来联系之后解决之后又被锁了，最后csdn负责人叫我改标题，果然解决！！！感谢！终于解决了，可以发布了！