2021.10.14业务总结

小咪咪 2022-09-16 03:44 134阅读 0赞

1.  移动端安全高度问题

@constant: constant(safe-area-inset-top);
    	@env: env(safe-area-inset-top);
    	@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) { 
    	  .container { 
    	    :global(.navbar) { 
    	      padding-top: calc(~"@{ constant} * 2");
    	      padding-top: calc(~"@{ env} * 2");
    	      height: calc(~"@{ constant} * 2 + 0.9rem");
    	      height: calc(~"@{ env} * 2 + 0.9rem");
    	    }
    	  }
    }

1.  ios键盘弹起，出现底部空白问题

/*js监听ios手机键盘弹起和收起的事件*/
    	document.body.addEventListener('focusin',()=>{ //软键盘弹起事件
    			console.log("键盘弹起");
    	});
    	document.body.addEventListener('focusout',()=>{ //软键盘关闭事件
    			document.body.scrollTop=0;
    			document.documentElement.scrollTop=0;
        });

1.  android键盘弹起可视区域高度变化做兼容

letoriginalHeight=document.documentElement.clientHeight||document.body.clientHeight;
    	window.onresize=function(){ 
    		//键盘弹起与隐藏都会引起窗口的高度发生变化
    		letresizeHeight=document.documentElement.clientHeight||document.body.clientHeight;
    		this.isFixedBottom=resizeHeight>=originalHeight;
    	}

1.  图片分享

import html2canvas from "html2canvas"; // html2Canvas插件
    
    function shareComponents(ref, bgLoaded, qrLoaded, shareFun){ 
        // 图片加载完成截图
        if (bgLoaded && qrLoaded) { 
            html2canvas(ref, { 
                scale: 2,
                useCORS: true,
                allowTaint: true,
                width: ref.share.clientWidth,
                height: ref.share.clientHeight,
                dpi: window.devicePixelRatio * 4
            }).then(canvas => { 
                setTimeout(() => { 
                    const context = canvas.getContext('2d');
                    context.mozImageSmoothingEnabled = false;
                    context.webkitImageSmoothingEnabled = false;
                    context.msImageSmoothingEnabled = false;
                    context.imageSmoothingEnabled = false;
                    imgUrl = canvas.toDataURL();
                    // 分享options
                    const options = { 
                        shareData: { 
                            image: imgUrl
                        },
                        typeList: typeList,
                        callback: (res) => { 
                            // 分享之后的callback
                        }
                    }
                    // 调起分享
                    shareFun(options)
                }, 500)
            }).catch(err => { 
                alert('分享图片生成失败，请稍后重试')
            });
    
        } else { 
            setTimeout(() => { 
                // 图片未加载完成，延迟执行截图
            }, 500)
        }
    }

1.  滚动一定高度