开发环境为微信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;
b