您好,欢迎来到网暖!
?
当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

Egret之手机异形屏自适应(微信)

来源:网络整理 浏览:301次 时间:2020-01-25
一 : 前言

手机异形屏的出现 , 给手游自适应带来了新的麻烦 。对于Game前端来说 , 奇葩的是 , 刘海屏 / 打孔屏 / 水滴屏,将来还不知道出现个什么屏 , 更为奇葩的是 , 刘海吧 , 大小长度不一样 ; 打孔吧 , 位置不一样 ; 水滴屏 , 大小不一样 。
SO , 本篇Blog , 给出了普遍的做法 : 将刘海,打孔,水滴全部部分去掉,不显示任何内容。当然读者可以更具不同的机型 , 定制的自适应异形屏。
Egret之手机异形屏自适应(微信)

二 :方案

1, 利用wx.getSystemInfo , 可以得到客户端手机的型号
2 , 因为各个奇葩的孔大小不一样,所以有一个配置表:

{  "screen": [    {      "model" : [ "Iphone 11 Pro" , "Iphone 11", "Iphone X" , "Iphone XR" , "Iphone XS MAX" , "HuaWei MATE 30 Pro 5G" , "HuaWei MATE 30 Pro" , "HuaWei MATE 20 Pro",        "AXON 9 Pro" , "Galaxy S10" , "MI 8SE"      ],      "defect" : 55    },    {      "model" : [ "HuaWei P30 Pro" , "Mi 8" , "Honor 20 Pro" , "VIVO Z3X" , "OPPO A5", "HuaWei P20 Pro","HuaWei Mate 20 5G",        "HuaWei MATE 30" , "Galaxy Note10+ 5G" , "HuaWei P20" , "MI 6 Pro"      ],      "defect" : 45    },    {      "model" : ["Honor 10" , "Honor V10" , "MI 9" , "MI 9 Pro" , "MI 9 Pro 5G" , "VIVO X23" , "VIVO Z25" , "VIVO Z5x" , "VIVO Z3" , "VIVOZ3I",        "VIVO Y7S" , "VIVO Y3" , "VIVO Y91" , "VIVO U3" , "VIVO U3X" , "VIVO U1" , "OPPO RENO ACE" , "OPPO RENO Z" , "OPPO R17 PRO" , "OPPO R17",        "OPPO R15X" , "OPPO A11" , "OPPO A11X" , "OPPO A9X" , "OPPO A9" , "OPPO A7" , "OPPO K5" , "OPPO K1" , "MI CC9" , "REDMI NOTE 7 PRO",        "REDMI NOTE 7" , "REDMI 7" , "MI 9 SE" , "REDMI 8" , "REDMI 8A" , "REDMI NOTE 8 PRO" , "REDMI NOTE 8" , "HuaWei NOVA 5 Pro","HuaWei NOVA 5I Pro",        "Honor V20" , "Honor NOVA 5Z" , "Honor 20" , "Honor Play3E" , "Honor Play3" , "Honor 20S" , "HuaWei MATE 20 X 5G" , "HuaWei NOVA 5" , "Honor 20 Pro",        "Honor 20I" , "HuaWei MATE 20" , "HuaWei NOVA 4E" , "HuaWei NOVA 4" , "HuaWei P30" , "HuaWei P30 Pro" , "Honor 8X MAX" , "OnePlus 7" , "OnePlus 7T",        "AXON 10 Pro", "AXON 10 Pro 5G" , "Blade A7" , "Blade V10" , "Blade V10 VITA" , "Galaxy A90 5G" , "Galaxy A50S" , "Samsung Galaxy M30s",        "MI CC9E"      ],      "defect" : 35    }  ]}

其中 , defect的意思是 : 屏幕上端刘海、孔、水滴所占用的最大的高度 PX
3,在Layer中(eui.Group)重写 , 注意与手机model匹配(这里不写):
measure , updateDisplayList2个函数 , 重点是updateDisplayList函数 , 如下:

    protected measure(): void {        if (!this.$layout) {            this.setMeasuredSize(0, 0);            return;        }        this.$layout.measure();    }    protected updateDisplayList(unscaledWidth:number, unscaledHeight:number):void{        if (this.$layout) {            if( egret.Capabilities.runtimeType == egret.RuntimeType.WXGAME ){                DeviceUtils.MobilePhoneDefect( ( $defect : number ) : void => {                    if( $defect != null && $defect > 0 ){                        this.$layout.updateDisplayList(unscaledWidth, unscaledHeight - $defect);                    }else{                        this.$layout.updateDisplayList(unscaledWidth, unscaledHeight);                    }                } );            }else{                this.$layout.updateDisplayList(unscaledWidth, unscaledHeight);            }        }        this["updateScrollRect"]();    }

注意 :
Egret之手机异形屏自适应(微信)
4,调整Layer的Y坐标

    private resetLocation2BaseEuiLayer(layer: egret.DisplayObjectContainer) : void{        if( egret.Capabilities.runtimeType == egret.RuntimeType.WXGAME ){            DeviceUtils.MobilePhoneDefect( ( $defect : number ) : void => {                if( $defect != null && $defect > 0 ){                    layer.y = $defect;                }            });        }    }

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览?#23380;?#22823;的?#24418;?#38376;户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网?#25945;迤教ā?#36890;过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的?#24418;?#38376;户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点?#24405;?#31361;发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐?#28982;?#21160;空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛?#28982;?#21160;交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的?#24418;?#36164;讯,内容覆盖国内外突发新闻?#24405;?#20307;坛赛事、娱乐时?#23567;?#20135;业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽?#26723;?0多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com
?
奇妙马戏团试玩
内衣哥婴儿用品哪个更赚钱 gta办公室 赚钱 陕西快乐10分钟任意3 赚钱鸡汤的照片 青海快3和值走势图 黑龙江36选7开奖中奖规则 怎样赌龙虎稳赢 双色球截止时间 重庆时时开奖结果现场视频 和小啄赚钱相同的平台 北京pk10官方正品网站 时时彩玩几个码好 青海11选5推荐号码 元典专业版真的赚钱吗 杭州麻将5块微信群 新欢乐麻将怎么卖金币