版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CNZSWYMP/article/details/78676642
开发环境为微信web开发者工具,实现的功能是可以在首页查看豆瓣电影评分前250名并且可以点击跳转到详情页,在搜索页输入关键字搜索相关电影。效果图如下
代码
app.json
{
"pages":[
"pages/index/index",
"pages/movie/movie",
"pages/search/search",
"pages/profile/profile"
],
"window":{
"navigationBarBackgroundColor": "#35495e",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "豆瓣电影",
"backgroundColor": "#fff",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true
},
"tabBar":{
"list":[
{
"text":"推荐电影",
"iconPath":"images/board.png",
"selectedIconPath":"images/board-actived.png",
"pagePath":"pages/index/index"
},
{
"text":"发现电影",
"iconPath":"images/search.png",
"selectedIconPath":"images/search_black.png",
"pagePath":"pages/search/search"
},
{
"text":"我的电影",
"iconPath":"images/profile.png",
"selectedIconPath":"images/profile-actived.png",
"pagePath":"pages/profile/profile"
}
]
}
}
app.wxss
page{
font-family: "Microsoft YaHei";
background-color: #fff;
display: flex;
/*纵向排列*/
flex-direction: column;
}
.page-header{
display: flex;
/*横向居中对齐*/
justify-content: center;
border-bottom: 2rpx solid #ccc;
margin-bottom: 10rpx;
}
.page-header-text{
padding: 20rpx 40rpx;
color: #999;
font-size: 40rpx;
text-align: center;
}
.page-body{
display: flex;
flex: 1;
flex-direction: column;
}
.item{
display: flex;
padding: 20rpx 40rpx;
border-bottom: 2rpx solid #eee;
}
.poster{
width: 130rpx;
height: 160rpx;
margin-right: 20rpx;
}
.meta{
flex:1;
}
.item.title,.item.sub-title{
display: block;
margin-bottom: 14rpx;
}
.title{
font-size: 35rpx;
}
.sub-title{
font-size: 25rpx;
color:#c0c0c0;
}
.artists{
font-size: 26rpx;
color: #999;
}
.rating{
font-size: 28rpx;
font-weight: bold;
color: red;
}
index.wxml
<view class="page-header">
<text class="page-header-text">{{title}}</text>
</view>
<scroll-view class="page-body" scorll-y="true">
<navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
<view class="item">
<image class="poster"src="{{item.images.small}}"></image>
<view class="meta">
<text class="title">{{item.title}}</text>
<text class="sub-title">
{{item.original_title}} ({{item.year}})</text>
<text class="artists">
<text wx:for="{{item.directors}}">
{{item.name}}
</text>
</text>
</view>
<view class="rating">
<text>{{item.rating.average}}</text>
</view>
</view>
</navigator>
</scroll-view>
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
index.js
var API_URL ='https://api.douban.com/v2/movie/top250'
Page({
data: {
title:"加载中...",
movies:[]
} ,
onLoad:function(){
var that =this;
wx.showToast({
title:"加载中...",
icon:"loading",
duration:10000
});
//发出的请求必须是HTTPS的
wx.request({
url: API_URL,
data:{},
header:{
//进行网络数据请求出现400 是因为请求header的Content-type变了
'content-type': 'json'
},
success:function(res){
//隐藏消息提示框
wx.hideToast();
var data = res.data;
console.log(data);
that.setData({
title:data.title,
movies:data.subjects
});
}
});
}
})
movie.wxml
<scroll-view scroll-y="true">
<view class="meta">
<image class="poster" src="{{movie.images.large}}" background-size="cover"></image>
<text class="title">{{movie.title}}({{movie.year}})</text>
<text class="info">评分:{{movie.rating.average}}</text>
<text class="info">导演:<block wx:for="{{movie.directors}}">{{item.name}}</block></text>
<text class="info">主演:<block wx:for="{{movie.casts}}">{{item.name}}</block></text>
</view>
<view class="summary">
<text class="label">摘要:</text>
<text class="content">{{movie.summary}}</text>
</view>
</scroll-view>
movie.wxss
.meta{
display: flex;
flex-direction: column;
align-items: center;
height: 1000rpx;
padding: 50rpx 40rpx;
}
.poster{
width: 80%;
height: 80%;
margin: 20rpx;
}
.title{
font-style: 42prx;
color: #444;
}
.info{
font-size: 18rpx;
color: #888;
margin-top: 20rpx;
width: 80%;
}
.summary{
width: 80%;
margin: 30rpx auto;
}
.label{
display: block;
}
.content{
color: #666;
font-size: 20rpx;
padding: 10rpx;
}
movie.js
var API_URL = 'https://api.douban.com/v2/movie/subject/'
Page({
data: {
movie:{}
},
onLoad: function (params) {
// console.log(params);
var that = this;
wx.request({
url: API_URL+params.id,
data: {},
header: {
'content-type': 'json' // 默认值
},
success: function (res) {
// console.log(res.data)
that.setData({
movie:res.data
});
}
})
},
})
profile.wxml
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
</view>
<view class="infohead">电影</view>
<view class="infolist" wx:for="{{infoList}}">
<view class="infoitem">{{item.text}}</view>
</view>
<view class="infohead">其他</view>
<view bindtap="bindViewTap" class="infolist" wx:for="{{other}}">
<view class="infoitem">{{item.text}}</view>
</view>
</view>
profile.wxss
.container {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 10px;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
font-size: 6px;
}
.infohead{
font-size: 16px;
border-bottom: 1px solid #dadada;
padding-top: 30px;
padding-bottom: 15px;
}
.infoitem{
position: relative;
padding: 15px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #dadada;
}
profile.js
var app =getApp()
Page({
data: {
text:"Page profiles",
infoList:[
{
text:"我的电影票"
},
{
text:"我的兑奖券"
},
{
text:"我的优惠券"
},
{
text:"想看、看过的电影"
}
],
other:[
{
text:"点这里寻找你喜欢的电影哦"
},
{
text:"猜你喜欢的电影"
}
],
userInfo:{}
},
onLoad: function (options) {
var that =this;
app.getUserInfo(function(userInfo){
that.setData({
userInfo:userInfo
})
});
console.log(that.data.userInfo)
},
bindViewTap:function(e){
var film =e.currentTarget;
wx.navigateTo({
url: '../../search/search'
})
}
})
search.wxml
<view class="page-header">
<input class="page-header-text" placeholder="输入搜索关键词" auto-focus
bindchange="search"/>
</view>
<scroll-view class="page-body" scorll-y="true">
<navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
<view class="item">
<image class="poster"src="{{item.images.small}}"></image>
<view class="meta">
<text class="title">{{item.title}}</text>
<text class="sub-title">
{{item.original_title}} ({{item.year}})</text>
<text class="artists">
<text wx:for="{{item.directors}}">
{{item.name}}
</text>
</text>
</view>
<view class="rating">
<text>{{item.rating.average}}</text>
</view>
</view>
</navigator>
</scroll-view>
search.js
var API_URL = 'https://api.douban.com/v2/movie/search';
Page({
data: {
movies:[]
},
//编译时此处有错 注意e!
search:function(e){
if(!e.detail.value){
return;
}
wx.showToast({
title: "加载中...",
icon:"loading",
duration:10000
});
var that =this;
wx.request({
url: API_URL+"?q="+e.detail.value,
data:{},
header: {
'content-type': 'json' // 默认值
},
success:function(res){
// console.log(res.data);
wx.hideToast();
that.setData({
movies:res.data.subjects
});
}
});
}
})