微信小程序开发 |
您所在的位置：网站首页 › 如何在小程序中截图 › 微信小程序开发 |
|
目录
一 小程序主体功能介绍 二 常用组件和API介绍 音频API 常用组件 三 整体布局 数据定义 主体页面 运行效果 四 播放器页面 布局部分 样式部分 运行效果 五 播放列表页面 布局部分 样式部分 运行效果 全部功能实现代码index.js 一 小程序主体功能介绍本小程序主要实现，音乐的播放、暂停，下一曲的切换，以及播放列表和当前播放歌曲的详细信息查看等。 二 常用组件和API介绍 1.音频API1.1 介绍 创建音频时需要先创建一个对象实例，从而引用该对象的方法和属性。 var audioCtx=wx.createInnerAudioContext()1.2 常用属性方法 属性 src:音频资源的地址； autoplay：是否自动播放,默认false； loop： 是否循环播放，默认为false； startTime: 开始播放的位置，默认为0； currentTime: 当前播放的位置； duration: 音频的长度； paused：当前暂停或停止的状态； 方法 play(): 播放； stop(): 停止，再播放重头开始； pause(): 暂停，再播放从当前位置开始； seek(): 跳到指定的位置； onError(): 音频播放错误事件； onEnded(): 音频自然播放结束事件； onPlay(): 音频播放事件； onTimeUpdate(): 音频播放进度更新事件； 2.常用组件2.1 swiper组件 介绍 swiper组件是滑块视图容器，经常用于实现轮播图，在音乐播放器小程序中可以实现标签页的切换。 属性 属性类型说明indicator-dotsBoolean是否显示页面的指示点，默认为falseindicator-colorColor指示点的颜色indicator-active-colorColor选中的指示点颜色autoplayBoolean是否自动切换，默认为falsecurrentNumber当前所在滑块的index,默认为0current-item-idString当前所在滑块的item-idintervalNumber自动切换时间间隔（ms）durationNumber滑动动画时长（ms）bindchangeEventHandlecurrent改变时会触发change事件circularBoolean是否采用衔接滑动，默认false代码使用 0 1 22.2 include代码引用 介绍 当一个wxml文件中代码过多，或wxml中有部分相同的代码时,可以将他们分离开，用include进行引入。 代码使用 body2.3 scroll-view组件 介绍 scroll-view组件用于实现可滚动视图区域。一般来说，当页面高度超出了显示区域的高度时，先设置外层容器高度，使其低于内部容器高度，然后在外层容器样式中设置滚动方向即可。 属性 属性说明scroll-x允许横向滚动，默认为false scroll-y允许纵向滚动，默认为falsescroll-top设置竖向滚动条的位置scroll-left设置横向滚动条的位置bindscrolltoupper滚动到顶部/左边触发的事件bindscrolltolower滚动到底部/右边触发的事件 代码使用 在.js页面中可以添加scroll处理函数,来查看具体数值 scroll:function(e){ console.log(e.detail) }2.4 slider组件 介绍 slider组件是小程序表单组件中的一种，用于滑动选择某一个值，在本项目中将用来实现播放器的进度条 属性 属性说明min最小值，默认为0max最大值，默认为100step步长，取值大于0value当前取值，默认为0activeColor已选择的颜色，默认为#1aad19backgroundColor背景条颜色，默认为#e9e9e9block-size滑块的大小block-color滑块的颜色,默认为#ffffffshow-value是否显示当前value，默认为falsebindchange完成一次拖动后触发的事件bindchanging拖动过程中触发的事件 三 整体布局 1. 数据定义1.1 路径 pages/index/index.js 文件的data对象定义基础数据playlist 1.2 数据 data: { item:0, tab:0, // 播放列表 playlist:[{ id:1, title:"纪念", singer:"雷心雨", src:"/images/1.mp3", coverImgUrl:"/images/cover.jpg" },{ id:2, title:"雪落下的声音", singer:"郁可唯", src:"/images/2.mp3", coverImgUrl:"/images/cover2.jpg" },{ id:3, title:"只要平凡", singer:"张杰", src:"/images/3.mp3", coverImgUrl:"/images/cover3.jpg" } ,{ id:4, title:"我会很勇敢", singer:"张雅莉", src:"/images/4.mp3", coverImgUrl:"/images/cover4.jpg" } ], state:"paused", // 播放的索引值 playIndex:0, //设置的默认值 play:{ // 当前时间 currentTime:'00.00', // 总时间 duration:'00.00', // 播放进度 percent:0, title:'', singer:'', coverImgUrl:"/images/cover.jpg", } }, 2. 主体页面2.1 布局页面index.wxml |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |