NextFramework与主流工具的集成（二）——改进优化

前言：项目于2018年12月24日成功上线，经过两周的在线bug、UI和代码优化，问题得到解决。问题少了，所以我们会改进和优化这个项目。布局优化高清配置antd-mobile自定义配置antd-mobileToast组件封装布局优化布局优化在本文→【移动端优雅布局实践】()中完成，而我最终采用的解决方案是——绝对脱离文档流（的优势就是设置容器的高度：100%可以直接继承html窗口的高度）。HD配置问题开始做项目前发现自己对dpr（devicepixelradio）和scaling了解不多，项目开发时都写成1。后来验收UI的时候发现并没有实现UI设计师期望的细线效果。解决这个问题的时候才认真看了一下dpr的介绍。这篇详细解释dpr的文章写的不错。从概念上讲，dpr是设备的物理像素与设备的独立像素（即CSS逻辑像素，以下简称CSS逻辑像素）的比值。例如：iPhone6的分辨率为750*1334，window.screen.width（css逻辑像素）为375，则dpr=750/375=2又如：iPhoneX的分辨率为1125*2436，window.screen.width（css逻辑像素）也是375，所以dpr=1125/375=3那么dpr有什么用呢？在此之前先提一个我们移动端必备的meta标签：device-width在html中也被解释为理想（基础）视口宽度，即320px、375px、414px，其中px是指css像素，通常也称为逻辑像素；那么我们可以想到html中css像素的显示大小应该等于pt和dp在NA中的显示大小。通过这个meta标签，我们可以实现initial-scale=1初始缩放100%，进而实现眼睛在设备上看到的css逻辑像素=1px的1px，也就是body{width:375px;}在iPhone6上可以显示满整个竖屏宽度。那么问题来了，如果我们要给一个盒子添加一条1px的细线：border-bottom:1pxsolidred;。那么在iPhone6上真的是1px吗？iPhone6真机截图（宽702px）：可以看出高度明显多了1个像素。这是dpr造成的，因为iPhone6的dpr是2，缩放比例是100%，1px的css渲染是2px的物理像素。这是我们UI爸爸和产品不满意的地方。那么接下来如何解决这个问题呢？解决办法是根据设备的dpr，以及根节点的font-size动态计算缩放因子。//rem.js(function(doc,win){vardocEl=doc.documentElement,dpr=Math.min(win.devicePixelRatio,3);dpr=window.top===window.self?dpr:1;//当被iframe引用时，缩放被禁用varscale=1/dpr,resizeEvt='orientationchange'inwindow?'orientationchange':'resize';docEl.dataset.dpr=dpr;varmetaEl=doc.createElement('meta');metaEl.name='viewport';metaEl.content='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover';docEl.firstElementChild.appendChild(metaEl);varrecalc=function(){varwidth=docEl.clientWidth;//如果大于1280，则计算为1280if(width/dpr>1280){width=1280*dpr;}//px:rem=100:1docEl.style.fontSize=100*(width/375)+'px';};recalc();if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);})(文档,窗口);如果显示富文本元素，需要对富文本元素的样式进行处理。为了适应不同的模型，使用rem该单元是一个不错的选择，我们一直在使用它。除了根据dpr计算initial-scale，我们还调整了根节点的font-size，使其在缩放时可以恢复到窗口大小（因为需要缩放，所以rem的基数应相应增加）。这样，我们上面写的border-bottom:1pxsolidred;在这个方案中显示：哇哦，可以看出明显瘦了，这就是我们UI爸爸想要的O(∩_∩)O~~但是这样的设置和ant-design-mobile结合的时候，就是发现ant-design-mobile的组件都缩水了。原来它的元素都是以px为单位的，而我们在缩放之前并没有将它的最小单位乘以对应的基数。那么，我们需要为它配置一个基地！antd-mobile自定义配置查看文档发现ant-design-mobile提供了主题配置，它提供了一个@hd变量作为长度的基本单位，默认值为1px。我们只需要将@hd设置为0.01rem即可解决问题。这个主题配置的文档是一个webpack项目的例子。那么如何在next.js项目中完成自定义配置呢？我在next.js的例子中没有找到我需要的例子，但是我找到了两个相关的例子：一个是with-antd-mobile，一个是with-ant-design-less。第二个是ant-design的自定义主题配置，所以你应该可以按照这个例子添加with-antd-mobile自定义主题配置。这里提一下，这个with-antd-mobile是在我写完Next框架和主流工具的集成后，更新了next.config.js的配置，这里也改成了最新的配置。安装解析Less与normalize.css的包npmi@zeit/next-less@zeit/next-csslessless-vars-to-js-S修改.babelrc配置{"presets":["next/babel"],"plugins":[["import",{"libraryName":"antd-mobile","style":true}]]}修改next.config.js配置/*eslint-disable*/constwithCSS=require('@zeit/next-css');constwithSass=require('@zeit/next-sass');constwithLess=require('@zeit/next-less');constlessToJS=require('less-vars-to-js');constfs=require('fs');constpath=require('path');//antd-custom.less文件所在的位置constthemeVariables=lessToJS(fs.readFileSync(path.resolve(__dirname,'./antd-custom.less'),'utf8'));//修复：当nodeif(typeofrequire!=='undefined')需要.less文件时防止错误]=文件=>{};require.extensions['.css']=file=>{};}module.exports=withCSS(withLess(withSass({lessLoaderOptions:{javascriptEnabled:true,modifyVars:themeVariables}})));在项目下新建Less变量文件antd-custom.less@hd:0.01rem；重启项目，大功告成。antd-mobileToast组件封装了antd-mobile的Toast.info()组件，在显示时，背景无法点击消失，与原来的Toast有些区别。为了体验，这里做了一层封装，用于隐藏点击背景时的Toast。//utils/toast.jsstaticinfo=(content,duration,onClose,mask)=>{Toast.info(content,duration,onClose,mask);consttoastElement=document.getElementsByClassName('am-toast-mask')[0];toastElement&&toastElement.addEventListener('click',()=>{Toast.hide();onClose&&onClose();});};antd-mobile的loading图片在Android上有点奇怪，这里也定义了Loading：staticloading=(content,duration,onClose,mask)=>{Toast.info(