篇一：《微信公众平台入门到精通》Vol.20
《微信公众平台入门到精通》Vol.20
2013-10-07 新浪微博：创业阿哲 微信公众号：创业阿哲 私个人微信号：12134453
资料较多，且不断更新中?你若想学习，可以随时私信，我们会在第一时间回复。
前两天上线的ZTalk音乐盒子颇受好评，很多朋友都在后台求教程求源码，虽然这个播放器的开发比较复杂，但既然大家有兴趣，那我就写下开发步骤吧，全部教程会分为三次，里面牵扯的除了PHP编程外，还有JS开发，今天先讲前端静态页面的代码。
源码请在公众号里输入“微信代码”查看下载连接，然后将下载链接自己想办法搞到PC上然后再下载，下载后上传到自己sae里就可以直接在浏览器运行，当然你也可以在微信里通过链接来查看。
建议先下载安装了再看文章，以下是注意事项：
1、audio.html是播放器的前端静态展示页。
2、image目录里是播放器要用到的图片，比如播放、暂停、背景等，和一些JS插件，包括了jquery框架。
3、image目录里可以修改的就是common.css，这个是播放器的样式文件，如果有CSS基础的同学可以自己修改。
4、image目录下可替换图片：
bg0.jpg 页面背景图片
coverbg.png 播放器默认背景图片
第十五章 微信音乐播放器开发
一、Html5的audio组件
HTML5 有两个很炫的元素，就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器，制作一些效果很不错的应用。
在sae的代码管理里新建一个HTML页面，命名为test.html。
html5的页面最基本的框架如下，橙色字为文档声明，有了这个就表明这是一个html5的页面。
在<body></body>中添加一个音频元素： <audio src="http:///yx2011/audio_hi.mp3"
controls="controls" autoplay="autoplay"></audio>
在谷歌Chrome浏览器中访问这个url，效果如下：
controls指的是用户控制界面,所以我们可以在Web页面中看到上面这个操作面板，包括播放和暂停，播放进度条，音量进度条，和进度时间显示等。
autoplay 指的是自动播发已加载的媒体文件，所以我们一打开页面就可以直接播放了
无论是视屏还是音频，都是一个容器文件，包含了一些音频轨道，视频轨道和一些元数据，这些是和你的视频或者音频控件绑定到一块的，这样才形成了一个完整的播放组件。
不过由于html5的标准还不统一，还有部分安卓系统内置浏览器是阉割了这些组件的，所以使用安卓手机的朋友如果在微信内置浏览器里无法欣赏音乐的，可以点击右上角分享按钮选择复制连接，然后到QQ浏览器里打开。
二、设计个性的音乐播放器
使用浏览器默认的播放器肯定不够高端大气上档次，因此我们要自己设计一款
音乐播放器，美工这块我就不写了，自己发挥吧??重点说下静态页面的结构。
在sae里打开audio.html文件，头部比前面的H5基本结构多了很多代码，不要慌我给大家解释下。
第4行是定义该网页的类型和编码，决定浏览器将以什么形式、什么编码读取这个文件，这里是告诉浏览器这是一个html文件，用的UTF8编码。
第5行是这个页面的标题，会显示在浏览器的头部。
第6行是文档作者，就是我了。
第7行是控制屏幕大小的，width 页面宽度，nitial-scale - 初始的缩放比例，minimum-scale - 允许用户缩放到的最小比例，user-scalable - 用户是否可
以手动缩放。这段代码用来限制播放器的显示大小与手机屏幕一致，不能缩放。
第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，内边距5px，整体大小为
310*310px，距离页面的顶部和左边都为50%距离，然后通过外边距负155px让容器向顶部和左边移动一半的容器大小，这样就绝对居中了。
第17行唱片封面，叠加了一个背景图片。这里可能有人说为什么不直接用播放器容器背景图做唱片封面，这里主要是唱片封面是经常要切换的，网速不给力的话会出现一块空白不好看。
第18、19行喜欢按钮、列表按钮，也是使用了绝对定位，当然这个定位是相对于播放器容器的。
第20行播放控制区块，这里有个黑色渐变背景图案叠加在唱片封面图片，以突出显示歌曲标题、名字等信息。
第21、22行歌曲标题和歌手名字
第23到28行播放进度条区域，这里有两个div，pgbuf是歌曲缓存载入进度，pgtime是歌曲播放进度。
第29到30行前进、播放和后退播放按钮，播放按钮可以通过playbtn、pausebtn两个样式切换变为暂停按钮。
第37行歌曲的说明。
第38行Audio播放组件，这里给组件命名为song_player，然后就可以通过JS来控制这个播放组件，进行播放暂停操作，获取播放进度等。
第39行页面底部的版权信息
然后是歌曲列表部分，如下图：
篇二：用案例浅谈微信传播的H5页面设计
用案例浅谈微信传播的H5页面设计
从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。
功能与目标
首先从功能与设计目标来看， H5专题页主要有以下4大类型：
1.活动运营型
为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错，这个页面有点diao噢”的心情点击了分享。
2.品牌宣传型
不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。
3.产品介绍型
聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。 这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有