去年11月中旬，随着有赞VantWeapp库1.0版本的正式发布，我们的小程序也立刻按照官方的步骤开始升级依赖库。但是在微信开发者工具中发现VantWeapp对苹果的底边适配消失了。在不了解cssenv的实际作用和开发工具适配的情况下，胡乱发了一个issue，记录在这里，以备日后参考和学习。safe-area其实因为我之前的工作主要集中在js和pc上，而忽略了css和移动端，所以并没有深入了解这个safearea。面对新手机的刘海和胡须，开发移动端的小伙伴不得不适应手机机型。如果当前使用的界面是整屏，则当前显示会被遮挡。当然，其实对于小程序来说，大多数情况下是不需要考虑上面的刘海的。一方面是因为现在小程序的navigationBar已经实现了适配的功能，不需要考虑头部的问题。另一方面，小程序在没有特殊要求的情况下不需要横屏显示。但是对于底部的小胡子，我们需要给它一个34px的高度。在1.0版本之前，VantWeapp的适配是这样的。以下代码相对于源码有所改动，但基本逻辑是在组件中获取当前手机信息。//缓存数据letcache=null;//获取安全区域的数据（带缓存）functiongetSafeArea(){returnnewPromise((resolve,reject)=>{if(cache!=null){resolve(cache);}else{wx.getSystemInfo({success:({model,statusBarHeight})=>{constdeviceType=model.replace(/\s/g,'-');constiphoneNew=/iphone-x|iPhone11|iPhone12/i.test(deviceType);cache={isIPhoneX:iphoneNew,statusBarHeight};resolve(cache);},fail:reject});}});}//提供外部函数调用exportconstsafeArea=({safeAreaInsetBottom=真，safeAreaInsetTop=false}={})=>Behavior({properties:{safeAreaInsetTop:{type:Boolean,value:safeAreaInsetTop},safeAreaInsetBottom:{type:Boolean,value:safeAreaInsetBottom}},lifetimes:{attached():void{getSafeArea().then(({isIPhoneX,statusBarHeight})=>{//当前数据中有判断数据this.setData({isIPhoneX,statusBarHeight});});}}});Behavior相当于Vue中的mixin，提供了isIPhoneX的数据，我们把代码也复制过来，以便在业务中使用。具体可以参考Component构造函数，方便小程序自身开发。env，为了获取safe-area可用空间，我们要写很多js代码判断当前手机型号，然后通过data驱动在wxml中添加css。单从代码可维护性的角度来说，为了处理safe-area，我们做了一些不必要的耦合，也增加了代码的复杂度。当前代码也无法处理未来可能出现的更多手机型号。因此，浏览器提供了另一个功能env来帮助我们处理这一切，但在此之前，我们需要使用meta让网页使用整个屏幕。
