適用場景廣,表單收集類小程序開發案例覆盤

今天我將以「北江紡織牛仔新時尚」小程序爲例,覆盤一個服裝行業訂單收集小程序從設計到實現的全過程。這是上篇,主要講產品邏輯搭建和數據庫設計的過程。

這個小程序的主要功能是向用戶展示服裝和麪料商品,並提供搜索、收藏商品,加入購物車和下單等功能,是一個比較典型的訂單 / 意向收集小程序。

這個實現方案也可以應用於活動意向、用戶信息收集等營銷類的小程序。

技術方案

從技術層面(或系統架構)上說,(功能豐富的)小程序一般由前端和後端兩部分組成。前端可以認爲是我們所能看到的小程序,負責頁面數據展示與用戶操作交互;後端主要負責提供和操作數據。

在技術選型上,前端方面固然採用小程序開發技術,後臺方面則選用知曉雲(cloud.minapp.com)。知曉雲免去了小程序開發中服務器搭建、數據接口實現等繁瑣流程,可以更專注於業務邏輯的實現。

需求分析

在確定好技術方案後,接下來就需要有一個明確的業務需求分析。

以紡織行業爲例,該小程序的主要目的是用於商品展示和用戶下單,爲用戶提供一個便捷快速的購物平臺。因此可以主要分爲三大模塊:商品模塊,購物車模塊,個人中心模塊。

每個模塊根據實際業務需求可以再細分爲多個功能模塊,從而可以根據功能需求初步確定頁面設計。

商品模塊:商品模塊是小程序很重要的一部分,提供商品展示,用戶購買、收藏、加入購物車、下單等主要功能。

這個紡織小程序的商品主要有面料及其製作的成衣兩大類,爲了更直觀地展示和區分面料和成衣兩種不同商品,在設計上也會體現出【主頁】和【面料】兩部分。

  • 購物車模塊:購物車模塊的功能和多數的購物商城程序一樣,用於暫時存放有購買意向的商品,在頁面上顯示的部分爲【購物袋】。

    個人中心模塊:個人中心包含註冊,登錄,個人信息,收藏,訂單管理等功能,一般在頁面上的設計爲【我的】。

頁面設計

經過分析完業務功能需求,初步設計首頁的入口有四個,以常見的 tabbar 形式展示

  • 主頁:展示不同分類的成衣商品

    面料:展示面料商品列表

    購物袋:展示用戶有購買意向的商品

    我的:管理個人信息

在確定首頁入口後,會再根據每個入口設計各自功能應該展示的頁面。至於每個部分的頁面詳細設計和實現,會在後續文章講述。

數據庫設計

當然,良好的數據庫設計無疑是以上功能實現的基礎。製作數據庫首先要確定實體的屬性和實體間的關係。數據庫要存儲所有的商品信息和用戶信息,這些信息都是商品的屬性和用戶的屬性。

爲了能更加全面考慮到要實現的功能,我們還可以再通過工作流程圖作數據流程分析,進一步明確小程序所包含的實體信息有哪些。

根據實現目標和業務需求制定工作流程圖如下。

「北江紡織」小程序的數據管理主要是從商品展示到用戶下單支付流程的各種信息管理,其中包含商品數據、用戶數據、訂單數據、購物車數據、收藏數據等。

商品包含的信息比較複雜,可以分爲商品信息、商品類別信息以及供應商信息等,用記錄 ID 在數據表間建立聯繫。

其中,信息管理主要體現在添加、刪除、修改、查詢等功能。

數據表彙總如下:

關於上述數據表的字段設計,知曉雲(cloud.minapp.com)已經提供了常用的電商數據表模版,在這個基礎上,我們可以再根據小程序的功能需求對數據表增刪字段。

Tip:此外,各個數據表內可以添加 status、priopity 字段,用於控制數據的是否顯示以及顯示順序。

所有的準備工作做好了,接下來就可以開始小程序開發了。關於具體的技術實現,將在下篇文章詳細介紹。

圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章