2022-2023第一学期微信小程序期末实训报告

移动开发 2023-06-12 00:58:01 阅读次数: 0

2022-2023第一学期微信小程序期末实训报告

微信小程序小程实训报告

链接: 源代码下载

前言

吐槽一下：我是个网络博主，搞交换路由的，不知道为毛写个期末作业，结果这篇文章变成了关注量最多的

一、微信小程序简介

  1. 简介
    名称：网易云音乐
    使用的技术：微信小程序，云服务

  2. 功能展示
    （1）轮播图
    在这里插入图片描述
    （2）视频
    在这里插入图片描述
    （3）音乐
    在这里插入图片描述
    （4） 跳转
    在这里插入图片描述
    在这里插入图片描述

  3. 微信小程序目录和文件结构
    在这里插入图片描述
    index:主页
    video:看点
    me:我的
    me_info:我的信息
    me_music:我的音乐

二、微信小程序布局

  1. 首页页面结构
    在这里插入图片描述

  2. 看点页面结构
    在这里插入图片描述

  3. 我的页面结构
    在这里插入图片描述

  4. 我的信息页面结构
    在这里插入图片描述

  5. 我的音乐页面结构
    在这里插入图片描述

三、微信小程序实现，分页面展示

  1. 主页

（1）实现功能与效果图
轮播图
在这里插入图片描述
（2）结构代码

  <swiper current="{
     
     {item}}" bindchange="changeTab">
    <swiper-item>
      <!-- 内容滚动区域 -->
      <scroll-view class="content-info" scroll-y>
        <!-- 轮播图 -->
        <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
          <swiper-item><image src="/images/timg1.jpg" /></swiper-item>
          <swiper-item><image src="/images/timg2.jpg" /></swiper-item>
          <swiper-item><image src="/images/timg3.jpg" /></swiper-item>
        </swiper>
      </scroll-view>
    </swiper-item>
  </swiper>

（3）样式代码

.content-info-slide {
    
    
  height: 302rpx;
  margin-bottom: 20px;
}

.content-info-slide image {
    
    
  width: 100%;
  height: 100%;
}
  1. 看点

（1）实现功能与效果图
播放视频
在这里插入图片描述

（2）结构代码

<view class="video_div">
  <view class="video_top">
    <view><image src="/images/video_author1.jpg" class="video_author"/></view>
    <view class="video_author_name">阿巴阿巴</view>
    <view><image src="/images/video_follow.png" class="video_follow"/></view>
  </view>
  <view>
    <video src="cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/视频/1.mp4" controls class="video_video"></video>
  </view>
  <view class="video_bottom">
    <view class="video_name">这事只能中午干</view>
    <view><image src="/images/video_nice.png" class="video_nice"/></view>
  </view>
</view>

（3）样式代码

/*布局*/
.video_div{
    
    
  background-color: rgb(236, 235, 233);
  width: 350px;
  margin: auto;
  border-radius:3%;
  margin-top: 10px;
}
.video_top{
    
    
  justify-content: center;
  display:flex;
  padding-top: 10px;
  padding-bottom: 3px; 
}
.video_bottom{
    
    
  justify-content: center;
  display:flex;
  padding-top: 8px;
  padding-bottom: 10px; 
}
/*详细*/
.video_author{
    
    
  width: 30px;
  height: 30px;
  border-radius:50%;
}
.video_author_name{
    
    
  width: 250px;
  margin-left: 10px;
  margin-top: 4px;
  font-size: 13px;
 }
 .video_follow{
    
    
  width: 20px;
  height: 20px; 
  margin-top: 5px;
}
.video_video{
    
    
  width: 350px;
  height: 200px;
}
.video_name{
    
    
  width: 80%;
  font-size: 17px;
}
.video_nice{
    
    
  width: 20px;
  height:20px;
}
  1. 我的

（1）实现功能与效果图
跳转
在这里插入图片描述

（2）结构代码

<navigator url="me_music/me_music">
<view class="me_music">  
    <view class="me_music_div1">
      <image src="/images/music1.jpg" class="me_music_photo"/>
    </view>
    <view class="me_music_div2">
      <view class="me_music_name">我的音乐</view>
      <view class="me_music_num">81首</view>
    </view>
    <view class="me_music_div3">
      <image src="/images/sc.png" class="me_music_play"/>
    </view>
  </view>
</navigator>

（3）样式代码

/*我的音乐*/
.me_music{
    
    
  width: 90%;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin:0 auto;
  margin-top: 20px;
  background-color: rgb(252, 241, 214);
  padding-top: 10px;
  padding-bottom: 10px;
}
.me_music_div1{
    
    
  width: 60px;
}
.me_music_div2{
    
    
  width: 200px;
}
.me_music_div3{
    
    
  width: 50px;
  display:flex;    /*设置为flex布局*/
  justify-content: center; /*水平居中*/ 
  margin-top: 10px;
}
.me_music_photo{
    
    
  width: 50px;
  height: 50px;
  border-radius:25%;
}
.me_music_name{
    
    
  margin-top: 5px;
  margin-left: 10px;
  font-size: 16px;
}
.me_music_num{
    
    
  margin-left: 10px;
  margin-top: 5px;
  font-size: 10px;
  color: #9B9B9B;
}
.me_music_play{
    
    
  width: 30px;
  height: 30px;
}

（4）js代码

Page({
    
    
  onLoad: function (options) {
    
    
    this.setData({
    
    
      title: options.title
    })
  }
})
  1. 我的音乐

（1）实现功能与效果图
播放音乐
在这里插入图片描述

（2）结构代码

<view  class="music_list"> 
  <view wx:for="{
     
     { list }}" wx:for-item="item" wx:key="index" bindtap="clickPlay" data-item="{
     
     { item }}" data-index="{
     
     { index }}">
    <view class="item" class="music_div">    
      <view class="text"><image src="{
     
     { item.photo }}" class="music_photo"/></view>
      <view class="text" class="music_name">{
   
   { item.title }}</view>
    </view>
  </view>
</view>

（3）样式代码

/*音乐列表*/ 
.music_love{
    
    
  display: flex;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.load{
    
    
  width: 20px;
  height: 20px;
}
.music_list{
    
    
  display: flex;
  flex-direction: row;
  justify-content: center;    /*水平居中*/ 
  width: 100%;
  height: 150px;
  flex-wrap:wrap;
}
.music_div{
    
    
  height: 150px;
  width: 150px;
  margin: 0 10px 30px 10px;
  
}
.music_photo{
    
    
  height: 150px;
  width: 150px;
  border-radius: 10px;
}
.music_name{
    
    
  font-size: 14px;
  display: flex;
  justify-content: center;
}

（4）js代码

const AudioContext = wx.createInnerAudioContext()

Page({
    
            
  data: {
    
        
    // 音乐列表
    list: [
      {
    
    
        photo:'cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/images/起风了.jpg',
        title: '起风了',
        file: 'cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/音乐/起风了.mp3'
      },
      {
    
    
        photo: 'cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/images/盗将行.jpg',
        title: '盗将行',
        file: 'cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/音乐/盗将行.mp3'
      },
      {
    
    
        photo: 'cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/images/星辰大海.jpg',
        title: '海平面的星1',
        file: 'cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/音乐/海平面的星.mp3'
      },
      {
    
    
        photo: 'cloud://wxqm-6g3ssr0z4386c66a.7778-wxqm-6g3ssr0z4386c66a-1313733838/images/星辰大海.jpg',
        title: '海平面的星2',
      }
    ],
    // 当前播放音频的索引
    current: null,
  },

//点击播放与暂停
  clickPlay(e) {
    
                
    // 当前行数据
    const row = e.currentTarget.dataset.item
    // 当前索引
    const index = e.currentTarget.dataset.index

    // 暂停播放
    if(this.data.current == index) {
    
                
        // 暂停播放并重置索引
        AudioContext.pause()
        this.setData({
    
    current: null })
    }

    // 从头开始播放
    else {
    
                
        // 设置为自动播放(必须)
        AudioContext.autoplay = true
        // 设置播放链接
        AudioContext.src = row.file
        // 开始播放并设置索引
        AudioContext.play()
        this.setData({
    
    current: index })
    }
  }
})
  1. 服务器页面截图
    在这里插入图片描述

四、收获体会

不会就百度

猜你喜欢

转载自blog.csdn.net/weixin_51057026/article/details/125695527
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022