在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入 chrome://inspect/#devices可以用手机USB调试,打开)
eg:
- 软键盘弹出时会影响到的页面布局
- 如果在iframe中用到透明罩,想用fixed却失效?
- angular中如果用$scope控制布尔值来添加/删除类时,获取这个节点的坑
- 在获取用户头像等信息在canvas画图时加载的顺序
暂时遇到的问题,比较磨人一点(之后遇到会慢慢补充)
1. 对于h5页面产品,输入框弹出软键盘,页面布局可能会压缩(安卓手机存在,苹果无这bug),我用的单位是vh,所以会出现这个令人头疼的bug,知道了这个原因,先对万恶的安卓系统吐槽一遍,然后将高度的单位全部用vw替换,因为宽度不会变啊,调试一遍,跑一下页面,问题解决.
2.很多公司都喜欢开发的页面使用iframe,所以也引发了很多的问题,就比如说你想用吸顶条或者一个透明遮罩层的时候,习惯了想用position:fixed的我,用了fixed失效,狠狠的对公司使用这个iframe吐槽一遍,但是也只能老老实实的想其他办法去解决,想过利用js去控制高度等等处理办法,最傻的是用绝对定位,高度100%,然后安卓和苹果总有一个会出现问题,真是内心吐槽一万遍,这两个系统就是爱搞特殊化,而且是手指向上拖动手机屏幕时,遮罩层也跟着跑,扎心!!!
这个时候,灵光乍现的我想到了一个绝佳的办法,那就是js控制获取手机屏幕高度,用哪个方法呢?毕竟有好多,诸位别慌,且跟着往下看:
- 网页可见区域高：document.body.clientHeight
- 网页可见区域宽：document.body.clientWidth
- 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
- 网页可见区域高：document.body.offsetHeight (包括边线的宽)
- 网页正文全文宽：document.body.scrollWidth
- 网页正文全文高：document.body.scrollHeight
- 网页被卷去的高：document.body.scrollTop
- 网页被卷去的左：document.body.scrollLeft
- 网页正文部分上：window.screenTop
- 网页正文部分左：window.screenLeft
- 屏幕分辨率的高：window.screen.height
- 屏幕分辨率的宽：window.screen.width
- 屏幕可用工作区高度：window.screen.availHeight
- 屏幕可用工作区宽度：window.screen.availWidth
看到这么多,你也许会想问我,这么多,都可以吗?那我偷偷的告诉你,你可不要告诉别人哦,用前面的12种方法获取到的你总会发现不是安卓闹小脾气就是ios要逗你玩,这个时候,你要掌握游戏的规则,不要被它所主导你的思维,我也就不墨迹了,这时候,你应该选用 13/14 屏幕的可用工作区宽高,这个算是都兼容
HTML:
<!-- you are jackpot -->
<div class="{{ isJackpot ? 'yJackpot' : 'nJackpot' }}" style="">
<div class="closeJackpot" ng-click="isJackpot = !isJackpot;">×</div>
</div>
CSS:
.yJackpot{
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
background: url(../images/prize.png) center no-repeat;
background-size: 100% 100%;
}
.nJackpot{
position: absolute;
top: 0;
left: 0;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
background: url(../images/prize.png) center no-repeat;
background-size: 100% 100%;
z-index: 99;
width: 0;
height: 0;
}
(Angular1)js: $scope.isJackpot = true; //
setTimeout(function(){
console.log(window.screen.availHeight)
document.querySelector(".yJackpot").style.height = window.screen.availHeight + "px";
document.querySelector(".yJackpot").addEventListener('touchmove',function(e){
e.preventDefault();
},false)
},100)
上述js中你可能注意到我加了一个延时器,你们可能有点疑惑,好吧,这个问题就要和我的问题3挂钩了,怎么说呢,这就是dom加载和js加载先后的问题了,这也算开发中遇到的一个小坑,我很巧妙地加了一个延时,也许有更好的解决办法,只是我暂时还没发现,你们可以评论对我指教(龙在这里不胜感激,因为这是开发接触ng1,还没系统的学过ng1)
而之后的事件监听则是为了实现禁止用户拖动,哈哈,这个方法一瞬间出现在我脑海,瞬间敲出来测试,完美实现.只能说,有些东西还是得熟悉,才能在开发中活学活用
4.接下来要说的就是,获取用户头像之后,在画布上画图出现的问题了,这个比较恶心人,不对,是比较绕,容我小小的吐槽一次~
angular
.module('name')
.factory('myService', myService) function myService($http, $q,$httpParamSerializerJQLike) {
return {
getUserNicknameMyID: getUserNicknameMyID,
getWXShare: getWXShare,
socialLogin: socialLogin
};
//获取用户信息
function getUserNicknameMyID(myId) {
var params = {};
params.myId= myId;
return $http.get(ENDPOINT + 'getUserNickname', {
params: params
})
.then(getUserNicknameComplete)
.catch(getUserNicknameFailed); function getUserNicknameComplete(response) {
return response.data;
} function getUserNicknameFailed(response) {
return $q.reject(response.data);
}
}
//微信分享
function getWXShare() {
var params = {};
params.url = location.href;
params.appid = 'appid'; return $http.get('此处为链接', { params: params })
.then(getWXShareComplete)
.catch(getWXShareFailed); function getWXShareComplete(response) {
return response.data;
} function getWXShareFailed(response) {
return $q.reject(response.data);
} }
function socialLogin(code) {
var params = {};
params.code = code;
params.base = "base";
params.platform = 0;
return $http({
method: 'POST',
url: ENDPOINT + 'socialLogin',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: $httpParamSerializerJQLike(params)
}).then(postSocialLoginComplete)
.
catch(postSocialLoginFailed); function postSocialLoginComplete(response) {
return response.data;
} function postSocialLoginFailed(response) {
return $q.reject(response.data);
}
}
}
以上我在factory中封装的请求方式,但是它是异步请求,所以你不知道你的用户信息在什么阶段获取到这个头像,然后去绘制,我就很傻了,先把所有的绘制完成再去绘制这个头像,问题就出来了,头像要么不绘制,要么就是给你绘制,随意的很,怎么办,只能收拾他,把之前所有的绘制方法各自封装成一个函数,然后一层一层的往下调用,上一步完成才往下走,将头像方法仍在了第一步,再次测试,发现完美解决,心里感觉舒服多了~
当然还有遇到的问题,估计大家使用过h5产品绘图的可能都知道,canvas并不能直接保存在手机,那怎么办呢,调用插件Canvas2Image.js,然后将其封装成一个函数,每次绘制之后都将其调用绘制在指定的img上面,并将img覆盖在canvas上面,实现以假乱真的效果....具体代码如下:
function createImg(canvas) { //在id为img元素内生成图片
var img = document.getElementById("img");
if(!img.hasChildNodes()) {
img.appendChild(Canvas2Image.convertToImage(canvas, 750, 1180, "png"));
} else {
img.removeChild(img.childNodes[0]);
img.appendChild(Canvas2Image.convertToImage(canvas, 750, 1180, "png"));
}
}
好了,写了这么多,也有点困了,看看时间,已经是深夜23:46 记录于2018/03/08
明天会更好~~