微信小程序《豆瓣》

微信小程序《豆瓣》

静态页面
素材下载地址

app.json

{"pages": ["pages/home/home","pages/rank/rank","pages/about/about"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#42bd56","navigationBarTitleText": "豆瓣","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "imgs/home.png","selectedIconPath": "imgs/home-selected.png"},{"pagePath": "pages/rank/rank","text": "榜单","iconPath": "imgs/rank.png","selectedIconPath": "imgs/rank-selected.png"},{"pagePath": "pages/about/about","text": "关于","iconPath": "imgs/about.png","selectedIconPath": "imgs/about-selected.png"}]
}

home.wxml

<view class="film"><view class="film-search"><view bindtap="goSearch" class="search-box"><icon size="16" type="search"></icon><view>搜索</view></view></view><!--影院热映--><view class="module-group"><view class="module-title"><image class="img" src="/imgs/movie .png"></image><view class="titlename">影院热映</view><navigator class="more">查看更多</navigator></view><scroll-view class="scroll-view" scroll-x="{true}}"><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">涉过愤怒的海</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">7.6</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">我本是高山</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">7.8</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">热搜</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">7.6</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">傍晚向日葵</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">7.9</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">刀尖</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">6.2</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">惊奇队长2 The Marvels</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">5.4</text></view></navigator></scroll-view></view><!--热门电影--><view class="module-group"><view class="module-title"><image class="img" src="/imgs/movie .png"></image><view class="titlename">热门电影</view><navigator class="more">查看更多</navigator></view><scroll-view class="scroll-view" scroll-x="{true}}"><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">杀手</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">6.6</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">蜥蜴伯伯里奥 Leo</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">7.6</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">老水仙 老ナルキソス</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">7.0</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">AI创世者 The Creator</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">6.1</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">第八个嫌疑人</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">6.1</text></view></navigator><navigator class=" item-scrollview "><view class="item-group "><view class="thumbnail-group "><image class="thumbnail " src=".webp"></image></view><view class="movie-name ">鹦鹉杀</view><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-open.png"></image><image class="star" src="/imgs/star-close.png"></image><image class="star" src="/imgs/star-close.png"></image><text class="score">5.5</text></view></navigator></scroll-view></view></view>

home.wxss

.film {width: 100%;background-color: #efefef;
}.film-search {height: 100rpx;background: #42bd56;padding: 0 20rpx;display: flex;align-items: center;
}.search-box {background: white;width: 100%;height: 60rpx;border-radius: 8rpx;display: flex;justify-content: center;align-items: center;
}.search-box icon {margin-right: 10rpx;
}.search-box view {font-size: 26rpx;color: #999;
}.module-group {padding: 40rpx;background: #fff;
}.module-group .module-title {font-size: 32rpx;display: flex;justify-content: space-between;
}.module-title .titlename {color: #494949;text-align: left;transform: translate(-150%);
}.module-title .more {color: #42bd56;
}.scroll-view {margin-top: 40rpx;width: 100%;height: 400rpx;white-space: nowrap;
}.scroll-view .item-scrollview {width: 200rpx;margin-right: 20rpx;display: inline-block;
}.scroll-view .item-scrollview:last-of-type {margin-right: 0;
}.item-scrollview .item-group {width: 100%;
}.item-group .thumbnail-group {width: 100%;height: 284rpx;
}.thumbnail-group .thumbnail {width: 100%;height: 100%;
}.item-group .movie-name {font-size: 28rpx;text-align: center;margin-top: 20rpx;text-overflow: ellipsis;overflow: hidden;
}.module-title .img {width: 45rpx;height: 45rpx;
}.item-group .star {width: 30rpx;height: 30rpx;
}.item-group .score {font-size: 25rpx;
}

rank.wxml

<view class="rank"><image class="card" src="/imgs/rank1.png"></image><image class="card" src="/imgs/rank2.png"></image><flim-rank wx:for="{{5}}" wx:key="index"></flim-rank>
</view>

rank.wxss

.rank {width: 100%;padding: 30rpx;box-sizing: border-box;
}.card {width: 100%;height: 320rpx;margin-bottom: 30rpx;
}

about.wxml

<view class="about"><view class="userinfo"><image class="user-img" src="{{userInfo.avatarUrl||'/imgs/user.png'}}"></image><view class="user-nickname" wx:if="{{userInfo}}">{{userInfo.nickName}}</view><button bindgetuserinfo="getUserInfo" class="login" openType="getUserInfo" wx:else>点击授权登陆</button></view><view class="favorite"><view class="favorite-title">我的收藏</view><view class="favorite-list"><view class="favorite-item" wx:for="{{favorites}}" wx:key="index"><film-item film="{{item}}"></film-item><button plain bindtap="deleteFavorite" class="delete" data-id="{{index}}" size="mini" type="warn">删除</button></view></view><view class="favorite-info" wx:if="{{!userInfo}}">请先登陆后查看</view><view class="favorite-info" wx:if="{{userInfo&&showNoFavorite}}">～～暂无收藏～～</view></view>
</view>

about.wxss

.about {width: 100%;
}.userinfo {text-align: center;height: 400rpx;background-image: linear-gradient(to bottom, #42bd56, #84ca90);
}.userinfo .user-img {width: 200rpx;height: 200rpx;border-radius: 50%;margin: 30rpx 0;
}.userinfo .user-nickname {color: #fff;font-weight: bold;
}.userinfo .login {color: #333;border-radius: 50rpx;
}.favorite {background-color: white;
}.favorite-title {font-size: 30rpx;color: #333;padding: 26rpx;
}.favorite-list {width: 100%;padding: 0 12rpx;box-sizing: border-box;
}.favorite-item {display: inline-block;width: 33.33%;padding: 0 12rpx;box-sizing: border-box;margin-bottom: 20rpx;
}.favorite-item .delete {display: block;font-size: 20rpx;
}.favorite-info {text-align: center;font-size: 28rpx;color: #999;margin-top: 50rpx;
}

豆瓣电影：豆瓣电影

涉过愤怒的海：.webp
热搜：.webp
沉默笔录：.webp
拿破仑 Napoleon：.webp
我本是高山：.webp
长安诡事传：.webp
傍晚向日葵：.webp
刀尖：.webp
饥饿游戏：.webp
星愿 Wish：.webp
红猪 紅の豚：.webp
无价之宝：.webp