作者介紹：郝天翔，10年移動互聯網軟件行業經驗，全棧高級軟件工程師，微信生態開發先行者，主要參與智慧城市新零售電商領域方案的設計與實施，本次分享商業案例“喜茶Go”已落地于全國多座城市，其小程序產品設計方案受到商家與消費者的廣泛一致好評。

前言

---

?微信小程序雖然已誕生至今2年有余，但體驗感較好的精品小程序卻寥寥無幾，究其原因，主要是企業運營人員對微信小程序的把握能力不足，合格的前端人才缺失導致，由于多年在教育領域的工作經歷，讓我萌生了在CSDN開博客分享商業實戰教程案例的想法，希望盡綿薄之力，提高我國前端技術人才的技術水平，讓運營者增進對小程序產品形態的認識，助力商家O2O口碑引流拓客，為零售業務開辟新的收入渠道。

?

項目概述

---

“喜茶Go微信小程序”是“喜茶HEYTEA”品牌門店線下場景下，用于讓消費者免排隊，可微信下單的商城系統，推出為迎合2018年時下年輕人時尚的調性，也為打造新式茶飲行業網紅店而推出的拳頭型戰略產品。

知名網紅茶飲品牌紅極一時

功能簡介

---

“喜茶Go微信小程序”是一個點單工具，本著方便、好用、有調性的初衷，我設計的第一版小程序交互流程非常簡單，消費者進入小程序后，可以在小程序中選擇茶飲種類，進一步選擇具體茶飲品種、茶飲規格、自取外賣，確認下單支付后，追蹤訂單狀態，完成整個下單取貨流程。

?

第一版設計稿，點單首頁面

?

點單頁面特點是簡潔明快，以純白色為底色，功能按鈕輔助色為：#DBA86F（淡雅咖啡色）、＃343434 （深灰黑），廣告運營位圖片有8rpx圓角矩形效果。“選規格”按鈕圓角半徑為50rpx。

左側分類菜單，頂部“自取／外賣”狀態切換

?

需要注意的是：左側主分類菜單、頂部“自取／外賣”狀態切換是 定制控件 ，小程序組建庫中，并沒有現成的控件可供使用。因此，對前端定制化開發技術要求較高，尤其是CSS的靈活運用。

?

“更多／收起”切換按鈕，覆蓋整個首頁

?

覆蓋層頁面的實現，合理利用了手機屏幕有限的空間，為店鋪詳情展示開辟了充分的位置。

?

選規格，遮罩層控件定制

這部分定制控件更多，有：半透明遮罩層、彈出框、單選、多選、加入購物袋按鈕。根據所搭配規格，實時計算價格，合并加入購物袋，統一支付下單。

至此，我們對首頁界面有了一個初步認識，下面的商業實戰案例教程，將帶大家一步步實現“喜茶Go”這個商業案例，交流學習微信小程序技術。

?

專題預告

---

第二期：“喜茶Go”微信小程序視圖層界面的實現? ?將詳細介紹兩個看似全新的東西WXML和WXSS，如何布局控件位置

第三期：小程序邏輯層業務的實現? ? 將詳細介紹數據綁定方面的靈活運用，控制WXSS實現下單效果

?

?

總結

以上是生活随笔為你收集整理的“喜茶Go”微信小程序新零售商业实战案例经验分享－概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。