微信小程序“豆瓣电影”
代码
-
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
-
});
-
}
-
});
-
}
-
-
})