版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CNZSWYMP/article/details/78676642 </div>
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
<div class="htmledit_views" id="content_views">
<p>开发环境为微信web开发者工具，实现的功能是可以在首页查看豆瓣电影评分前250名并且可以点击跳转到详情页，在搜索页输入关键字搜索相关电影。效果图如下</p>
代码
-
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
-
});
-
}
-
});
-
}
-
-
})
扫一扫
2776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
