开发 | 用 4 天时间,他撸了一个「星巴克」同款小程序

文 | 但成立

当我们还在家中吹着空调,敲着代码,吃着西瓜的时候,可能你的她还在炎炎夏日下大汗淋漓……

打开这个小程序,为她点上一杯冰镇的星巴克,后续的故事就不用再说了吧?。

作为还在起跑线上的全栈的学习者,我初试了微信小程序开发,花了四天左右的时间初步完成了高仿「星巴克用心说」的小程序。

这个小程序吸引我的真的就是颜啊(身为颜控的我),有木有觉得美观呢?

下面,知晓程序(微信号 zxcx0101)就来带一起看下,这个 demo 是如何实现的。

关注「知晓程序」微信公众号,回复「开发」,获取小程序开发文章精选。

项目工具及文档

开发小程序,必不可少的是两个东西。

第一个是「微信 Web 开发者工具」,一款很好用的小程序编辑软件;第二个就是小程序必备的超级无敌开发文档,有关小程序开发,你想要知道的,都在这里面。

注册页面

这个小程序一共有三个页面,分别是主页、「@all 我想对你们说」的发礼品卡页面,以及礼品卡详情页。

分别将这三个页面,在 app.json 里进行注册:

小程序功能实现

目前,这个小程序代码已经实现了 scroll-view 等基础事件、视图切换事件,以及购物车、付款(模拟)实现等等。

但是,有关地图和门店显示相关功能,还没有完成。

1. 视图切换

在视图切换功能上,做到了大图切换和小图高亮。是不是效果还不错呢??

具体效果图如下。

只需要在相应图片上,绑定点击事件,就可以做到视图切换了。具体代码实现如下:

2. 礼品卡(Giftcard)

在礼品卡购买页面,点击列表某个项目的左侧,会跳转到礼品卡详情页面

购物付款功能

在选择数量的时候,点击列表项目右边的「+」和「-」就可以进行修改。

当然,下面的结账也会显示你所购买的数量和总价喔。是不是觉得符合现代化简约美呀。?

这是这个小程序最闪光点也最需要思考的地方啦。仔细一看,可以看到操作后有很多小的变化,也是这小小的变化让整个小程序更美观了。?

这部分的视图层代码实现:

计算总价的逻辑实现,也很简单:

对于点击「+」、「-」做到数量变更的实现,我是这样做的:

关注「知晓程序」微信公众号,回复「源码」,获取 demo 源码及原文地址。

总结

对于初次尝试上手小程序开发,我有两点经验可以总结出来:

  • 做小程序最主要的就是看文档,一定要看文档,重要的事情说三遍,看文档!看文档!看文档!
  • 因为没有什么 JavaScript 基础,所以踩了很多坑,代码也不够简洁。以后一定会多加改善。

如果有更多小程序问题和经验希望探讨,欢迎随时联系我!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-08-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发|只需 10 分钟!让你的小程序轻松接入「微信支付」

你可能需要花半天时间看微信支付文档,再花半天调试支付签名,最后还得加两天时间搞定支付回调通知以及和自己的业务结合。

1612
来自专栏wblearn

我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

最近一直在做项目,感觉没什么分享的所以一直没写。 今天不上班,就把最近做的一个demo做个简单的总结。

971
来自专栏小文博客

“息屏提醒”你的小米手机用上了吗

1842
来自专栏用户2442861的专栏

Java调用ffmpeg工具生成视频缩略图实例

 FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件)。它提供了录制、转换以及流化音视频的完整解决方...

3651
来自专栏web前端教室

【亲测】最好用的4个JavaScript编辑器

然后我在讲课的时候发现同学们用的编辑器各不相同,有的同学用的是editplus,有的甚至用的是老掉牙的DW,这我就不能忍受了,今天晚上给大家推荐几款比较Ok的编...

1670
来自专栏liulun

基于.net开发chrome核心浏览器【一】

说明: 这是本系列的第一篇文章,我会尽快发后续的文章。 源起   1.加快葬送IE6浏览器的进程     世界上使用IE6浏览器最多的地方在中国     中国...

2785
来自专栏Youngxj

[seo]新建网站做好SEO优化必看教程

1907
来自专栏Zephery

谈谈个人网站的建立(七)—— 那些建站必备的插件

欢迎访问我的网站http://www.wenzhihuai.com/ 。感谢,如果可以,希望能在GitHub上给个star,GitHub地址https://gi...

4347
来自专栏编程微刊

2018前端越来越流行的的技术

1555
来自专栏Jerry的SAP技术分享

Jerry的SAP UI5框架代码自学教程

SAP UI5对View元素基于jQuery的操作方式,使得其学习曲线相对Angular/React来说比较平缓,至少对于我个人而言是这样。对于已经有jQuer...

28310

扫码关注云+社区

领取腾讯云代金券