在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入  chrome://inspect/#devices可以用手机USB调试,打开)

eg:

  1. 软键盘弹出时会影响到的页面布局
  2. 如果在iframe中用到透明罩,想用fixed却失效?
  3. angular中如果用$scope控制布尔值来添加/删除类时,获取这个节点的坑
  4. 在获取用户头像等信息在canvas画图时加载的顺序

暂时遇到的问题,比较磨人一点(之后遇到会慢慢补充)

  1. 对于h5页面产品,输入框弹出软键盘,页面布局可能会压缩(安卓手机存在,苹果无这bug),我用的单位是vh,所以会出现这个令人头疼的bug,知道了这个原因,先对万恶的安卓系统吐槽一遍,然后将高度的单位全部用vw替换,因为宽度不会变啊,调试一遍,跑一下页面,问题解决.

  2.很多公司都喜欢开发的页面使用iframe,所以也引发了很多的问题,就比如说你想用吸顶条或者一个透明遮罩层的时候,习惯了想用position:fixed的我,用了fixed失效,狠狠的对公司使用这个iframe吐槽一遍,但是也只能老老实实的想其他办法去解决,想过利用js去控制高度等等处理办法,最傻的是用绝对定位,高度100%,然后安卓和苹果总有一个会出现问题,真是内心吐槽一万遍,这两个系统就是爱搞特殊化,而且是手指向上拖动手机屏幕时,遮罩层也跟着跑,扎心!!!

这个时候,灵光乍现的我想到了一个绝佳的办法,那就是js控制获取手机屏幕高度,用哪个方法呢?毕竟有好多,诸位别慌,且跟着往下看:

  1. 网页可见区域高:document.body.clientHeight
  2. 网页可见区域宽:document.body.clientWidth
  3. 网页可见区域宽:document.body.offsetWidth (包括边线的宽)
  4. 网页可见区域高:document.body.offsetHeight (包括边线的宽)
  5. 网页正文全文宽:document.body.scrollWidth
  6. 网页正文全文高:document.body.scrollHeight
  7. 网页被卷去的高:document.body.scrollTop
  8. 网页被卷去的左:document.body.scrollLeft
  9. 网页正文部分上:window.screenTop
  10. 网页正文部分左:window.screenLeft
  11. 屏幕分辨率的高:window.screen.height
  12. 屏幕分辨率的宽:window.screen.width
  13. 屏幕可用工作区高度:window.screen.availHeight
  14. 屏幕可用工作区宽度:window.screen.availWidth

  看到这么多,你也许会想问我,这么多,都可以吗?那我偷偷的告诉你,你可不要告诉别人哦,用前面的12种方法获取到的你总会发现不是安卓闹小脾气就是ios要逗你玩,这个时候,你要掌握游戏的规则,不要被它所主导你的思维,我也就不墨迹了,这时候,你应该选用   13/14   屏幕的可用工作区宽高,这个算是都兼容

HTML:
<!-- you are jackpot -->
<div class="{{ isJackpot ? 'yJackpot' : 'nJackpot' }}" style="">
<div class="closeJackpot" ng-click="isJackpot = !isJackpot;">&times;</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

  明天会更好~~

h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题的更多相关文章

  1. 微信测试号开发之九 微信网页授权:页面获取用户openid

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78981369 一:配置接口 注意:这里填写的是域名(是一个字符串),而不是URL,因此 ...

  2. [小程序]微信小程序登陆并获取用户信息

    1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid ...

  3. H5开发中的问题总结

    最近公司做了一个出行日记的项目,里面的页面十多页,天天加班,做到吐血.总体来说,写页面的时候虽然是十多个页面,其实难度还是在每个页面的特效上.公司是易到用车,出行日记的页面在APP里有生成入口,有兴趣 ...

  4. H5开发中的故障

    本篇博文会不断的收录我在做H5页面时遇到的问题以及解决方案,当然有的问题,我也没有遇到好的解决方案,所以如果你有解决的办法,请务必不吝赐教! H5开发中的故障       微信APP返回按钮不刷新页面 ...

  5. 如需在APP中使用腾讯QQ登陆,需提前申请获取腾讯QQ的APPKEY和APPSecret。

    如需在APP中使用腾讯QQ登陆,需提前申请获取腾讯QQ的APPKEY和APPSecret. 申请流程如下: 步骤1:登陆腾讯开放平台.链接地址: http://open.qq.com/ . 步骤2:填 ...

  6. vue开发中利用正则限制input框的输入(手机号、非0开头的正整数等)

    我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入 ...

  7. 第八篇 :微信公众平台开发实战Java版之如何网页授权获取用户基本信息

    第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...

  8. php 实现微信模拟登陆、获取用户列表及群发消息功能示例

    本文实例讲述了php实现微信模拟登陆.获取用户列表及群发消息功能.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  9. Android之QQ授权登录获取用户信息

    有时候我们开发的app须要方便用户简单登录.能够让用户使用自己的qq.微信.微博登录到我们自己开发的app. 今天就在这里总结一下怎样在自己的app中集成QQ授权登录获取用户信息的功能. 首先我们打开 ...

随机推荐

  1. Linux系统——日志文件

    日志文件的分类 (1)内核及系统日志 由系统服务rsyslog管理,根据去主配置文件/etc/rsyslog.conf中的设置决定将内核消息及各种系统程序消息记录到什么位置. /etc/rsyslog ...

  2. java中全面的单例模式多种实现方式总结

    单例模式的思想 想整理一些 java 并发相关的知识,不知道从哪开始,想起了单例模式中要考虑的线程安全,就从单例模式开始吧. 以前写过单例模式,这里再重新汇总补充整理一下,单例模式的多种实现. 单例模 ...

  3. 一次http请求中的信息

    什么是Http 一次http传输,是由请求报文和响应报文来完成的 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World W ...

  4. ubuntu 可能的依赖包,安装过程中根据需要安装

    /*************依赖包安装****************/下面是可能的依赖包,安装过程中根据需要安装 build-essential - libglib2.-dev libpng3 li ...

  5. [acm/icpc2016ChinaFinal][CodeforcesGym101194] Mr. Panda and Fantastic Beasts

    地址:http://codeforces.com/gym/101194 题目:略 思路: 这题做法挺多的,可以sam也可以后缀数组,我用sam做的. 1.我自己yy的思路(瞎bb的) 把第一个串建立s ...

  6. docker for spark

    项目需求,有一个spark-streaming的程序,读kafka的数据,需要构建一个不使用hadoop的spark 以下建立的镜像参考网络,可以稍加修改就可以使用不同的版本. 可单独启动master ...

  7. 【Unity3D】使用MD5值,确保本地Sqlite数据库内容没有被篡改

    Sqlite的应用场景 在判断是否使用存储格式为Sqlite模式的标准,我们的标准是内容只读.也就是说,除非发布者修改Sqlite内容,玩家只有读取的权限. 换个角度说,Sqlite里面的数据都是游戏 ...

  8. Linux查找含有某字符串的文本文件

    转自:http://www.cnblogs.com/wangkongming/p/4476933.html 如果你想在当前目录下 查找"hello,world!"字符串,可以这样 ...

  9. jmeter+http接口测试

    参考: http://blog.csdn.net/github_27109687/article/details/71968662   Jmeter接口测试+压力测试 http://blog.csdn ...

  10. Java伙伴系统(模拟)

    参考:https://labrick.cc/2015/10/12/buddy-system-algorithm/ 代码过烂 不宜参考. output: [operating.entity.Heap@4 ...