分享手淘过年项目中采用到的前端技术

作者：大漠 日期：2018-02-27 点击：15794
mobile
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

当你陪着家人嗑着瓜子，和家人一起看着春晚，顺便拿着手淘参与春晚抽奖互动的时候，杭州还有两百多程序员还奋战在一线当中。现在年也过完了，奖也抽了，红包也拿了。也该好好回来工作的时候了。这次很荣幸，自己能参与手淘过年项目（红包开光和春晚互动项目）的项目中，虽然仅仅参与其中的部分工作，但事后感觉有些东西还是应该总结总结的，为之后的项目做准备。那么简单的来总结一下，我自己在参与项目中用到的一些前端技术。

这些技术其实也并不是什么鲜为人知的技术栈，因为这些技术点已经出现很久了，只不过大家习惯了自己的开发模式，加上项目时间紧，怕尝试新的东西。事实上我自己也是如此，害怕使用这些技术点，给项目带来其他的风险（本来项目时间就很紧），庆幸的是，接下来了到的一些东西，经住了项目的考验，虽然当中踩过一些坑，但总算是无惊无险。

过年项目

手淘过年项目，事实上分为两个，其中一个叫红包开光，另一个是春晚抽奖的互动项目。

上面两张图分别是红包开光和春晚互动的主界面视觉图。如果你参与过手淘过年互动的活动中，这两个界面应该对您来说并不会太陌生。

经过团队同学一起讨论，这次两个项目都基于Vue来开发，Vue只是一个JavaScript库而以，选择他并不没有太多的主要原因，而是想让团队在今后的项目开发的时候，JavaScript库能趋于统一，从而慢慢在项目中有所沉淀与积累。基于这个原因，我在其中主要做的事情，在这个脚手架中（也就是Vue-cli的基础）添加了以下三个部分：

  • PostCSS插件
  • vw适配方案
  • iPhone X 适配

PostCSS插件

在互动脚手架中，目前已配置的PostCSS插件主要有：

PostCSS插件的配置

Webpack项目的.postcssrc.js最终的PostCSS插件的配置:

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     
            viewportHeight: 1334,   
            unitPrecision: 3,       
            viewportUnit: 'vw',  
            selectorBlackList: ['.ignore', '.hairlines'], 
            minPixelValue: 1,   
            mediaQuery: false   
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

对于这些PostCSS插件所起的作用和怎么配置，在其对应的GitHub上都有详细的描述。这里简要的描述一下，为什么在我们的项目中会采用这些PostCSS的插件：

postcss-import和postcss-url两个主要是用于处理引入的文件和资源路径的处理以及工作模式。如果你的项目也使用的是Vue，并且配置了vue-loader，并且配置了相关的参数，那就就具有类似的功能。

autoprefixer主要用来处理浏览器的私有前缀，这个已经是大家经常使用的一个PostCSS插件了。这里需要提出的是，如果你的项目中使用了postcss-next和cssnano，那么autoprefixer插件可以不引入，而且在postcss-next和cssnano两者中选择其一关闭autoprefixer，因为这两个插件都集成了autoprefixer插件的特性。

postcss-cssnext其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。其包含的特性主要有：

有关于cssnext的每个特性的操作文档，可以点击这里浏览。

cssnano主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。不过你也可以使用

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css/taobao-2018-year.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部