wxapp_starbucks-仿星巴克微信小程序.zip

清凉一夏 来点一杯星巴克吧! 当我们还在家中吹着空调敲着代码吃着西瓜的时候,可能你的她还在炎炎夏日下大汗淋漓,打开这个小程序,为她点上一杯冰镇的星巴克,后续的故事就不用再说了把,作为还在起跑线上的全栈的学习者,初试微信小程序,花了四天左右的时间初步的完成了这个小程序,这个小程序吸引我的真的就是颜啊(身为颜控的我),有木有觉得很美观,下面我们就一起看下这个demo吧 如果各位看官觉得还行不妨点个赞哦项目源码: GitHub 求小星星鼓励项目工具及文档1.微信web开发者工具:微信小程序官网 一款很好用的小程序编辑软件2.开发文档:微信小程序必备无敌文档 你想要的都在里面页面注册 app.json {"pages":[ "pages/index/index", 星巴克用星说 主页 "pages/detail/detail", @all 我想对你们说 "pages/giftcard/giftcard", 礼品卡详情页 ], }项目功能已实现的功能scroll-view等基础事件tab切换及其高亮事件添加购物车的显示隐藏功能付款的显示隐藏及其高亮的功能未实现的功能门店列表(显示最近30家门店)功能地图定位功能具体功能预览1.tab切换在tab切换上,做到了大图切换和小图高亮,是不是效果还不错具体效果图:如下 这里底部闪光是因为录屏软件的问题哦_实现代码:如下 <view class="tab-poster"> <image class="tab-poster-photo" model="aspectFit" src="{{poster}}"></image> </view> <view class="tab"> <image class="gift" src="../../images/gift.png"></image> <text class="tab-text">选择卡面</text> <view class="flex"> <view class="box-photo" bindtap="btn_change1"> <image src="{{image1}}" class="box-image"></image> </view> <view class="box-photo" bindtap="btn_change2"> <image src="{{image2}}" class="box-image"></image> </view> <view class="box-photo" bindtap="btn_change3"> <image src="{{image3}}" class="box-image"></image> </view> <view class="box-photo" bindtap="btn_change4"> <image src="{{image4}}" class="box-image"></image> </view> <view class="box-photo" bindtap="btn_change5"> <image src="{{image5}}" class="box-image"></image> </view> <view class="box-photo" bindtap="btn_change6"> <image src="{{image6}}" class="box-image"></image> </view> </view>使用点击事件就可以实现这些功能啦,有没有很简单 2.giftcard在点击左边一部分的时候是跳转礼品卡详情3.购物付款功能在点击右边部分的➕和➖就会修改对应的数量了,当然哦,下面的结账也会显示你所购买的数量和总价哦,是不是觉得符合现代化简约美呀这是这个小程序最闪光点也最需要思考的地方啦,仔细一看发现是不是操作后有很多小的变化,也是这小小的变化让整个小程序更美观了这是选择礼品的布局样式 <view class="cart-box"> <image class="money" src="../../images/money.png"></image> <text class="gift-text">选择礼品</text> <!-- wx:for 渲染列表 并判断高亮事件--> <view wx:for="{{carts}}" class="{{item.num>0?'green':'gifts-box'}}"> <!-- 跳转礼品卡详情页--> <navigator class="gifts-content" url="../giftcard/giftcard"> <view class="gifts-title-box"> <text class="gifts-title">{{item.title}}</text> </view> <view class="gifts-price-box"> <text class="gifts-price">{{item.price}}元</text> </view> </navigator> <!-- 增加减少数量按钮--> <view class="numCount numCount_active" wx:if="{{item.num>0}}"> <view class="numMin-box" bindtap="minusCount" data-index="{{index}}"> <text class="numMin" >-</text> </view> <view class="num-box"> <text class="num">{{item.num}}</text> </view> <view class="numAdd-box" bindtap="addCount" data-index="{{index}}"> <text class="numAdd" > </text> </view> </view> <view class="numCount" wx:if="{{item.num==0}}"> <view class="numAdd-box-0" bindtap="addCount" data-index="{{index}}"> <text class="numAdd-0" > </text> </view> </view>这是计算总价代码实现 getTotalPrice(){ let carts = this.data.carts; let total = 0; for(let i =0 ;i<carts.length;i ){ if(carts[i].selected){ total = carts[i].num * carts[i].price; } } this.setData({ carts:carts, totalPrice:total.toFixed(2) }); },这是增减数量代码实现 点击➕ num加1 点击➖号 num减1 // 增加数量addCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; num = num 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); this.getTotalNum(); },// 减少数量minusCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; if(num <= 0){ return false; } num = num - 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); this.getTotalNum(); },总结1. 做小程序最主要的就是看文档,一定要看文档,重要的事情说三遍,看文档!看文档!看文档!2. 因为没有什么js基础,所以踩了很多坑,代码也不够简洁,优化,以后多加改善




















































































- 1
- 2
- 3
- 4
- 5
- 6
- 12

- 粉丝: 339
- 资源: 2万+

我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
已下载
下载帮助



