微信小程序 初学——【音乐播放器】

news2025/7/7 16:29:32

一、项目效果展示

  • 音乐推荐页面展示
    在这里插入图片描述

  • 播放器展示
    在这里插入图片描述

  • 播放列表展示
    在这里插入图片描述

二、项目结构

  • 音乐小程序项目页面结构：
1.tab导航栏
2.content内容区
3.player音乐播放器控件

在这里插入图片描述

  • 开发者工具创建空白项目：

  • 新建项目 —— 设置项目名称和路径 —— 选择你注册的AppID —— 不使用云服务 —— 选择JavaScript基础模板 —— 点击确定创建项目

  • 修改app.json

{
  "pages":[
    "pages/index1/index1",
    "pages/index1/info",
    "pages/index1/play",
    "pages/index1/playlist",
    "pages/index/index",
    "pages/header/header",
    "pages/footer/footer",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述

  • 在index1中编写顶部tab导航栏、中部content内容区页面和底部player音乐播放栏
  • 在info中编写音乐推荐页面
  • 在play中编写播放器页面
  • 在playlist中编写播放列表页面
    在这里插入图片描述

三、项目实现

（一）index1

  • index1.wxml代码：
<view class="tab">
    <view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
    <view class="tab-item  {{item==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
    <view class="tab-item  {{item==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content" style="color: #ffffff;">
    <swiper current="{{item}}" bindchange="changeTab">
        <swiper-item>
            <include src="./info"></include>
        </swiper-item>
        <swiper-item>
            <include src="./play"></include>
        </swiper-item>
        <swiper-item>
            <include src="./playlist"></include>
        </swiper-item>
    </swiper>

</view>
<view class="player">
    <image src="{{play.coverImage}}"></image>
    <view class="player-info">
        <view>{{play.title}}</view>
        <view class="player-info-auth">{{play.singer}}</view>
    </view>
    <view class="player-controls">
        <image src="../images/01.png"></image>
        <image wx:if="{{ state=='paused' }}" src="../images/02.png" bindtap="play"></image>
        <image wx:if="{{ state=='running' }}" src="../images/02stop.png" bindtap="pause"></image>
        <image src="../images/03.png" bindtap="next"></image>
    </view>
</view>
  • swiper组件编写滑动页面结构：
<swiper>
  <swiper-item style="background:#ccc">0</swiper-item>
  <swiper-item style="background:#ddd">1</swiper-item>
  <swiper-item style="background:#eee">2</swiper-item>
</swiper>

在这里插入图片描述

三、编写页面结构和样式

  • 在pages/index/index.wxml编写页面和tab导航栏
<!-- 标签页标题 -->
<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content"></view>
<!-- 底部播放器 -->
<view class="player"></view>

在这里插入图片描述

  • 在pages/index/index.wxss编写页面样式和tab导航栏样式
page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;

}

.tab {
  display: flex;
}

.tab-item {
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}
.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

在这里插入图片描述

  • 添加页面info.wxml、playlist.wxml、play.wxml文件
    在这里插入图片描述

  • 实现标签页切换，通过滚动事件切换页面效果

<!-- 标签页标题 -->
<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <include src="info.wxml"></include>
    </swiper-item>
    <swiper-item>
      <include src="play.wxml"></include>
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml"></include>
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>

在这里插入图片描述

  • 滚动事件
    // tab切换
    changeTab: function(e) {
      this.setData({
        tab: e.detail.current
      })
    },

在这里插入图片描述

  • 通过滚动事件切换页面
    在这里插入图片描述

第三章 音乐推荐

一、任务分析

  • 音乐推荐页面结构图
    在这里插入图片描述

二、组件介绍

  • scroll-view组件的属性及说明
可选值说明默认
scroll-xBoolean允许横向滚动，默认为false
scroll-yBoolean允许纵向滚动，默认为false
scroll-topNumber / String设置竖向滚动条的位置
scroll-leftNumber / String设置横向滚动条的位置
bindscrolltoupperEventHandle滚动到顶部/左边时触发的事件
bindscrolltolowerEventHandle滚动到底部/右边时触发的事件
scroll-with-animationBoolean滚动到顶部/左边时触发的事件
scroll-into-viewString设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）
bindscrollEventHandle滚动时触发的事件

三、编写音乐推荐页面结构和样式

  • 在info.wxml里实现内容区域滚动和轮播图
<!-- 内容滚动区域 -->
<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/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
  </swiper>
</scroll-view>

.content-info {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 轮播图 */

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

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

在这里插入图片描述

  • 实现展示
    在这里插入图片描述
  • 在info.html里实现功能按钮
<!-- 功能按钮 -->
  <view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FM</text>
    </view>
    <view>
      <image src="/images/05.png" />
      <text>每日歌曲推荐</text>
    </view>
    <view>
      <image src="/images/06.png" />
      <text>云音乐新歌榜</text>
    </view>
  </view>

/* 功能按钮 */

.content-info-portal {
  display: flex;
  margin-bottom: 15px;
}

.content-info-portal>view {
  flex: 1;
  font-size: 11pt;
  text-align: center;
}

.content-info-portal image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}

在这里插入图片描述

  • 实现展示
    在这里插入图片描述
  • flex布局实现热门音乐的页面布局
  <!-- 热门音乐 -->
  <view class="content-info-list">
    <view class="list-title">推荐歌曲</view>
    <view class="list-inner">
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>紫罗兰</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>五月之歌</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>菩提树</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>欢乐颂</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>安魂曲</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>摇篮曲</view>
      </view>
    </view>
  </view>

在这里插入图片描述

/* 热门音乐 */

.content-info-list {
  font-size: 11pt;
  margin-bottom: 20rpx;
}

.content-info-list > .list-title {
  margin: 20rpx 35rpx;
}

.content-info-list > .list-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}

.content-info-list > .list-inner > .list-item {
  flex: 1;
}

.content-info-list > .list-inner > .list-item > image {
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}

.content-info-list > .list-inner > .list-item > view {
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;

}

在这里插入图片描述

  • 实现展示
    在这里插入图片描述
  • 在index.wxml里编写底部播放器
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="/images/cover.jpg" />
  <view class="player-info">
    <view class="player-info-title">钢琴协奏曲</view>
    <view class="player-info-singer">肖邦</view>
  </view>
  <view class="player-controls">
    <!-- 切换到播放列表 -->
    <image src="/images/01.png" bindtap="changePage" data-page="2" />
    <!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />
    <!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" />
  </view>
</view>
</view>

在这里插入图片描述

  • 底部播放器样式
/* 底部播放器 */

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.player-info-singer {
  color: #888;
}

.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

在这里插入图片描述

  • 测试效果
    在这里插入图片描述

第四章 播放器

一、任务分析

  • 播放器标签页结构图：
    在这里插入图片描述
  • 播放器具体功能分析
1.音乐信息：显示当前播放曲目的标题和艺术家
2.专辑封面：当音乐播放时，专辑封面会顺时针旋转
3.播放进度：显示播放进度，调节音乐进度

二、组件介绍

  • audioCtx对象声明的方式
var audioCtx = wx.createInnerAudioContext();
  • 音频API接口的属性及说明
可选值名称说明
属性
src
音频资源的地址，用于直接播放
startTime
开始播放的位置（秒），默认为0
autoplay
是否自动开始播放，默认为false
loop
是否循环播放，默认为false
volume
音量。范围0~1。默认为1
duration
音频的长度（秒）。在当前有合法的src时返回（只读）
currentTime
音频的播放位置（秒）。在当前有合法的src时返回（只读）
paused
开始播放的位置（秒），默认为0

三、实现播放器功能

  • 在index.js里定义基础播放列表和音乐状态数据
/**
   * 页面的初始数据
   */
  data: {
    item: 0,
    tab: 0,
    // 播放列表数据
    playlist: [{
      id: 1,
      title: '玫瑰花的葬礼',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/78393.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 2,
      title: '幻听',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/59696.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 3,
      title: '清明雨上',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/36119.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 4,
      title: '灰色头像',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/59697.mp3',
      coverImgUrl: '/images/cover.jpg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },

在这里插入图片描述

  • 在index.js编辑音乐播放逻辑代码
   // 实现播放器播放功能
    audioCtx: null,
    onReady: function() {
      this.audioCtx = wx.createInnerAudioContext()
      // 默认选择第1曲
      this.setMusic(0)
      var that = this
      // 播放进度检测
      this.audioCtx.onError(function() {
        console.log('播放失败：' + that.audioCtx.src)
      })
      // 播放完成自动换下一曲
      this.audioCtx.onEnded(function() {
        that.next()
      })
      // 自动更新播放进度
      this.audioCtx.onPlay(function() {})
      this.audioCtx.onTimeUpdate(function() {
        that.setData({
          'play.duration': formatTime(that.audioCtx.duration),
          'play.currentTime': formatTime(that.audioCtx.currentTime),
          'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
        })
      })
      // 格式化时间
      function formatTime(time) {
        var minute = Math.floor(time / 60) % 60;
        var second = Math.floor(time) % 60
        return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
      }
    },
    // 音乐播放
    setMusic: function(index) {
      var music = this.data.playlist[index]
      this.audioCtx.src = music.src
      this.setData({
        playIndex: index,
        'play.title': music.title,
        'play.singer': music.singer,
        'play.coverImgUrl': music.coverImgUrl,
        'play.currentTime': '00:00',
        'play.duration': '00:00',
        'play.percent': 0
      })
    },

在这里插入图片描述

  • 修改底部播放器的结构代码
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{{play.title}}</view>
    <view class="player-info-singer">{{play.singer}}</view>
  </view>
  <view class="player-controls">
    <!-- 切换到播放列表 -->
    <image src="/images/01.png" bindtap="changePage" data-page="2" />
    <!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />
    <!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" />
  </view>
</view>

在这里插入图片描述

  • 底部播放器样式代码
/* 底部播放器 */

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.player-info-singer {
  color: #888;
}

.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

在这里插入图片描述

  • 底部播放器播放功能
    在这里插入图片描述
  • 在indexjs里编写底部播放器暂停/播放按钮控制歌曲以及播放器切换下一曲歌曲功能
// 播放按钮
  play: function() {
    this.audioCtx.play()
    this.setData({
      state: 'running'
    })
  },

  // 暂停按钮
  pause: function() {
    this.audioCtx.pause()
    this.setData({
      state: 'paused'
    })
  },

  // 下一曲按钮
  next: function() {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

在这里插入图片描述

  • 测试底部播放功能
    在这里插入图片描述

四、编写播放器页面

  • 在play.wxml编写播放器页面代码
<!-- 播放器 -->
<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{{play.title}}</text>
    <view>—— {{play.singer}} ——</view>
  </view>
  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  </view>
  <!-- 显示播放进度和时间 -->
  <view class="content-play-progress">
    <text>{{play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
    </view>
    <text>{{play.duration}}</text>
  </view>
</view>

在这里插入图片描述

  • 查看页面
    在这里插入图片描述
  • 在index.wxss编写播放器样式
/* 播放器 */

.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.content-play-info > view {
  color: #888;
  font-size: 11pt;
}
/* 显示专辑页面样式 */

.content-play-cover image {
  animation: rotateImage 10s linear infinite;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 1px solid #333;
}

@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 播放进度和时间 */

.content-play-progress {
  display: flex;
  align-items: center;
  margin: 0 35rpx;
  font-size: 9pt;
  text-align: center;
}

.content-play-progress > view {
  flex: 1;
}
  • 查看播放器页面
    在这里插入图片描述

第五章 播放列表

一、任务分析

  • 播放器列表结构
    在这里插入图片描述

二、实现播放列表功能

  • 在playlist.wxml编写播放列表结构
<scroll-view class="content-playlist" scroll-y>
  <view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">
    <image class="playlist-cover" src="{{item.coverImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{{item.title}}</view>
      <view class="playlist-info-singer">{{item.singer}}</view>
    </view>
    <view class="playlist-controls">
      <text wx:if="{{index==playIndex}}">正在播放</text>
    </view>
  </view>
</scroll-view>

在这里插入图片描述

  • 查看结果
    在这里插入图片描述
  • 在index.wxss编写播放列表样式
/* 播放列表 */

.playlist-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333;
  height: 112rpx;
}

.playlist-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.playlist-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.playlist-info-singer {
  color: #888;
}

.playlist-controls {
  font-size: 10pt;
  margin-right: 20rpx;
  color: #c25b5b;
}

在这里插入图片描述

  • 查看结果
    在这里插入图片描述
  • 在index.js里实现播放列表的切换功能
// 播放列表换曲功能
    change: function(e) {
      this.setMusic(e.currentTarget.dataset.index)
      this.play()
  }

在这里插入图片描述

三、测试播放列表切换功能

  • 播放列表测试
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407353.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

44岁了，我从没想过在CSDN创作2年，会有这么大收获

44岁了，我从没想过在CSDN创作2年，会有这么大收获

1998年上的大学&#xff0c;02年毕业&#xff0c;就算从工作算起&#xff0c;我也有20余年的码龄生涯了。 但正式开启博文的写作&#xff0c;却是2021年开始的&#xff0c;差不多也就写了2年的博客&#xff0c;今天我来说说我在CSDN的感受和收获。 我是真的没想到&#xff0c;…
阅读更多...
和ChatGPT对比，文心一言的表现已经是中国之光了

和ChatGPT对比，文心一言的表现已经是中国之光了

网络上各种测评满天飞&#xff0c;这里就不展开说了&#xff0c;针对“chatgpt”这项技术的难点&#xff0c;是十分巨大的。当你对文心一言以及其他国产AI软件存在不满的时候&#xff0c;你可以简单对着chatgpt或者文心一言搜索&#xff01;ChatGPT技术难点通俗来讲难度&#x…
阅读更多...
CSS实现文字凹凸效果

CSS实现文字凹凸效果

使用两个div分别用来实现凹凸效果&#xff1b;text-shadow语法 text-shadow: h-shadow v-shadow blur color; h-shadow&#xff1a;必需。水平阴影的位置。允许负值。 v-shadow &#xff1a;必需。垂直阴影的位置。允许负值。 blur&#xff1a;可选&#xff0c;模糊的距离。 co…
阅读更多...
用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦

用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦

突发奇想&#xff0c;想用chatgpt写一篇论文&#xff0c;并看看查重率&#xff0c;结果很惊艳&#xff0c;说明是确实可行的&#xff0c;请看下图。 下面是完整的文字内容。 InSAR (Interferometric Synthetic Aperture Radar) 地质灾害监测技术是一种基于合成孔径雷达…
阅读更多...
【小程序从0到1】小程序常用组件一览

【小程序从0到1】小程序常用组件一览

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…
阅读更多...
Linux- 系统随你玩之--玩出花活的命令浏览器-双生姐妹花

Linux- 系统随你玩之--玩出花活的命令浏览器-双生姐妹花

文章目录1、背景2、命令浏览器-双生姐妹花2.1、姐妹花简介2.2 、验名正身2.3、常用功能选项3、常用实操3.1、发送请求获取文件3.1.1、抓取页面内容到一个文件中3.1.2、多个文件下载3.1.3、下载ftp文件3.1.4、断点续传3.1.5、上传文件3.1.6、内容输出3.2 、利用curl测试接口3.3 …
阅读更多...
数学建模—聚类(matlab、spss）K均值 Q型聚类 R型聚类

数学建模—聚类(matlab、spss）K均值 Q型聚类 R型聚类

文章目录一、K均值二、Q型聚类三、R型聚类聚类三种方法&#xff1a; 【说明】 1、三种方式输入矩阵行为个案&#xff0c;列为变量 量纲不同需要预处理&#xff0c;一般使用zscore() zscore()标准化为对每一列操作减去均值除以标准差 2、k均值需要自己确定k取值。Q、R型聚类需要…
阅读更多...
Echarts图表自适应？你可以这样做

Echarts图表自适应？你可以这样做

一、图表变形 使用 Echarts 绘制图表时&#xff0c;可能会遇到变形的问题。如下图&#xff1a; 其原因是 Echarts 在初始化实例的时候&#xff0c;对应 dom 元素的宽高还没有确定。 解决方案也很简单&#xff1a; 监听对应 dom 元素&#xff0c;如果大小发生变化&#xff0c;调…
阅读更多...
改哭了，终于解决了Cannot read properties of undefined (reading ‘parseComponent‘）

改哭了，终于解决了Cannot read properties of undefined (reading ‘parseComponent‘）

Vue中eslint报错的修改&#xff0c;绝对有效&#xff01;&#xff01;&#xff01; Syntax Error: TypeError: Cannot read properties of undefined (reading parseComponent)You may use special comments to disable some warnings. Use // eslint-disable-next-line to ig…
阅读更多...
Vue-Router的使用

Vue-Router的使用

目录 一、什么是路由&#xff1f; 二、在vue中如何使用路由&#xff1f; 三、vue-router的搭建 3.1 什么是hash和history模式&#xff1f; 四、路由的基本使用 2.1 router-view 2.1.1 命名视图 2.2 router-link 三、路由的参数 3.1 query参数 3.2 params参数 四、编…
阅读更多...
4.网络爬虫—Post请求(实战演示)

4.网络爬虫—Post请求(实战演示)

网络爬虫—Post请求实战演示POST请求GET请求POST请求和GET请求的区别获取二进制数据爬[百度官网](https://www.baidu.com/)logo实战发送post请求百度翻译实战使用session发送请求模拟登录17k小说网常见问题前言&#xff1a; &#x1f4dd;​&#x1f4dd;​此专栏文章是专门针对…
阅读更多...
uniapp 开发H5打包微信小程序样式失效的解决之道

uniapp 开发H5打包微信小程序样式失效的解决之道

使用uniapp开发H5&#xff0c;样式已经按照UI设计稿全部实现。但是在打包微信小程序调试的时候&#xff0c;遇到很多样式失效的问题。问了度娘很久&#xff0c;并没有完全解决样式失效的问题。于是自己按照从度娘上查到的方法去进行组合尝试&#xff0c;最终样式失效问题得到了…
阅读更多...
vue项目 移动端适配——rem

vue项目 移动端适配——rem

做移动端的适配我们就是要考虑&#xff0c;对于不同大小的手机屏幕&#xff0c;怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。 这个问题我们可以使用相对单位rem。 那么什么是 rem&#xff1f; rem&#xff08;font size of the root element&#xff09;是指相对…
阅读更多...
VUE项目中调用高德地图

VUE项目中调用高德地图

前言 相信大家或多或少都接触过在大屏的项目&#xff0c;在大屏项目中除了用到了echarts中的行政地图&#xff0c;街道地图也是很常见的&#xff0c;今天主要来说一下在vue中调用高德地图遇到的一些问题&#x1f92a;。 申请高德key 无论我们使用任何方式调用高德地图都需要…
阅读更多...
导航栏不变，切换局部页面的方法

导航栏不变，切换局部页面的方法

前言&#xff1a; 在写项目的时候&#xff0c;一直让我很头疼的问题&#xff0c;就是我的项目的导航栏不需要改变&#xff0c;但是点击导航栏需要切换页面。接下来我总结一下我能够想到的方法! 目录&#xff1a; 1.iframe标签嵌入页面自定义属性 2.利用display属性和排他思想…
阅读更多...
【Anime.js】——JavaScript动画库：Anime.js——学习笔记

【Anime.js】——JavaScript动画库：Anime.js——学习笔记

目录 一、搭建开发环境 二、基本功能和使用 开始制作动画 动画属性 三、anime.stagger——交错动画 四、timeline——时间轴 五、控制、回调与助手 一、控制 二、回调 三、助手 六、easings——动画运动曲线 七、SVG动画 官网定义&#xff1a; anime.js 是一个简便的J…
阅读更多...
Java二次开发海康SDK-对接门禁机

Java二次开发海康SDK-对接门禁机

写在最前SDK版本&#xff1a;CH-HCNetSDKV6.1.6.45_build20210302_win64参考文档&#xff1a;海康SDK使用手册_V6.1对接测试设备型号&#xff1a;DS-K1T671M设备序列号&#xff1a;E50247795业务目标使用门禁设备实现对人脸的抓拍&#xff0c;将抓拍的人脸与其对应的数据进行上…
阅读更多...
用Pytorch构建一个喵咪识别模型

用Pytorch构建一个喵咪识别模型

本文参加新星计划人工智能(Pytorch)赛道&#xff1a;https://bbs.csdn.net/topics/613989052 目录 一、前言 二、问题阐述及理论流程 2.1问题阐述 2.2猫咪图片识别原理 三、用PyTorch 实现 3.1PyTorch介绍 3.2PyTorch 构建模型的五要素 3.3PyTorch 实现的步骤 3.3.…
阅读更多...
重新学习Vue，了解一下Vue的故事和核心特点

重新学习Vue，了解一下Vue的故事和核心特点

vueVue的由来Vue是什么1.响应的数据绑定2.可组合视图组件3.虚拟DOM4.MVVM模式5.声明式渲染总结Vue的由来 大家应该都知道VUE是尤大大尤雨溪开发出来的&#xff0c;尤大大专业不是计算机&#xff0c;而是室内艺术专业。后来尤大大到帕森斯设计学院进修艺术研究硕士学位&#xf…
阅读更多...
猿创征文｜【HTML】标签学习之路

猿创征文｜【HTML】标签学习之路

&#x1f496;目录 一、HTML语法规范 1.基本语法概述 2.标签关系 二、HTML基本结构标签 1.第一个HTML页面 2.HTML基本结构标签总结 一、HTML语法规范 1.基本语法概述 html是由尖括号包围的关键词&#xff0c;列如&#xff1a;<html>。html标签通常是成对出现的&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023