所以，你不知道微信H5居然有8个隐秘技能？

H5怎么植入第三方音视频？

H5怎么设置文件加密下载？

如何“盗取”别人的H5素材？

以下和H5相关的隐秘技能，是我回顾这半年多在iH5.cn做H5的经验，总结出8个不容易被人发觉，在微信H5上却十分实用的技巧。

·

【1】植入音频

制作一个包含很多音视频的H5，上传素材很耗时间，文件的大小也有限制，但这种问题通过外链就可以解决。

什么外链？必须是音视频的资源地址，也就是下载地址才行。因为HTML5能对音视频提供原生支持，MP3、MP4格式文件一般能在国内浏览器直接播放。

怎么获取这个链接？以虾米音乐为例，感谢有高人破解了它加密的音乐资源地址！方法如下：http://link.hhtjim.com/xiami/1769962750.mp3（把左边这串标识歌曲的数字换成虾米对应歌曲的ID，就得到这首歌的资源位置）。

那歌曲ID在哪里看？点进歌曲名进入内容页，比如上面的《因为爱情》，在地址页中song/后面那串数字1769962750就是ID。

【2】植入视频

使用“网页”功能，可以在H5中嵌入第三方页面。如下，在H5中加入一个“网页”，资源位置写网页地址即可（比如这里是m.baidu.com）。

这和视频有半毛钱关系？别激动，因为国内视频利润空间比音乐大得多，腾讯优酷等网站为防止下载，各种防范手段无所不用其极，“视频”功能播不了非资源类型的视频。还好嵌入地址是有的！要不然微信公众号什么的怎么推送视频？

如下，把这个地址作为网页的资源位置，问题就解决了。

http://player.youku.com/player.php/sid/XMTU0OTY0MTE4NA/v.swf（替换XMTU0OTY0MTE4NA为所需视频ID即可）

https://v.qq.com/iframe/preview.html?vid=l0187ggnc7d（替换l0187ggnc7d为所需视频ID即可）

上面是优酷和腾讯的视频嵌入地址，因为都采用了HTML5网页的响应式设计，能自适应屏幕，所以调整网页长宽也作用于视频。

【3】植入地图导航

地图导航的植入也不复杂，比如百度地图的话，先打开百度地图移动版网页：http://map.baidu.com/mobile/webapp，搜索你的目标地点。

这里用的是“南方传媒大厦”，点击右上角的“地图”，生成一个详情页。复制这个页面的链接，设为网页的资源位置就OK了，效果如下：

【4】一键下载文件

既然说到外链就是下载链接，前面能植入第三方音频，也能直接下载这首歌。如下，设置一个事件，在手机中轻触按钮就能下载音频。

使用“文件”功能，可以上传所有格式的文件，只是为避免服务器过载，文件大小有一定限制。

有时只想上传个简单的PDF，但百度云、金山网盘等玩意儿老要登录烦得很！如果文件不大，可以利用iH5上传文件生成的资源地址，产生一个能点击下载的链接（根据多次实践，我可以偷偷告诉你原始地址是file.ih5.cn+资源位置）。

【5】设置加密下载

当然，百度云这些网盘还有一个好处是能规定密码。可不要小看H5，HTML5有一个优势是能在浏览器验证表单信息，给文件加个密还不简单！

如上，只需要加一个输入框，设置输入的值是你规定的密码，匹配成功时下载文件就行。

【6】锁位置、加书签

H5在不同设备的自适应一直是个麻烦，但如果只是为避免某个按钮超出屏幕，可以加一个横幅，勾选“固定位置”来锁定它。

如上，在页面加一个横幅，设置底部对齐（bottom），纵向偏移-150，就能保证横幅和它包含的按钮一直保持在页脚往上150个像素的位置——即便在电脑上缩放页面比例也能保持。

这样一来，滚动页面时按钮位置也不受影响！还能做在页面顶端放个透明按钮，设置点击横幅时，就对“舞台”做“跳至对象”的动作，跳到透明按钮——相当于把透明按钮当做书签，跳到对应书签的位置。

【7】监测页面打开率

H5页面的打开情况，原理上其实和实时投票差不了多少，只是触发的事件变成了页面显示与否，编辑效果如下：

为了方便理解，我设计了如下逻辑图进行表达：

（1）用数据库整形变量保存页面1的打开次数（或显示次数）；

（2）页面1每显示一次，上面的变量就加1；

（3）页面2放计数器，绑定整形变量，来显示次数的大小；

（4）舞台放时间轴，用来控制打开次数的刷新，每隔三秒更新一次变量。

【8】临摹作品的捷径

最后一个技巧是压轴的。当你看到特别好玩的H5要临摹怎么办？怎么在桌面模拟移动页面布局？可以使用开发者工具（Chrome浏览器快捷键Ctrl+Shift+I）。

比如腾讯TGideas的《移动页面用户行为报告》，打开开发者工具后激活右侧代码上方的设备标识（Toggle device mode，切换设备模式）。

回到左侧页面上方，选择合适的设备（比如iPhone 6S），再刷新页面就可以模拟移动端效果了。

最后点击菜单中的“Source”（源），就可以在目录下翻找图片等缓存出来的原始素材。从素材既可以看出H5的设计框架，又可以保存素材作为临摹备用。

·

看到这里，会不会发现自己错过了很多实用技能？技术改变世界，弯路请少走！