vue.js开发外卖App项⽬的内容总结（四）
需求分析
1.从页⾯来分，分为头部和内容区。其中头部包括展⽰的那部分和⼀个浮层。内容区包括评价页，商品页和商家详情页。
js购物车结算代码2.项⽬所做的是SPA单页⾯应⽤，所以切换⼦页⾯时，不会去刷新整个页⾯。
3.对于头部，当我们点击公告和上⾯的数字时，需要展⽰⿊⾊浮层(最后⼀张图⽚)，浮层上有关闭按钮，点击按钮，浮层关闭。
4.对于内容区，最复杂的是商品页，商品页拆分为左右两栏，左侧是商品的分类，右侧是商品的实际列表。当实际商品的展⽰区是哪个分类时，对应左侧的分类⾼亮显⽰。当左右两侧内容超过可视区域时，两边都可以滚动。注意：当滚动右侧内容区，左侧对应的列表也要保持联动的效果。当右侧快速滚动时，左侧也要保持联动的效果。这样实现⼀个外卖app的体验。(将这个滚动当做⼀个技术难点)
5.页⾯底部是⼀个购物车，当我们点击加号，即购买某个商品时候，购物车会⾃动，联动购买的商品总数和⾦额这两部分。当⾦额超过最⼩配送费(⽐如20元起送)时，右下⾓展⽰区结算的按钮，可以点击该按钮进⾏结算。当购物车数量为0时，点击购物车没反应，当购物车数量不为0时，点击购物车时，会显⽰购物车列表。再点击购物车，该列表会隐藏。其中购物车列表也有最⼤⾼度，超过最⼤⾼度时，内部也可以滚动。在购物车列表内部，也可以完成购买流程，其中在内部点击按钮改变商品数量时，内容页的也会有联动的效果。
当我们点击某个具体的商品时，会展⽰该商品详情页的⼀个浮层。该页⾯有⼀个与⼿机屏幕⾃适应的宽和⾼相同的⼤图。接着是商品的⼀些介绍，然后我们点击加⼊购物车按钮，⼀样可以完成购买流程，该数据也是和购物车做联动的。底下是⼀个评论区，我们可以条件查看。当整个浮层页⾯超过⼿机⾼度时，可以滚动。页⾯左侧有⼀个返回按钮，点击返回按钮，该页⾯会关闭。
6.页⾯的第2部分：评论区，当评论区超过⼿机页⾯⾼度时，也可以滚动。
7.页⾯的第3部分：商家详情页，主要是商家的⼀些信息的展⽰。其中页⾯有个收藏的区块，我们可以点击这个按钮，收藏和关注商家。
对于商家实景图，当它的宽度超过⼿机屏幕宽度时，是可以进⾏滚动的。
项⽬⽬录
对于图⽚，⼀般移动端都需要切2x和3x图，以适应不同dpr的⼿机，dpr的定义如下：
在⼀些视⽹膜屏幕，⽐如常说的retina屏幕，dpr都会⼤于1，⽐如：iphone6为2，iphone6plus为3。⽐值越⼤，显⽰的密度越⾼。
为什么要切成单张的图⽚？
通常使⽤css sprites精灵图将多张icon图⽚合成⼀张图⽚，减少图⽚的请求个数，以达到性能优化的⽬的。webpack构建项⽬中，⼀般使⽤单张图⽚，因为webpack的urlLoader会帮我们做图⽚打包的事情，将图⽚先转为base64，然后打包到js⽂件中，这样设置连⼀个图⽚请求的资源都没有。
svg图⽚
svg是⽮量图⽚，它的优势是可以伸缩，当我们将它放⼤时，图⽚质量不会下降。在移动端开发时，通常将⼀些⾊彩单⼀的图⽚做成⽮量图⽚。在代码中，通过使⽤⼯具将svg图⽚转为图标字体⽂件来使⽤，然后在css中引⼊图⽚字体⽂件来使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。