微信小程序起步

受友人之托，有幸了解了一下微信小程序开发。

选择B站首页作为起始点，进行微信小程序开发，主要以补充页面为主。

微信小程序注册

image-20241219164324791

微信小程序开发者工具安装

安装过程：

image-20241219164816647

登陆后如下:

image-20241219165020890

实验入门级云开发小程序

image-20241219170230256

初始界面

image-20241223233231540
image-20241223233246543

魔改界面介绍

妙评界面介绍

image-20241223233445206

在header.wxml中加入跳转代码，通过这段代码，导航栏新增了一个“妙评”选项。用户点击它后，会跳转到 /pages/awesome-comments/awesome-comments 页面，展示妙评内容。

1
2
3
<view class="li nav-item">
    <navigator url="/pages/awesome-comments/awesome-comments" class="a">妙评</navigator> <!-- 修改为妙评 -->
</view>

妙评页面的整体设计包括：

  • 页面头部展示“妙评精选”标题。
  • 评论列表按顺序展示评论，每条评论包括评论者、评论文本、来源信息。
  • 来源信息前加入一个小的链接符号，并且来源文本变为蓝色，以便突出显示。

代码实现

页面结构与布局

awesome-comments.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<view class="awesome-comments-container">
  <view class="header">
    <text class="header-title">妙评精选</text>
  </view>

  <!-- 评论列表 -->
  <view class="comments-list">
    <block wx:for="{{comments}}" wx:key="index">
      <view class="comment-item">
        <view class="comment-header">
          <text class="comment-user">@{{item.username}}</text>
        </view>
        <text class="comment-text">{{item.comment}}</text>
        <view class="comment-source">
          <text class="source-title">来源：</text>
          <text class="source-info">{{item.source}}</text>
        </view>
      </view>
    </block>
  </view>
</view>

awesome-comments.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/* 页面容器 */
.awesome-comments-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 20px;
}

/* 页头样式 */
.header {
  padding: 15px;
  background-color: #00A1D6; /* 哔哩哔哩蓝色 */
  text-align: center;
  border-radius: 10px;
}

.header-title {
  font-size: 20px;
  color: white;
  font-weight: bold;
}

/* 评论列表 */
.comments-list {
  margin-top: 20px;
}

/* 单条评论卡片 */
.comment-item {
  background-color: #f8f8f8;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 评论头部 */
.comment-header {
  margin-bottom: 10px;
}

.comment-user {
  font-size: 16px;
  font-weight: bold;
  color: #00A1D6; /* 哔哩哔哩蓝色 */
}

/* 评论内容 */
.comment-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* 来源信息 */
.comment-source {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.source-title {
  font-size: 12px;
  color: #999;
  margin-right: 5px;
}

.source-info {
  font-size: 12px;
  color: #00A1D6; /* 将来源信息字体变为蓝色 */
}

/* 小链接符号 */
.source-info::before {
  content: "→"; /* 小链接符号 */
  font-size: 14px;
  margin-right: 5px;
  color: #00A1D6; /* 小链接符号为蓝色 */ 
}

awesome-comments.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
Page({
  data: {
    comments: [
      {
        username: "啼血",
        comment: "镜子里的是你，影子里的是她。",
        source: "谁懂漫展结束后的这一瞬间.."
      },
      {
        username: "卿若染",
        comment: "斑驳的墙面，让人意识到生锈的还有时间。",
        source: "2df6b682d2a0aa0b89a4855ec3880a40/668302b7"
      },
      {
        username: "承秋传玉",
        comment: "我做了一场梦，名叫童年的人溘然长逝，醒来的是失去灵魂的皮囊。",
        source: "这张MC海岛壁纸的含金量，可能只有老玩家才懂吧"
      },
      {
        username: "哺乳类好少年",
        comment: "满天云霞是他的披风，万家灯火是他的礼赞。",
        source: "别害怕别害怕，有我在的地方，永远开满了鲜花~"
      },
      {
        username: "南再纪",
        comment: "树木感觉自己快要死了，会在最后一个季节保持常青，哪怕季节不对。这是最后的盛开，绝望中带着癫狂。",
        source: "晚 唐 颓 靡·盛 开 的 黑 牡 丹"
      },
      {
        username: "青椒爆炒小米辣",
        comment: "感觉像两个游魂。反反复复做着生前做过的事。不知自己已经逝去千年。",
        source: "晚 唐 颓 靡·盛 开 的 黑 牡 丹"
      },
      {
        username: "紫薇苑花",
        comment: "有人唱男欢女爱，唱柴米油盐，唱自己身上的故事，没什么不好，但不是只有表达生活的愤怒与琐碎、爱情的苦闷与悲伤才是真情怀，你得容许这世上还有为数不多的歌手，能唱星辰宇宙、高山瀚海、人间幻世、神魔苍生，还有锋利的刀、沸腾的血、冶艳的花、灼烈的火、微凉的风和月色，给尘埃里的我们。",
        source: "华晨宇看日出演唱会15分钟《向阳而生》（日出live版）"
      },
      {
        username: "月相IMO",
        comment: "世界的尽头处，他轻轻转动手中破损的八音盒的发条，所幸八音盒并没有坏的太彻底，音乐断断续续的响起，他的记忆被拉回童年，没有实验，没有痛苦，有的只有山林里面的与之陪伴的鸟雀与狼虎，只有在这一刻，才能回想起最初，他从来并不想要做什么魔王，他只想安安静静的呆在树林中，与山雀为伴，与自然为友，人性的贪婪毁灭了它，他们却大言不惭的说着，想要剿灭魔王，还世界和平，可他又做过什么伤天害理之事呢？他们只不过是为自己的行为找了一块遮羞布而已",
        source: "小时候不懂为什么反派会被一个八音盒控住... | 羽根 (鸟之诗)『Hi-Res』"
      },
      {
        username: "丨醉夜梦雨丨",
        comment: "这首歌用我们的话来说：若浮萍游子，漂泊无根。既不曾知道自己的过去，也展望不了未来的故事。既没有阿基维利那种可以忍受“未知”，却绝不能屈服于“不可知” 的精神，也并没有做好被卷入这场莫名其妙的纷争的打算。黑塔空间站因这次事件死了很多人，可一切都来的那么巧合像极了剧本游戏。在没有准备好的时候，突如其来的抉择下，我做了上车这么一个草率的决定。这种茫然不知所措的感觉，在听见这首歌以后让我的眼眶不禁泛红泪水打转。",
        source: "【崩坏星穹铁道｜踏上旅途】百万级录音棚听《踏上旅途》列车BGM 踏上星穹旅途【Hi-Res】"
      },
      {
        username: "橘子郡的胖大星",
        comment: "这首歌的节奏就很像，那群人在我前面，挡下硝烟四起，挡下炮火连天，挡下虚伪欺骗，挡下黑暗阴霾。我看着他的背影，伤痕累累却坚定如山，我想为他擦去伤痕，他却只是抬手抹去额间的血汗，继续向前。我有时会恐惧，有时会怀疑，有时会动摇，有时会失望，我轻轻拍拍他的肩问他，你会一直在吗？他转过头看着我，面容苍劲眼神坚毅，最伟岸的身躯说出最温柔的话：会啊，我一直都在然后彼此给彼此一个最清朗的微笑，他背后升起一片光明。",
        source: "【周深x我的答案】这一次，是你绝对想不到的跨界联动！"
      },
      {
        username: "怵

妉",
        comment: "我独自漫步在空无一人的街道上，睡意朦胧的夕阳正一点点隐没在天际，火烧云与晚霞构成一幅画，如我的心事苍茫如暮",
        source: "《自由の小曲》《落日の小曲》《抑郁の小曲》《后朋克の小曲》I walk this earth all by myself-EKKSTACY"
      }
    ]
  }
});

排行榜界面

image-20241223234203311

在header.wxml中加入跳转代码，通过这段代码，导航栏新增了一个“排行榜”选项。用户点击它后，会跳转到 / "pages/ranking/ranking" 页面，展示排行榜内容。

1
2
3
<view class="li nav-item">
    <navigator url="/pages/ranking/ranking" class="a">排行</navigator> <!-- 跳转到排行榜 -->
</view>

排行榜页面设计与实现

本页面旨在创建一个展示视频排行榜的页面，用户可以在此页面查看视频的排名、封面图、标题、时长和Up主信息。页面的整体设计如下：

  • 页面顶部展示“排行榜”标题。
  • 排行榜列表按顺序展示视频信息，包括视频封面、标题、时长、Up主。
  • 视频封面图以 100px 的大小展示，视频信息（如标题、时长、Up主）采用简洁的排版方式展示。

代码实现

页面结构与布局

ranking.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<view class="ranking-wrapper">
  <!-- 排行榜标题 -->
  <view class="ranking-header">
    <text class="ranking-title">排行榜</text>
  </view>

  <!-- 排行榜内容 -->
  <view class="ranking-list">
    <!-- 排行视频项 -->
    <block wx:for="{{rankingList}}" wx:key="rank">
      <view class="ranking-item">
        <view class="rank-container">
          <text class="rank">{{item.rank}}.</text>
        </view>
        <image src="{{item.coverImg}}" class="ranking-cover" />
        <view class="ranking-info">
          <text class="video-title">{{item.title}}</text>
          <view class="video-details">
            <text class="video-duration">时长：{{item.duration}}</text>
            <text class="video-up">Up主：{{item.up}}</text>
          </view>
        </view>
      </view>
    </block>
  </view> 
</view>

ranking.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* 排行榜 Wrapper */
.ranking-wrapper {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 排行榜标题 */
.ranking-header {
  margin-bottom: 20px;
  text-align: center;
}

.ranking-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 排行榜内容 */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 排行视频项 */
.ranking-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 排名数字 */
.rank-container {
  width: 30px;
  height: 30px;
  background-color: transparent;
  border: 1px solid #ccc;  /* 使用边框代替背景色 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;  /* 深色字体，避免太亮 */
  font-size: 16px;
  font-weight: bold;
  margin-right: 15px;
}

/* 视频封面图片 */
.ranking-cover {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 15px;
}

/* 视频信息 */
.ranking-info {
  flex: 1;
}

/* 视频标题 */
.video-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

/* 视频时长和Up主 */
.video-details {
  font-size: 14px;
  color: #888;
}

.video-duration, .video-up {
  margin-right: 10px;
}

ranking.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Page({
  data: {
    rankingList: [
      {
        rank: 1,
        coverImg: "https://bkimg.cdn.bcebos.com/pic/5ab5c9ea15ce36d3d539b65d7aaa2d87e950352a1b1f?x-bce-process=image/format,f_auto/resize,m_lfit,limit_1,h_696",  // 视频封面
        title: "无法用言语形容 百听不厌的经典 伍佰《泪桥》",  // 视频标题
        duration: "5:30",  // 时长
        up: "经典片段吧"  // Up主
      },
      {
        rank: 2,
        coverImg: "https://i0.hdslb.com/bfs/article/dc8f21f90112936a391bc99af0225cf32b7b0dfa.png@510w_504h.avif",  // 视频封面
        title: "【4K修复】陶喆《寂寞的季节》迄今为止最好听的一版",  // 视频标题
        duration: "6:00",  // 时长
        up: "The3heep"  // Up主
      },
      {
        rank: 3,
        coverImg: "https://th.bing.com/th?id=OIP.cIUl-0T6PNKHzuIeoKhE8QHaGi&w=298&h=263&c=10&rs=1&qlt=99&bgcl=fffffe&r=0&o=6&pid=23.1",  // 视频封面
        title: "【4K修复】张学友-《她来听我的演唱会》",  // 视频标题
        duration: "4:50",  // 时长
        up: "时光集市"  // Up主
      },
      {
        rank: 4,
        coverImg: "https://bkimg.cdn.bcebos.com/pic/2cf5e0fe9925bc315c60096a1a869ab1cb134854dab2?x-bce-process=image/format,f_auto/resize,m_lfit,limit_1,h_461",  // 视频封面
        title: "【4K修复】《我们的歌》-王力宏 当年二哥给我的第一印象尽然是【和蔼】！！！！！！！",  // 视频标题
        duration: "4:31",  // 时长
        up: "时光集市"  // Up主
      },
      {
        rank: 5,
        coverImg: "https://i1.hdslb.com/bfs/article/ce1f34ce4747533e73437b937adf0caa286431045.jpg@1192w.avif",  // 视频封面
        title: "“当你死后，时间开始流淌！”—𝙁𝙧𝙞𝙚𝙧𝙚𝙣/葬送的芙莉莲",  // 视频标题
        duration: "3:28",  // 时长
        up: "在下南巷哟"  // Up主
      }
    ]
  }
})

直播界面介绍

image-20241223234844166
image-20241223234851751

直播内容页面设计与实现

目标是设计并实现一个直播内容展示页面。该页面展示了以下几项主要功能：

  • 顶部导航栏：用户可以快速查看和切换“我关注的主播”和“热门直播”。
  • 分类标签：展示不同的直播分类，用户可以通过横向滚动浏览不同的分类标签。
  • 直播内容展示：展示直播内容，包括直播封面、标题、分类和观看人数等信息。

代码实现

页面结构与布局

live.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<view class="main-container">
  <!-- 顶部导航栏 -->
  <view class="nav-bar">
    <text class="nav-text">我关注的主播</text>
    <text class="nav-text">热门直播</text>
  </view>

  <!-- 分类标签 -->
  <scroll-view class="category-scroll" scroll-x="true">
    <view class="category-container">
      <text class="category-text">全部</text>
      <text class="category-text">网游</text>
      <text class="category-text">手游</text>
      <text class="category-text">单机游戏</text>
      <text class="category-text">娱乐</text>
      <text class="category-text">电台</text>
      <text class="category-text">虚拟主播</text>
      <text class="category-text">聊天</text>
      <text class="category-text">生活</text>
      <text class="category-text">知识</text>
      <text class="category-text">赛事</text>
      <text class="category-text">学习</text>
      <text class="category-text">互动玩法</text>
      <text class="category-text">购物</text>
      <text class="category-text">影视</text>
      <text class="category-text">教育</text>
    </view>
  </scroll-view>

  <!-- 直播内容区域 -->
  <view class="live-content">
    <view class="live-item" wx:for="{{liveList}}" wx:key="index">
      <image class="live-thumbnail" src="{{item.thumbnail}}" alt="直播封面"></image>
      <text class="live-title">{{item.title}}</text>
      <text class="live-category">{{item.category}}</text>
      <text class="live-viewer">{{item.viewerCount}} 观看</text>
    </view>
  </view>
</view>

live.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* 页面容器 */
.main-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff; /* 背景改为白色 */
  color: #333; /* 内容字体颜色改为深灰色 */
  padding: 10px;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #2E2E2E; /* 改为深灰色，更符合现代感且避免黑色 */
}

.nav-text {
  font-size: 16px;
  color: #ffffff; /* 文字保持白色 */
}

/* 分类标签 */
.category-scroll {
  white-space: nowrap;
  padding: 10px;
}

.category-container {
  display: inline-block;
  margin-right: 10px;
}

.category-text {
  font-size: 14px;
  background-color: #00A1D6; /* 哔哩哔哩蓝色 */
  padding: 5px 10px;
  border-radius: 5px;
  color: white; /* 文字保持白色 */
  margin-right: 10px;
  cursor: pointer;
}

/* 直播内容 */
.live-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}

/* 每个直播项 */
.live-item {
  width: 300px;
  margin: 10px;
  background-color: #F0F0F0; /* 使用浅灰色背景，避免黑色的沉重感 */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果较轻，避免黑色沉重感 */
}

/* 直播封面 */
.live-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

/* 直播标题 */
.live-title {
  font-size: 16px;
  padding: 5px;
  text-align: center;
  color: #333; /* 标题文字改为深灰色，保持现代感 */
}

/* 直播分类 */
.live-category {
  font-size: 14px;
  color: #888888; /* 浅灰色，更加柔和 */
  padding: 5px;
  text-align: center;
}

/* 观看人数 */
.live-viewer {
  font-size: 14px;
  color: #00A1D6; /* 哔哩哔哩蓝色突出显示观看人数 */
  padding: 5px;
  text-align: center;
}

live.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Page({
  data: {
    // 模拟直播数据
    liveList: [
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/79a993caf77e41908881a5b0e6099ffe690307e6.png@1192w.avif",
        title: "LeetCode刷题以及复盘",
        category: "学习",
        viewerCount: "1885"
      },
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/8d41937e6cec8bd44ac239d98663dd2a71982462.jpg@1192w.avif",
        title: "一字码直播中...",
        category: "健身",
        viewerCount: "846"
      },
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/105bd41d9420cd35c6e51dfdcb59fd7ab9a05ca9.jpg@1192w.avif",
        title: "聊聊面试结果和算法",
        category: "知识",
        viewerCount: "98"
      },
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/346fd66e987e2bd32adc6d6d343c7b02c57bbce9.jpg@1192w.avif",
        title: "和之国罗排位，传说滴滴",
        category: "游戏",
        viewerCount: "4986"
      },
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/89b145a724cd9a6557066f9263566ec51cc4e72c.jpg@1192w.avif",
        title: "黑马程序员：Python从零到入门",
        category: "编程",
        viewerCount: "2100"
      },
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/35cd29f0fcfc94205d50058454ddb99384fd46ca.png@1192w.avif",
        title: "虚拟主播直播",
        category: "虚拟主播",
        viewerCount: "1200"
      },
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/548abf51091717719bb339a2d6991d1f07dd81d3.jpg@1192w.avif",
        title: "电竞赛事实况",
        category: "赛事",
        viewerCount: "4000"
      },
      {
        thumbnail: "https://i1.hdslb.com/bfs/article/4ff3e9150184716f437ebee350ab55a308aec72a.jpg@1192w.avif",
        title: "唱见直播间",
        category: "娱乐",
        viewerCount: "3500"
      }
    ]
  },

  onLoad: function() {
    // 可以在此处进行页面加载时的网络请求等操作
  }
});

番剧界面

image-20241223235546461
image-20241223235555422

在index.wxml中加入这一段代码，即可跳转到番剧列表页面。

1
2
3
4
5
<navigator class="header" url="/pages/bangumi/bangumi">
  <view class="left">
    <view class="bilibili-index-sprite bilibili-index-bangumi"></view>
    <text>番剧更新</text>
  </view>

番剧列表页面设计与实现

旨在创建一个番剧列表页面，展示一系列的番剧信息。每个番剧项展示了以下内容：

  • 番剧封面：每个番剧都有一个封面图，帮助用户快速识别。
  • 番剧标题：显示番剧的名称。
  • 更新信息：显示番剧的更新进度，如“更新至第X话”。
  • 底部版权信息：页面底部包含版权信息。

代码实现

页面结构与布局

bangumi.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view class="bangumi-wrapper">
  <!-- 顶部导航 -->
  <include src="../public/bheader.wxml"/>

  <!-- 番剧列表 -->
  <view class="bangumi-list">
    <block wx:for="{{bangumiList}}" wx:key="avid">
      <view class="bangumi-item">
        <image src="{{item.coverImg}}" class="cover-image"/>
        <view class="bangumi-info">
          <text class="bangumi-title">{{item.bangumiTitle}}</text>
          <text class="bangumi-page">{{item.bangumiPage}}</text>
        </view>
      </view>
    </block>
  </view>

  <!-- 底部版权 -->
  <include src="../public/footer.wxml"/>
</view>

bheader.wxml

1
2
3
4
5
6
7
8
9
<!-- bheader.wxml -->
<view class="header">
  <!-- 返回按钮，跳转到主页 -->

  
  <!-- 标题 -->
  <text class="header-title">番剧列表</text>
</view>

bangumi.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@import "../public/bheader.wxss";

.bangumi-wrapper {
  padding: 20px;
}

/* 每个番剧项 */
.bangumi-item {
  display: flex;
  margin-bottom: 20px;
}

/* 番剧封面图 */
.cover-image {
  width: 100px;
  height: 100px;
  margin-right: 15px;
}

/* 番剧信息容器 */
.bangumi-info {
  flex: 1;
}

/* 番剧标题 */
.bangumi-title {
  font-size: 16px;
  font-weight: bold;
}

/* 番剧更新信息 */
.bangumi-page {
  font-size: 14px;
  color: #888;
}

bheader.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* bheader.wxss */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ff1e69, #00bfff); /* 渐变色背景 */
  padding: 10px 20px;
  color: white;
  position: relative;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  border-bottom-left-radius: 15px; /* 圆角效果 */
  border-bottom-right-radius: 15px;
}

.back-text {
  font-size: 18px;
  color: white;
}

.header-title {
  font-size: 22px;
  font-weight: bold;
  color: white;
  text-align: center;
  flex-grow: 1; /* 使标题居中 */
}


bangumi.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
Page({
  data: {
    // 番剧数据列表
    bangumiList: [
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/4d06e660b8da9cb5335552f4ebde89bbcb2e9d4f.jpg',
        bangumiTitle: '双星之阴阳师',
        bangumiPage: '更新至第34话',
        avid: 'av9'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/0e6bce5d018796dda7782aa5c97bfdd14691348a.jpg',
        bangumiTitle: '口水三国',
        bangumiPage: '更新至第 关羽篇话',
        avid: 'av10'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/367387d69ac43c160a453d14cb34256abaca3b4a.jpg',
        bangumiTitle: '双星之阴阳师',
        bangumiPage: '更新至第34话',
        avid: 'av11'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/4937bf71a4a5a6a426d09e9a78d27696b4746507.jpg',
        bangumiTitle: '双星之阴阳师',
        bangumiPage: '更新至第34话',
        avid: 'av12'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/2ed6be9050dfa4afe6e2651741d81843a0e81c67.jpg',
        bangumiTitle: '黑白来看守所',
        bangumiPage: '更新至第9话',
        avid: 'av13'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/2673ac643b48eb5bda64c960a2ca850fbebb839d.jpg',
        bangumiTitle: '夏目友人帐 伍',
        bangumiPage: '更新至第8话',
        avid: 'av14'
      },
      {
        coverImg: 'https://i0.hdslb.com/bfs/bangumi/image/f3ebb500b701a387f5abde67516c5c96bbd2faff.png@220w_280h.webp',
        bangumiTitle: '葬送的芙莉莲',
        bangumiPage: '更新至第9话',
        avid: 'av15'
      },
      {
        coverImg: 'https://i0.hdslb.com/bfs/bangumi/8aa0bfce050c72c6626b63d3093a88527c251026.jpg@220w_280h.webp',
        bangumiTitle: '轻音少女 第一季',
        bangumiPage: '更新至第12话',
        avid: 'av16'
      },
      {
        coverImg: 'https://i0.hdslb.com/bfs/bangumi/image/d9d6284e0919ecfda41981c1f9119f993db62935.jpg@220w_280h.webp',
        bangumiTitle: '孤独摇滚！',
        bangumiPage: '更新至第5话',
        avid: 'av17'
      },
      {
        coverImg: 'https://i0.hdslb.com/bfs/bangumi/1cc333ff578e5ea9fded7e454953a4e2291440c2.png@220w_280h.webp',
        bangumiTitle: '青春猪头少年不会梦到兔女郎学姐',
        bangumiPage: '更新至第10话',
        avid: 'av18'
      },
      {
        coverImg: 'https://i0.hdslb.com/bfs/bangumi/image/8d1200b8c8b795dd3a7baae33afcec42fbd1947c.png@220w_280h.webp',
        bangumiTitle: '我的青春恋爱物语果然有问题',
        bangumiPage: '更新至第8话',
        avid: 'av19'
      }
    ]
  },
  onLoad: function () {
    // 页面加载时可以进行一些初始化操作
  }
});