最近接到一个 H5 的活,乍一看挺简单的,做起来就不是那么回事了。
接下来说说我的踩坑之路。
1、页面里面要求有一条会自动延长的不规则曲线,就如这样。
开始我一听甲方说要这种效果,我是不敢接这个活的。大家应该都知道,这条曲线如果用 canvas
或者 svg
画出来,不得一年也得半载,这是会出人命的!好在我问了下我们之前公司的 UI 小姐姐,她就回了我一句话: ease!画个 gif 图就好了!
于是乎以为这个最难的问题都解决了,剩下的都好说了。。。哈哈哈
2、甲方给出的UI图是横向的,没明确要求打开页面就是横屏播放。
之前确实没有做过横屏的移动端网页,想当然的以为打开页面时,把手机横过来,页面也就自动横过来了。所以我就那么做了。结局是在交给甲方后,甲方明确要求打开页面就是横屏播放。那我能怎么样啊,钱在人家手里攥着,我只能改了!
① 竖屏页面改横屏页面的开始
第一个念头就是 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>
②
页面是横过来了,意味着原来的 rem 布局就全乱了。当时情况紧急,一看 rem 用不上了,立马用 百分比布局 进行修改,当时的 css 中一堆乱码,放眼望去,rem 和 % 就那么混在其中。就这么整到了凌晨 5 点。我也想认真画页面啊,可是时间不等我,只能先这样了。
3,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 中写入任何的本地存储。
最后一次增加了一张图片,结果上传至服务器的时候把图片名字给写错一个字母,导致图片加载不出来。后来把路径更改之后,再次用之前打开过该页面的手机浏览时,发现图片依旧没有加载出来,然而电脑就可以。各种找原因啊,这是为啥呢?
当时我想可能是缓存的问题吧,就把手机重启了,结果还是加载不出来。后来换个手机,一切正常。然后我手动清理手机缓存之后,一切正常了。
后来在网上查阅大量资料,发现是微信搞的鬼。因为移动端从头到尾是用微信浏览的网站,找到以下解决办法:
1.jpg?rand=<?php echo rand(1000,50000); ?>
<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" />
以上这些方法,我一个也没试过,因为这只是我接的一个外快而且工期特别紧(外加阑尾炎),前后也就五天就上线了,不具备测试条件。如读者遇到这种问题,还请挨个试一下看看,总有一款适合你。
文章浏览阅读2.9k次,点赞8次,收藏14次。测试主要做什么?这完全都体现在测试流程中,同时测试流程是面试问题中出现频率最高的,这不仅是因为测试流程很重要,而是在面试过程中这短短的半小时到一个小时的时间,通过测试流程就可以判断出应聘者是否合适,故在测试流程中包含了测试工作的核心内容,例如需求分析,测试用例的设计,测试执行,缺陷等重要的过程。..._测试过程管理中包含哪些过程
文章浏览阅读870次,点赞16次,收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段,对政府政务进行数字化改革,提高政府工作效率,提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展,政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域,包括政策决策、政府服务、公共安全、社会治理等。在这些领域,人工...
文章浏览阅读219次,点赞2次,收藏4次。系统主要的用户为用户、管理员,他们的具体权限如下:用户:用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试,并且查看相关成绩用户可以进行错题集的整理管理员:管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析,并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件
文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式,UML2功能更强大,但是两者生成过程差别不大1.建立Test工程,如下图,uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图
文章浏览阅读174次。需求:一个topic包含很多个表信息,需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project,只有data和name。因为担心data里面会空值,所以根同事商量,让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区,proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka
文章浏览阅读380次。原标题:Java Spring中同时访问多种不同数据库 多样的工作要求,可以使用不同的工作方法,只要能获得结果,就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题,有时是必须把数据归档到某种数据仓库中,有时是要把数据变更推送到第三方数据库中。使用Spring框架时,使用单一数据库是非常容易的,但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库
文章浏览阅读3.6k次,点赞9次,收藏25次。本案例描述了晶振屏蔽以及开关电源变压器屏蔽对系统稳定工作的影响, 硬件设计时应考虑。_eft电路图
文章浏览阅读1.1k次。对于物料价格的更改,可以采取不同的手段:首先,我们来介绍MR21的方式。 需要说明的是,如果要对某一产品进行价格修改,必须满足的前提条件是: ■ 1、必须对价格生效的物料期间与对应会计期间进行开启; ■ 2、该产品在该物料期间未发生物料移动。执行MR21,例如更改物料1180051689的价格为20000元,系统提示“对于物料1180051689 存在一个当前或未来标准价格”,这是因为已经对该..._mr21 对于物料 zba89121 存在一个当前或未来标准价格
文章浏览阅读7.4k次,点赞3次,收藏13次。[文章导读]联想启天M420是一款商用台式电脑,预装的是win10系统,用户还是喜欢win7系统,该台式机采用的intel 8代i5 8500CPU,在安装安装win7时有很多问题,在安装win7时要在BIOS中“关闭安全启动”和“开启兼容模式”,并且安装过程中usb不能使用,要采用联想win7新机型安装,且默认采用的uefi+gpt模式,要改成legacy+mbr引导,那么联想启天M420台式电..._启天m420刷bios
文章浏览阅读2.7k次,点赞2次,收藏9次。一,为什么要冗余数据互联网数据量很大的业务场景,往往数据库需要进行水平切分来降低单库数据量。水平切分会有一个patition key,通过patition key的查询能..._保证冗余性
文章浏览阅读88次。是时候闭环Java应用了 原创 2016-08-16 张开涛 你曾经因为部署/上线而痛苦吗?你曾经因为要去运维那改配置而烦恼吗?在我接触过的一些部署/上线方式中,曾碰到过以下一些问题:1、程序代码和依赖都是人工上传到服务器,不是通过工具进行部署和发布;2、目录结构没有规范,jar启动时通过-classpath任意指定;3、fat jar,把程序代码、配置文件和依赖jar都打包到一个jar中,改配置..._那么需要把上面的defaultjavatyperesolver类打包到插件中
文章浏览阅读909次。1.得下载一个番茄插件,按alt+g才可以有函数跳转功能。2.不安装番茄插件,按F12也可以有跳转功能。3.进公司的VS工程是D:\sync\build\win路径,.sln才是打开工程的方式,一个是VS2005打开的,一个是VS2013打开的。4.公司库里的线程接口,在CmThreadManager.h 里,这个里面是我们的线程库,可以直接拿来用。CreateUserTaskThre..._番茄助手颜色