微信小程序--搜索电影app（续）
热门推荐页面各个文件代码如下：
recommendMovies.json:
这里的页面布局基本同第一个页面一致，热门推荐的电影 api 接口地址为：https://api.douban.com/v2/movie/top250。
detail.wxss代码如下：
searchMovies.wxss 代码如下：
布局基本都跟第一个页面一样，api 接口地址：https://api.douban.com/v2/movie/search?q=人名。
recommendMovies.wxml：
名称：{{item.title}}
{{item.rating.average}}分
类型：
{{type}},
导演：
{{director.name}},
演员：
{{actor.name}},
年份： {{item.year}}
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：
名称：{{filmDetail.title}}
{{filmDetail.rating.average}}分
类型：
{{type}},
导演：
{{director.name}},
演员：
{{cast.name}},
年份： {{filmDetail.year}}
{{filmDetail.summary}}
主要参演人员
{{cast.name}}
{{director.name}}
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布局就基本同上，主要是底部鼠标控制滑动图片使用了组件 scroll-view 组件，这里是横向滑动，所以必须设置固定高度，还有就是要使得多个元素横向排列不换行，使用之前flex布局不起作用，得在 scroll-view 组件上加属性： white-space: nowrap;/*不换行（放在父元素）*/，在其子元素（横向排布的元素）加属性：display: inline-block;/*内联块（放在子元素）*/。具体见代码。
搜索页面各个文件代码如下：
searchMovies.wxml代码如下：
您要搜索：{{keyword}}
名称：{{item.title}}
{{item.rating.average}}分
类型：
{{type}},
导演：
{{director.name}},
演员：
{{actor.name}},
年份： {{item.year}}
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负责人叫我改标题，果然解决！！！感谢！终于解决了，可以发布了！