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%;
}