web开发实训-学习笔记

微信小程序

  • 属于前端
  • 前端开发工程师必须要实现
  • 相似竞品(快应用 华为)

具体开发能实现的功能

  • 首页的轮播图
  • 搜索界面
  • 能搜索的几首歌曲
  • 点击可播放,封面可以转动
  • 能自主的切换上下歌曲

WXML

  • view=div
  • 打上{}的数据都是从外部1调取的数据
  • 'app.js'最主要的开发界面
  • "color":"#ff0000" "SelectColor":"#ffff00",

在开发者页面,手机型号可以调整但是一般使用iphone6/7/8适配,宽度100%

  • 样式的单位是rpx即相对的像素

轮播图

功能描述
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

目标:开发一个类似网易云音乐小程序界面

轮播图(Banner)

  • 使用 swiper 组件创建具有滑动图片的轮播图。
  • 属性如下:
    • id:指定轮播图的ID。
    • indicator-dots:在轮播图底部显示指示点,表示当前图片位置。
    • autoplay:启用自动播放图片。
    • interval:设置图片切换的间隔时间(单位为毫秒)。
    • circular:启用无限循环滚动图片。
    • indicator-color:设置指示点的颜色。
    • indicator-active-color:设置当前指示点的颜色。

热门歌手列表

  • 此部分显示热门歌手列表。
  • 使用 singerList 数组通过 wx:for 指令遍历歌手项。
  • 每个歌手项以 singeritem 视图显示,其中包含一张图片和歌手的名称。

最新专辑列表

  • 此部分显示最新专辑列表。
  • 类似于热门歌手列表,使用 album 数组通过 wx:for 指令遍历专辑项。
  • 每个专辑项以 singeritem 视图显示,其中包含一张图片和专辑的名称。

推荐歌单列表

  • 此部分显示推荐歌单列表。
  • 使用 playlist 数组通过 wx:for 指令遍历歌单项。
  • 每个歌单项以 singeritem 视图显示,其中包含一张图片和歌单的名称。

样式定义

  • CSS 样式定义了歌曲列表页面中各元素的外观。
  • 重要的 CSS 类包括:
    • .list_wrap:样式化歌曲列表容器。
    • .list_l.list_c.list_r:样式化歌曲列表的左侧、中间和右侧列。
    • .singerList:样式化歌手列表、专辑列表和歌单列表的容器。
    • .singeritem:样式化歌手列表、专辑列表和歌单列表中的每个项目。

清除浮动

  • clearfix::after 是一个清除浮动技巧,用于确保父容器根据其内容自适应大小,特别是当内容溢出时。
  • 它清除子元素应用的浮动,并确保正确渲染父容器。

属性说明
Skyline 仅列出与 WebView 属性的差异,未列出的属性与 WebView 一致。

主要界面——音乐播放界面

页面结构

WXML:

<view class='item'>
<image class='audio_post{{music_on?" music_on":""}}' style="animation-play-state:{{music_playing?'running':'paused'}}" src='/image/xiangyunduan.png.crdownload'></image>
<view class='audio_progress'>
<slider block-size='14' bindchange='audioChange' bindchanging='audioChanging' value='{{sliderValue}}'></slider>
<view>{{musicTime}}</view>
</view>
<view class='audio_control'>
<button type='primary' bindtap='playMusic'>播放</button>
<button type='primary' bindtap='pauseMusic'>暂停</button>
<button type='primary' bindtap='stopMusic'>停止</button>
</view>
</view>

WXSS
调整格式

.item {
width: 100%;
padding-bottom: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.audio_progress {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.audio_progress slider {
width: 80%;
}
.audio_progress view {
padding: 18rpx;
}
.audio_post {
width: 600rpx;
height: 600rpx;
margin: 50rpx auto;
border-radius: 50%;
}
.music_on {
animation: audio-rotate 8s linear infinite;
}
.audio_control {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.audio_control button {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: transparent;
border: none;
padding: 0;
}
@keyframes audio-rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}

我的界面如何搭建:

在这段代码中,我们首先创建了一个名为userbox的视图容器,用于包裹用户头像和用户名。userpic表示用户头像的容器,其中使用了open-data组件的type属性来获取用户的头像URL,显示用户的头像。name表示用户名的容器,同样使用了open-data组件的type属性来获取用户昵称,显示用户的昵称。

<view class="userbox">
<view class="userpic">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class="name">
<open-data type="userNickName"></open-data>
</view>
</view>
page {
background: #ebebeb;
}
.userbox {
padding: 200rpx 0rpx;
background-color: #ebebeb;
}
.userbox .userpic {
width: 180rpx;
height: 180rpx;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.userbox .name {
text-align: center;
font-size: 38rpx;
height: 100rpx;
line-break: 100rpx;
display: block;
padding-top: 10%;
}
.game {
height: 130rpx;
background: white;
border-top: 1px solid #cccccc;
padding: 0 2.5%;
line-height: 120rpx;
font-weight: bold;
}
.game text {
display: block;
float: left;
width: 200rpx;
line-height: 120rpx;
}
.game image {
width: 60rpx;
height: 60rpx;
float: right;
display: block;
position: absolute;
right: 2.5%;
top: 71%;
}
posted @   liuwansi  阅读(26)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示