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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

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

过年项目

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

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

经过团队同学一起讨论,这次两个项目都基于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-importpostcss-url两个主要是用于处理引入的文件和资源路径的处理以及工作模式。如果你的项目也使用的是Vue,并且配置了vue-loader,并且配置了相关的参数,那就就具有类似的功能。

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

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

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

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

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

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

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