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%; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~