“喜茶Go”微信小程序新零售商业实战案例经验分享-概述

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43687095/article/details/87446857

作者介绍:郝天翔,10年移动互联网软件行业经验,全栈高级软件工程师,微信生态开发先行者,主要参与智慧城市新零售电商领域方案的设计与实施,本次分享商业案例“喜茶Go”已落地于全国多座城市,其小程序产品设计方案受到商家与消费者的广泛一致好评。

前言


 微信小程序虽然已诞生至今2年有余,但体验感较好的精品小程序却寥寥无几,究其原因,主要是企业运营人员对微信小程序的把握能力不足,合格的前端人才缺失导致,由于多年在教育领域的工作经历,让我萌生了在CSDN开博客分享商业实战教程案例的想法,希望尽绵薄之力,提高我国前端技术人才的技术水平,让运营者增进对小程序产品形态的认识,助力商家O2O口碑引流拓客,为零售业务开辟新的收入渠道。

 

项目概述


“喜茶Go微信小程序”是“喜茶HEYTEA”品牌门店线下场景下,用于让消费者免排队,可微信下单的商城系统,推出为迎合2018年时下年轻人时尚的调性,也为打造新式茶饮行业网红店而推出的拳头型战略产品。

喜茶品牌
知名网红茶饮品牌红极一时

功能简介


“喜茶Go微信小程序”是一个点单工具,本着方便、好用、有调性的初衷,我设计的第一版小程序交互流程非常简单,消费者进入小程序后,可以在小程序中选择茶饮种类,进一步选择具体茶饮品种、茶饮规格、自取外卖,确认下单支付后,追踪订单状态,完成整个下单取货流程。

 

第一版设计稿,点单首页面

 

点单页面特点是简洁明快,以纯白色为底色,功能按钮辅助色为:#DBA86F(淡雅咖啡色)、#343434 (深灰黑),广告运营位图片有8rpx圆角矩形效果。“选规格”按钮圆角半径为50rpx。

左侧分类菜单,顶部“自取/外卖”状态切换

 

需要注意的是:左侧主分类菜单、顶部“自取/外卖”状态切换是 定制控件 ,小程序组建库中,并没有现成的控件可供使用。因此,对前端定制化开发技术要求较高,尤其是CSS的灵活运用。

 

“更多/收起”切换按钮,覆盖整个首页

 

覆盖层页面的实现,合理利用了手机屏幕有限的空间,为店铺详情展示开辟了充分的位置。

 

选规格,遮罩层控件定制

这部分定制控件更多,有:半透明遮罩层、弹出框、单选、多选、加入购物袋按钮。根据所搭配规格,实时计算价格,合并加入购物袋,统一支付下单。

至此,我们对首页界面有了一个初步认识,下面的商业实战案例教程,将带大家一步步实现“喜茶Go”这个商业案例,交流学习微信小程序技术。

 

专题预告


第二期:“喜茶Go”微信小程序视图层界面的实现   将详细介绍两个看似全新的东西WXML和WXSS,如何布局控件位置

第三期:小程序逻辑层业务的实现    将详细介绍数据绑定方面的灵活运用,控制WXSS实现下单效果

 

 

展开阅读全文

没有更多推荐了,返回首页