最近有幸接到一个 H5 的活，周五谈好需求，说下周一就要效果出来，乍一看挺简单的，但是做起来就不是那么回事了。接下来说说我的踩坑之路。
一、页面里面要求有一条会自动延长的不规则曲线，就如这样。
运动的曲线.gif
开始我一听甲方说要这种效果，我是不敢接这个活的。大家肯定都知道，这条曲线如果用
canvas 或者 svg 画出来，不得一年也得半载，况且我也只是个初级选手而已，这是会出人命的！好在我问了下我们公司的 UI 大哥，他就回了我一句话： ease！画个 gif 图就好了！于是乎以为这个最难的问题都解决了，剩下的都好说了。。。
二、甲方给出的UI图是横向的，没明确要求打开页面就是横屏播放
之前确实没有做过横屏的移动端网页，想当然的以为打开页面时，把手机横过来，页面也就自动横过来了。所以我就那么做了。结局是在交给甲方后，甲方明确要求打开页面就是横屏播放。那我能怎么样啊，钱在人家手里攥着，我只能改了！吃一堑长一智吧，谁让自己没经验呢。当时是晚上10点，我改到凌晨5点（前一天晚上加班到凌晨2点）。
- 竖屏页面改横屏页面的开始
第一个念头就是transform: rotate(90deg)，嗯，页面是横过来了。当时用的 rem 布局，按理说横过来之后，应该是占满全屏的，可结果并不是这样，无论我把高调成100%，还是宽调成100%，都占不满全屏。只能去google了。发现transform: rotate(90deg)不是这么直接写进去的。而是这样：
css文件：
//需要用到媒体查询
// screen 彩屏设备
// orientation:portrait 竖屏(竖屏设置上让其横屏播放)
@media screen and (orientation: portrait) {
#box {
-webkit-transform:rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
js文件：
<script>
//获取屏幕可视区宽高
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
//对宽高进行判断
if( width < height ){
$box = $('#box');
//把设备可视区的宽和高赋值给 box 的高和宽。
//这样就实现旋转过来的 box 的宽高跟屏幕的可视区大小一样了
$box.width(height);
$box.height(width);
//执行到这一步时，页面旋转过来成横向的了，宽高也跟屏幕的可视区大小一样了
//但是，发现页面并没有100%在可视区范围内，如下图
//所以需要对 box 进行定位，然后就 ok 了
$box.css('top', (height-width)/2 );
$box.css('left', 0-(height-width)/2 );
}
</script>
出去一块的页面效果.jpg
- 页面是横过来了，意味着原来的 rem 布局就全乱了。当时情况紧急，一看 rem 用不上了，立马用 百分比布局 进行修改，当时的 css 中一堆乱码，放眼望去，rem 和 % 就那么混在其中。就这么整到了凌晨 5 点。我也想认真画页面啊，可是时间不等我，只能先这样了。
三、ios 端背景音乐不能自动播放加自动循环播放
iPhone自动播放音视频，可以通过以下代码解决，但必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效，可能是微信接口对此做了某些限制。
- ios 端背景音乐不能自动播放
var oA = document.getElementsByTagName('audio')[0];
function audioAutoPlay(){
oA.play();
//必须加上微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady",function(){
oA.play();
},false);
}
audioAutoPlay()
- ios 端背景音乐不能自动循环播放
//在标签中加入 `loop` 对 ios 无效，只能通过以下的事件监听进行弥补
var oA = document.getElementsByTagName('audio')[0];
function init(){
oA.addEventListener('ended',loopAudio,false);
}
function loopAudio(){
oA.play();
}
四、清除移动端浏览页面后的缓存
最后这个问题，也算是个大问题了。前提：我并没有在 js 中写入任何的本地存储。
最后一次增加了一张图片，结果后台负责上传至服务器的同志把图片名字给写错一个字母，导致图片加载不出来。后来把路径更改之后，再次用之前打开过该页面的手机浏览时，发现图片依旧没有加载出来，然而电脑就可以。各种找原因啊，这是为啥呢？
当时我想可能是缓存的问题吧，就把手机重启了，结果还是加载不出来。后来换个手机，一切正常。然后我手动清理手机缓存之后，一切正常了。
后来在网上查阅大量资料，发现是微信搞的鬼。因为移动端从头到尾是用微信浏览的网站，找到以下解决办法。
- 用户在用微信打开的网页中，点击右上角的三个点，然后点击里面的刷新就好了。这种方法显然是不可行的。
- 在URL后面拼接随机字串或时间戳，但是有人说 url 后面加随机数 CDN 会失效，加版本号更合理。
- 用PHP写HTML文本，用php以在js css 图片后面加个随机数来解决
1.jpg?rand=<?php echo rand(1000,50000); ?>
- 浏览器貌似是从webview的上层做的缓存。就是如果请求过了这个地址。就会存在本地。之后不取线上了。试试写头信息
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
以上这些方法，我一个也没试过，因为这只是我接的一个外快而且工期特别紧，前后也就五天就上线了，不具备测试条件。如读者遇到这种问题，还请挨个试一下看看，总有一款适合你。
网友评论