《微信公众平台入门到精通》Vol20_第1页
《微信公众平台入门到精通》Vol20_第2页
《微信公众平台入门到精通》Vol20_第3页
《微信公众平台入门到精通》Vol20_第4页
《微信公众平台入门到精通》Vol20_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、微信公众平台入门到精通Vol.202013-10-07 新浪微博：创业阿哲 微信公众号：创业阿哲 私个人微信号：12134453资料较多，且不断更新中你若想学习，可以随时私信，我们会在第一时间回复。前两天上线的ZTalk音乐盒子颇受好评，很多朋友都在后台求教程求源码，虽然这个播放器的开发比较复杂，但既然大家有兴趣，那我就写下开发步骤吧，全部教程会分为三次，里面牵扯的除了PHP编程外，还有JS开发，今天先讲前端静态页面的代码。源码请在公众号里输入“微信代码”查看下载连接，然后将下载链接自己想办法搞到PC上然后再下载，下载后上传到自己sae里就可以直接在浏览器运行，当然你也可以在微信里通

2、过链接来查看。建议先下载安装了再看文章，以下是注意事项：1、audio.html是播放器的前端静态展示页。2、image目录里是播放器要用到的图片，比如播放、暂停、背景等，和一些JS插件，包括了jquery框架。3、image目录里可以修改的就是common.css，这个是播放器的样式文件，如果有CSS基础的同学可以自己修改。4、image目录下可替换图片：bg0.jpg 页面背景图片coverbg.png 播放器默认背景图片第十五章    微信音乐播放器开发一、Html5的audio组件HTML5 有两个很炫的元素，就是Audio和 Video,可以用他们在页面上创建音频

3、播放器和视频播放器，制作一些效果很不错的应用。在sae的代码管理里新建一个HTML页面，命名为test.html。html5的页面最基本的框架如下，橙色字为文档声明，有了这个就表明这是一个html5的页面。在<body></body>中添加一个音频元素：<audio src=" controls="controls" autoplay="autoplay"></audio>在谷歌Chrome浏览器中访问这个url，效果如下： controls指的是用户控制界面,所以我们可以在Web页面中

4、看到上面这个操作面板，包括播放和暂停，播放进度条，音量进度条，和进度时间显示等。autoplay 指的是自动播发已加载的媒体文件，所以我们一打开页面就可以直接播放了无论是视屏还是音频，都是一个容器文件，包含了一些音频轨道，视频轨道和一些元数据，这些是和你的视频或者音频控件绑定到一块的，这样才形成了一个完整的播放组件。不过由于html5的标准还不统一，还有部分安卓系统内置浏览器是阉割了这些组件的，所以使用安卓手机的朋友如果在微信内置浏览器里无法欣赏音乐的，可以点击右上角分享按钮选择复制连接，然后到QQ浏览器里打开。二、设计个性的音乐播放器使用浏览器默认的播放器肯定不够高端大气上档次，因此我们要自

5、己设计一款音乐播放器，美工这块我就不写了，自己发挥吧重点说下静态页面的结构。在sae里打开audio.html文件，头部比前面的H5基本结构多了很多代码，不要慌我给大家解释下。第4行是定义该网页的类型和编码，决定浏览器将以什么形式、什么编码读取这个文件，这里是告诉浏览器这是一个html文件，用的UTF8编码。第5行是这个页面的标题，会显示在浏览器的头部。第6行是文档作者，就是我了。第7行是控制屏幕大小的，width 页面宽度，nitial-scale - 初始的缩放比例，minimum-scale - 允许用户缩放到的最小比例，user-scalable - 用户是否可以手动缩放。这段代码用来

6、限制播放器的显示大小与手机屏幕一致，不能缩放。第9行是载入样式文件第10、11、12行载入JS插件，其中common.js里是播放器控制JS代码，具体内容会放到最后一期讲。进入页面主题首先是播放器结构，如下图：第16行是整个播放器的容器，规定了这个播放器的大小和位置，以及播放器的背景，这里提下如何把播放器绝对居中，CSS代码如下：position:absolute;padding:5px;top:50%; margin-top:-155px; left:50%;width:300px;height:300px; margin-left:-155px;此容器为相对于网页绝对定位，宽高为300px

7、，内边距5px，整体大小为310*310px，距离页面的顶部和左边都为50%距离，然后通过外边距负155px让容器向顶部和左边移动一半的容器大小，这样就绝对居中了。第17行唱片封面，叠加了一个背景图片。这里可能有人说为什么不直接用播放器容器背景图做唱片封面，这里主要是唱片封面是经常要切换的，网速不给力的话会出现一块空白不好看。第18、19行喜欢按钮、列表按钮，也是使用了绝对定位，当然这个定位是相对于播放器容器的。第20行播放控制区块，这里有个黑色渐变背景图案叠加在唱片封面图片，以突出显示歌曲标题、名字等信息。第21、22行歌曲标题和歌手名字第23到28行播放进度条区域，这里有两个div，pgb

8、uf是歌曲缓存载入进度，pgtime是歌曲播放进度。第29到30行前进、播放和后退播放按钮，播放按钮可以通过playbtn、pausebtn两个样式切换变为暂停按钮。第37行歌曲的说明。第38行Audio播放组件，这里给组件命名为song_player，然后就可以通过JS来控制这个播放组件，进行播放暂停操作，获取播放进度等。第39行页面底部的版权信息然后是歌曲列表部分，如下图：第40行歌曲列表容器，自适应宽度，默认隐藏。第41行歌曲列表栏头部分第43-45行列表内容类型切换以及列表关闭按钮第48到57行歌曲列表内容第58到65行列表翻页控制区最后的展现效果如下：前端静态页面基本就是这些，下一章

9、讲管理后台、与前端页面数据交换接口的开发。-ZTalk福利-秋风起正是吃蟹好时节，为了回馈ZTalk的朋友们，老贼去打了顺丰优选的秋风。 你肯定知道顺丰在送快递，但现在顺丰也在卖食品了，顺丰优选是由顺丰速运集团倾力打造，以全球优质安全美食为主的网购商城带给您更有品质的生活享受！活动时间：10月1日-10月7日活动规则：回复“顺丰优选”参与抽奖活动奖品：价值388的阳澄湖大闸蟹提货券一份（共三份）ZTalk每日一曲，输入“V”欣赏，输入“ZBOX”享受奢华影音体验：Keane的Sunshine，把你捂在手里，只有傻瓜才会让你离去-ZTalk推荐-Blues【ID：bluemidou】YY语音产品经理BLUES，原腾讯高级产品经理，窥探互联网产品背后的真实故事，文章写产品策划、产品运营、用户研究、数据挖掘所有文章

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论