网站性能检测评分
注：本网站页面html检测工具扫描网站中存在的基本问题，仅供参考。
电商实战网站
电商运营实战技巧（1） 运营视频课程
电商运营，关注这个领域的朋友如果是电商行业多年从业者，肯定觉得有自己的一套打发，如果是新入行的朋友，每天在工作岗位兢兢战战，不断学习去提升自己运营能力。其实，电商运营无论是老司机还是新上车的朋友，都会有一个感觉，就是电商运营“多而杂”、“苦且累”、“电商的从业者赚得都是辛苦钱”，作为一个曾经在电商平台和品牌方都磨炼过的人，想和朋友们分享一些电商运营心得。
电商运营，和产品运营、市场运营、用户运营、数据运营、销售运营、类目运营等运营派系有所区别，但又和这些运营能力与技巧柔在一起的综合运用，因为电商运营涉及到的内容太多，它以销售运营为基础，会综合运用到产品运营、用户运营，数据运营，市场运营、类目运营各门各派的技巧，如果你觉得自己在运营知识方面欠缺，可以从以上不同的维度去专攻某项能力与技巧，比如数据分析、营销创意等，今天主要分享电商运营几项关键指标和技能。
一、首先要深刻理解电商运营的本质
很多同学在工作时常常埋头工作，“沉迷工作”，不能理清楚自己做工作的效果，或者有效果了之后不知道怎么总结和投入到下一下工作中去，常常感到工作很累，但没有提升，不知道努力的方向，出现这些问题实质就是对电商运营的本质没有抓清楚。
电商运营，可以从2块来拆分理解，一个是电商，一个是运营，电商比较好理解，简单点说就是通过淘宝/天猫/京东等线上平台销售产品，触达消费者，完成商品的销售，这是狭义上的电商，广义上还可以包括微店、互联网金融的商品销售模式、O2O线上到线下的商品销售模式、分期电商模式等，但是其中的本质是：线上平台——触达消费者——消费者完成购买——实现营收，每个环节都是可拆分具体实施运作。
运营，字面理解为通过一些列运作、经营来是实现盈利，关键词是“运作”，需要跳出来思考，或者具有相当宏观的视野，清楚的知道通过什么样的运作能达到什么样的目标，清晰的了解每项运作的可行性和成本，每一项工作开展前，都以目标为导向，选择合适的到达路径，然后去运作相关的资源，完成目标。
从整体来看，电商运营，实质就是为了实现盈利目标，通过对线上平台的一系列资源运作售卖商品，关键是如何更好的调动资源、如何更有效的触达消费者和用户，促使消费者完成购买，如果上升到更高的层次，在消费者完成购买后，会形成对商品背后的品牌认知，这是品牌运作层面。
二、理解电商运营的思维
个人认为，电商运营思维可以从几个方面：立场思维：一是平台型思维，即从电商平台角度出发理解商业，二是品牌思维，即从自身品牌业务角度出发。运营思维：一是数据化思维，一切以数据为基础分析业务；二是用户思维，从消费者视角看待运营内容，提升用户体验；
以上四种思维，看起来比较复杂，其中的核心是资源的运作和调度，既要从平台和品牌内部立场思考，争取平台和内部资源支持干成销售，也需要通过对资源充分的运作和调度，提高资源使用效率，达成销售。
思维层面可能会比较深奥，经验较少可能理解起来比较困难，但这不能阻挡电商运营者对自身要求提高，掌握思维方式可以有更宏观的视角，更清晰的“套路”，更加理解经营的本质，提升自然就会很快。
三、电商运营关键指标
每一项运营类目都会有衡量的业务指标，下面拆解一些，可以从中找到共性。
APP产品运营衡量指标：APP下载量、用户访问时长、新增用户数量、用户留存、用户日活跃度、渠道推广ROI等；
用户运营衡量指标：新增用户量、用户活跃度、用户画像、好评度、用户生命周期、拉新和复购、用户推广ROI等；
市场运营衡量指标：市场用户覆盖量、市场触达率及深度、市场推广ROI，用户反馈度、市场活动效率、市场坪效率（每平方公里市场收益率）；
目前，随着O2O模式越来成熟，城市运营的概念和衡量指标也逐渐清晰：城市市场规范度、城市市场与全国市场协调度、城市用户总量与品牌/产品用户量比（即城市用户覆盖率）、用户增量、城市用户日/月活跃量、品牌业务在城市合作广度及深度、城市业绩达成率等。
从以上不同类型的运营关键衡量指标可以看出，数据化、用户量、用户体验、推广ROI（效果数据）是运营共同的衡量标准，因此，电商运营也不例外，不管是考核衡量指标，还是运营抓取的关键点，都与三个词有关：销售数据、用户数据、流量数据及转化（ROI），下期将从这几个关键词来一一分析怎样做好电商运营！
微信小程序电商实战-首页（下） 小程序视频课程
上一篇：微信小程序电商实战-首页（上）
好了，上一期我们把首页搜索、导航栏和广告轮播给做完了，那么接下来会继续完成我们首页的剩余部分，先看我们要实现的效果吧！
本期实现效果图.gif
本期我们要实现首页的实时热销榜、福利专场和左下方个人中心+购物车的布局。
一、实时热销榜
话不多说，先看实际效果图：
实时热销榜.gif
这个模块我们主要用到 scroll-view 视图容器，顾名思义就是滚动视图，当布局的内容超过屏幕容器的时候可以滑动开查看遮盖的内容，scroll-view可滚动视图区域属性详解：
scroll-x 允许横向滚动（类型：Boolean，默认值：false）
scroll-y 允许纵向滚动（类型：Boolean，默认值：false）
upper-threshold 距顶部/左边多远时（单位px），触发 scrolltoupper 事件（类型：Number，默认值：50）
lower-threshold 距底部/右边多远时（单位px），触发 scrolltolower 事件（类型：Number，默认值：50）
scroll-top 设置竖向滚动条位置（类型：Number）
scroll-left 设置横向滚动条位置（类型：Number）
scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素（类型：String）
scroll-with-animation 在设置滚动条位置时使用动画过渡（类型：Boolean，默认值：false）
更多请属性详情请查看微信官方scroll-view视图容器
home.wxss
.category-title { display: flex; flex-direction: column; margin-top: 20rpx; margin-bottom: 0rpx; padding: 0px 10px;}.category-title .title{ font-size: 14px; font-weight:900;}.category-title .line_name{ font-size: 10px; color: #98989f; display: flex; justify-content:space-between;/**两边对齐**/}.goods { display: flex;}.goods-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; color: #333;}.goods-image{ width: 280rpx; height: 300rpx;}.goods-item text { font-size: 25rpx;}.goods-item p{ font-size: 30rpx;}
home.wxml
实时热销榜每15分钟更新一次查看全部 >{{item.name}}￥{{item.newprice}}
home.js
// 实时热销榜 goodsHotItems: [ { goodId: 0, name: '天然植物唇膏2.4g', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdc/272/707/8870197248301707272/2/6922446703595-5_360x456_90.jpg', newprice: "32.00", oldprice: "59.00", }, { goodId: 1, name: '流光水彩唇膏升级版 3.5g', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/03/8/4fb444e7-3417-4f4a-b5a1-7f1d884c610f_218x274_70.jpg', newprice: "89.00", oldprice: "99.00", }, { goodId: 2, name: '卡姿兰蜗牛氧气泡泡面膜', url: 'bill', imageurl: 'https:////a3.vimage1/upload/merchandise/pdcvis/2017/08/24/167/28c3726f-dfdd-4a59-89ac-b79ea8e24f40_218x274_70.jpg', newprice: "139.00", oldprice: "159.00", }, { goodId: 3, name: '特效润肤露', url: 'bill', imageurl: 'http://mz.djmall.xmisp/files/product/20161201/14805828016.jpg', newprice: "30.00", oldprice: "80.00", }, { goodId: 4, name: '御泥坊 | 美白嫩肤泥浆...', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/11/03/98/f34a6c251abf45e5ba60a645f13c7757-5.jpg', newprice: "79.00", oldprice: "80.00", }, { goodId: 5, name: '日本资生堂洗颜', url: 'bill', imageurl: 'http://mz.djmall.xmisp/files/product/20161201/148058328876.jpg', newprice: "30.00", oldprice: "80.00", } , { goodId: 6, name: '玉兰油 | 水感透白光塑钻...', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/05/19/2/e5de903ab5ba4a6492f3574469fdfca9-5.jpg', newprice: "145.00", oldprice: "324.00", } ]
好了大家赶紧运行一下效果看看吧~~~
福利专场
先看效果：
福利专场效果图.gif
home.wxml
福利专场每天早10晚8准时上新 {{item.name}} ￥{{item.newprice}}
￥{{item.oldprice}}
{{item.discount}}折
home.wxss
/**=========福利专场============**/.welfares{ display: flex; justify-content: left; flex-direction: row; flex-wrap: wrap; margin:10px 5px;}.welfares-good{ height: 560rpx; width: 47%; margin:0px auto; margin-bottom: 20px; position: relative; display: inline-block; font-size: 24rpx;}.welfares-image{ width: 100%; display: inline-block; border: 1px #eee solid;}.welfares-good .product-name{ color: #000; height: 28px; text-align:left; margin: 0px 5px; margin-bottom: 5px;}.product-price-wrap .product-price-new{ color: #e80080; margin-left:5px; font-weight:900;}.product-price-wrap .product-price-old{ color: #888; text-decoration: line-through; padding-left: 2px;}.product-price-wrap .discount{ position: absolute; right: 5px; background-color: #000; color: #fff;}
home.js
// 福利专场 goodsWelfareItems: [ { goodId: 0, name: '泊尔崖蜜蜜光面膜（5片盒装）', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg', newprice: "86", oldprice: "88", }, { goodId: 1, name: '透无瑕矿物养护两用粉饼#03', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg', newprice: "147.00", oldprice: "150.00", }, { goodId: 2, name: '川水水光面膜（5片盒装）', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg', newprice: "86.00", oldprice: "88.00", }, { goodId: 3, name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋', url: 'bill', imageurl: 'http://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg', newprice: "97.00", oldprice: "99.00", }, { goodId: 4, name: '时焕颜亮采套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg', newprice: "398.00", oldprice: "459.00", }, { goodId: 5, name: '雪域眼霜套装', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg', newprice: "238.00", oldprice: "358.00", } , { goodId: 6, name: '凝时鲜颜冰肌水套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg', newprice: "248.00", oldprice: "348.00", } , { goodId: 7, name: '雪润皙白精选三件套', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg', newprice: "348.00", oldprice: "396.00", } ]
好了，以上代码可以将数据渲染出来，接下来会对以上代码做一下调整 可以进行下拉刷新。
home.wxml
努力加载中
home.wxss
.weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; -webkit-animation: weuiLoading 1s steps(12, end) infinite; animation: weuiLoading 1s steps(12, end) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; background-size: 100%;}.weui-loadmore { width: 65%; margin: 1.5em auto; line-height: 1.6em; font-size: 12px; text-align: center;}.weui-loadmore__tips { display: inline-block; vertical-align: middle; color: #888;}
home.js
//加载更多 onReachBottom: function () { console.log('加载更多'); setTimeout(() => { this.setData({ isHideLoadMore: true, goodsWelfareItems: [ { goodId: 0, name: '泊尔崖蜜蜜光面膜（5片盒装）', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg', newprice: "86", oldprice: "88", discount: "8.8", }, { goodId: 1, name: '透无瑕矿物养护两用粉饼#03', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg', newprice: "147.00", oldprice: "150.00", discount: "8.8", }, { goodId: 2, name: '川水水光面膜（5片盒装）', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg', newprice: "86.00", oldprice: "88.00", discount: "8.8", }, { goodId: 3, name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋', url: 'bill', imageurl: 'http://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg', newprice: "97.00", oldprice: "99.00", discount: "8.8", }, { goodId: 4, name: '时焕颜亮采套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg', newprice: "398.00", oldprice: "459.00", discount: "8.8", }, { goodId: 5, name: '雪域眼霜套装', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg', newprice: "238.00", oldprice: "358.00", discount: "8.8", } , { goodId: 6, name: '凝时鲜颜冰肌水套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg', newprice: "248.00", oldprice: "348.00", discount: "8.8", } , { goodId: 7, name: '雪润皙白精选三件套', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg', newprice: "348.00", oldprice: "396.00", discount: "8.8", } ], }) }, 500) }
备注：将上面的 goodsWelfareItems 数据集合可以注释掉，使用onReachBottom
三、个人中心+购物车
home.wxml
home.wxss
/**购物车和个人中心**/.tab-bar{ width: 100px; height: 40px; background-color: #000; border-radius:5px; opacity:0.7; position: fixed; z-index: 2; bottom:10px; left: 8px; display: flex; justify-content:center;}.tab-bar image{ height: 25px; width: 25px; margin: 0px auto; margin-top: 8%;}.tab-bar p{ border:1rpx solid #888; height: 95%; display: inline-block;}
总结
首页的功能基本都已经写完了，大家有什么问题可以可以在下方留言哦。
下期预告
首页已经结束，下期开始做商品详情页啦，先放上效果图初稿一睹芳容！
商品详情效果图.png
备注：具体效果以实际开发为准。
微信小程序电商实战-首页（下） 小程序视频课程
上一篇：微信小程序电商实战-首页（上）
好了，上一期我们把首页搜索、导航栏和广告轮播给做完了，那么接下来会继续完成我们首页的剩余部分，先看我们要实现的效果吧！
本期实现效果图.gif
本期我们要实现首页的实时热销榜、福利专场和左下方个人中心+购物车的布局。
一、实时热销榜
话不多说，先看实际效果图：
实时热销榜.gif
这个模块我们主要用到 scroll-view 视图容器，顾名思义就是滚动视图，当布局的内容超过屏幕容器的时候可以滑动开查看遮盖的内容，scroll-view可滚动视图区域属性详解：
scroll-x 允许横向滚动（类型：Boolean，默认值：false）
scroll-y 允许纵向滚动（类型：Boolean，默认值：false）
upper-threshold 距顶部/左边多远时（单位px），触发 scrolltoupper 事件（类型：Number，默认值：50）
lower-threshold 距底部/右边多远时（单位px），触发 scrolltolower 事件（类型：Number，默认值：50）
scroll-top 设置竖向滚动条位置（类型：Number）
scroll-left 设置横向滚动条位置（类型：Number）
scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素（类型：String）
scroll-with-animation 在设置滚动条位置时使用动画过渡（类型：Boolean，默认值：false）
更多请属性详情请查看微信官方scroll-view视图容器
home.wxss
.category-title { display: flex; flex-direction: column; margin-top: 20rpx; margin-bottom: 0rpx; padding: 0px 10px;}.category-title .title{ font-size: 14px; font-weight:900;}.category-title .line_name{ font-size: 10px; color: #98989f; display: flex; justify-content:space-between;/**两边对齐**/}.goods { display: flex;}.goods-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; color: #333;}.goods-image{ width: 280rpx; height: 300rpx;}.goods-item text { font-size: 25rpx;}.goods-item p{ font-size: 30rpx;}
home.wxml
实时热销榜每15分钟更新一次查看全部 >{{item.name}}￥{{item.newprice}}
home.js
// 实时热销榜 goodsHotItems: [ { goodId: 0, name: '天然植物唇膏2.4g', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdc/272/707/8870197248301707272/2/6922446703595-5_360x456_90.jpg', newprice: "32.00", oldprice: "59.00", }, { goodId: 1, name: '流光水彩唇膏升级版 3.5g', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/03/8/4fb444e7-3417-4f4a-b5a1-7f1d884c610f_218x274_70.jpg', newprice: "89.00", oldprice: "99.00", }, { goodId: 2, name: '卡姿兰蜗牛氧气泡泡面膜', url: 'bill', imageurl: 'https:////a3.vimage1/upload/merchandise/pdcvis/2017/08/24/167/28c3726f-dfdd-4a59-89ac-b79ea8e24f40_218x274_70.jpg', newprice: "139.00", oldprice: "159.00", }, { goodId: 3, name: '特效润肤露', url: 'bill', imageurl: 'http://mz.djmall.xmisp/files/product/20161201/14805828016.jpg', newprice: "30.00", oldprice: "80.00", }, { goodId: 4, name: '御泥坊 | 美白嫩肤泥浆...', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/11/03/98/f34a6c251abf45e5ba60a645f13c7757-5.jpg', newprice: "79.00", oldprice: "80.00", }, { goodId: 5, name: '日本资生堂洗颜', url: 'bill', imageurl: 'http://mz.djmall.xmisp/files/product/20161201/148058328876.jpg', newprice: "30.00", oldprice: "80.00", } , { goodId: 6, name: '玉兰油 | 水感透白光塑钻...', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/05/19/2/e5de903ab5ba4a6492f3574469fdfca9-5.jpg', newprice: "145.00", oldprice: "324.00", } ]
好了大家赶紧运行一下效果看看吧~~~
福利专场
先看效果：
福利专场效果图.gif
home.wxml
福利专场每天早10晚8准时上新 {{item.name}} ￥{{item.newprice}}
￥{{item.oldprice}}
{{item.discount}}折
home.wxss
/**=========福利专场============**/.welfares{ display: flex; justify-content: left; flex-direction: row; flex-wrap: wrap; margin:10px 5px;}.welfares-good{ height: 560rpx; width: 47%; margin:0px auto; margin-bottom: 20px; position: relative; display: inline-block; font-size: 24rpx;}.welfares-image{ width: 100%; display: inline-block; border: 1px #eee solid;}.welfares-good .product-name{ color: #000; height: 28px; text-align:left; margin: 0px 5px; margin-bottom: 5px;}.product-price-wrap .product-price-new{ color: #e80080; margin-left:5px; font-weight:900;}.product-price-wrap .product-price-old{ color: #888; text-decoration: line-through; padding-left: 2px;}.product-price-wrap .discount{ position: absolute; right: 5px; background-color: #000; color: #fff;}
home.js
// 福利专场 goodsWelfareItems: [ { goodId: 0, name: '泊尔崖蜜蜜光面膜（5片盒装）', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg', newprice: "86", oldprice: "88", }, { goodId: 1, name: '透无瑕矿物养护两用粉饼#03', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg', newprice: "147.00", oldprice: "150.00", }, { goodId: 2, name: '川水水光面膜（5片盒装）', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg', newprice: "86.00", oldprice: "88.00", }, { goodId: 3, name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋', url: 'bill', imageurl: 'http://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg', newprice: "97.00", oldprice: "99.00", }, { goodId: 4, name: '时焕颜亮采套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg', newprice: "398.00", oldprice: "459.00", }, { goodId: 5, name: '雪域眼霜套装', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg', newprice: "238.00", oldprice: "358.00", } , { goodId: 6, name: '凝时鲜颜冰肌水套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg', newprice: "248.00", oldprice: "348.00", } , { goodId: 7, name: '雪润皙白精选三件套', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg', newprice: "348.00", oldprice: "396.00", } ]
好了，以上代码可以将数据渲染出来，接下来会对以上代码做一下调整 可以进行下拉刷新。
home.wxml
努力加载中
home.wxss
.weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; -webkit-animation: weuiLoading 1s steps(12, end) infinite; animation: weuiLoading 1s steps(12, end) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; background-size: 100%;}.weui-loadmore { width: 65%; margin: 1.5em auto; line-height: 1.6em; font-size: 12px; text-align: center;}.weui-loadmore__tips { display: inline-block; vertical-align: middle; color: #888;}
home.js
//加载更多 onReachBottom: function () { console.log('加载更多'); setTimeout(() => { this.setData({ isHideLoadMore: true, goodsWelfareItems: [ { goodId: 0, name: '泊尔崖蜜蜜光面膜（5片盒装）', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg', newprice: "86", oldprice: "88", discount: "8.8", }, { goodId: 1, name: '透无瑕矿物养护两用粉饼#03', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg', newprice: "147.00", oldprice: "150.00", discount: "8.8", }, { goodId: 2, name: '川水水光面膜（5片盒装）', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg', newprice: "86.00", oldprice: "88.00", discount: "8.8", }, { goodId: 3, name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋', url: 'bill', imageurl: 'http://a3.vimage1/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg', newprice: "97.00", oldprice: "99.00", discount: "8.8", }, { goodId: 4, name: '时焕颜亮采套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg', newprice: "398.00", oldprice: "459.00", discount: "8.8", }, { goodId: 5, name: '雪域眼霜套装', url: 'bill', imageurl: 'https://a4.vimage1/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg', newprice: "238.00", oldprice: "358.00", discount: "8.8", } , { goodId: 6, name: '凝时鲜颜冰肌水套装', url: 'bill', imageurl: 'https://a2.vimage1/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg', newprice: "248.00", oldprice: "348.00", discount: "8.8", } , { goodId: 7, name: '雪润皙白精选三件套', url: 'bill', imageurl: 'https://a3.vimage1/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg', newprice: "348.00", oldprice: "396.00", discount: "8.8", } ], }) }, 500) }
备注：将上面的 goodsWelfareItems 数据集合可以注释掉，使用onReachBottom
三、个人中心+购物车
home.wxml
home.wxss
/**购物车和个人中心**/.tab-bar{ width: 100px; height: 40px; background-color: #000; border-radius:5px; opacity:0.7; position: fixed; z-index: 2; bottom:10px; left: 8px; display: flex; justify-content:center;}.tab-bar image{ height: 25px; width: 25px; margin: 0px auto; margin-top: 8%;}.tab-bar p{ border:1rpx solid #888; height: 95%; display: inline-block;}
总结
首页的功能基本都已经写完了，大家有什么问题可以可以在下方留言哦。
下期预告
首页已经结束，下期开始做商品详情页啦，先放上效果图初稿一睹芳容！
商品详情效果图.png
备注：具体效果以实际开发为准。
