微信小程序《豆瓣》

坏男孩！

已于 2023-12-04 13:44:01 修改

阅读量471

点赞数 4

文章标签：微信小程序小程序

于 2023-12-01 20:44:41 首次发布

本文链接：https://blog.csdn.net/zj2365854788/article/details/134743362

版权

静态页面
素材下载地址
在这里插入图片描述

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="https://img1.doubanio.com/view/photo/l/public/p2899575447.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="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900810360.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="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900809869.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="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2900523041.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="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2899757820.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="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2898638736.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="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2897454450.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="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2901353656.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="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2892725653.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="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2897168300.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="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2897543922.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="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2897518505.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;
}

豆瓣电影：豆瓣电影

涉过愤怒的海：https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900852349.webp
热搜：https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2901336439.webp
沉默笔录：https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2900809466.webp
拿破仑 Napoleon：https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2901235578.webp
我本是高山：https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900810360.webp
长安诡事传：https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2900210510.webp
傍晚向日葵：https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2900523041.webp
刀尖：https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2899757820.webp
饥饿游戏：https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2900895923.webp
星愿 Wish：https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2899834949.webp
红猪紅の豚：https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2899263477.webp
无价之宝：https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2900172884.webp