Slog96_使用React框架進行前端開發8

• ArthurSlog

• SLog-96

• Year·1

• Guangzhou·China

• October 14th 2018

• 個人網站：http://www.arthurslog.com

• CSDN：https://blog.csdn.net/u010997452/article/list/1

• GitHub：https://github.com/BlessedChild/ArthurSlog

• NPM：https://www.npmjs.com/~arthurslog

• 掘金：https://juejin.im/user/59f2a424f265da432f305c66/posts

• 簡書：https://www.jianshu.com/u/b9ebe10f0534

• segmentfault：https://segmentfault.com/u/arthurslog/articles

自古逢秋悲寂寥 天氣涼了 記得適時進補一些溫補的食材 約上小夥伴吃吃火鍋 擼擼串 除了填飽飢腸轆轆的肚子 更重要的是填滿繁忙城市裏孤獨空洞的靈魂 踏在夢想的道路上 楓葉漫地 加油朋友 任何時候都不要放棄 當你迷茫的時候 可以來看看我的博客（不一定有什麼卵用） 只是 你會知道 有一個人 一直在前進的路上

---

開發環境MacOS(Mojave 10.14 (18A391))

信息源

• 各大線上運營的商城

開始編碼

• 過去這幾天 研究了幾款上線的產品的設計

• 同時調查瞭解了一下一些主流的開發方案

• 結合做幾天收集的信息 我先雜糅在一起 然後提取出最本質的東西

• 還是以項目爲導向

• 本次完成了‘個人中心’頁面的功能設計 和 頁面佈局的設計 以及 前後端接口的設計

• 本篇來完成‘個人中心’頁面的功能設計 和 頁面佈局的設計

• 前後端的接口設計另起一篇來寫

• 市面上的微信h5商城非常繁多

• 但一些必須的業務是高度統一的 例如‘訂單系統、個人信息系統、支付系統’

• 根據分析 爲‘個人中心’產品頁面設計了以下業務功能：

餘額、積分、卡、券
我的訂單、待付款、待接單、待發貨、已發貨、已完成
性別、生日、收穫地址
手機號、微信綁定
店鋪主頁、推廣中心、關注我們、店鋪信息

• 上面幾個 都是是基礎必要的業務（店鋪主頁只是簡單路由到主頁）

• 代碼比較多 就不一個一個列出來了 沒什麼意思

• 可以直接到Github上看一看源碼 順便點個star 支持一下謝謝（笑）

• 在文件結構的安排上 目前還沒有完全固定

• 主要是樣式文件的解耦和業務之間的權衡一直在變化 所以有一些文件命名和代碼還未全部更新完

• 下面上一下當前mobile端 ‘個人中心’頁面的產品圖

• 接下來 使用ajax來獲取頁面信息內容了

• 考慮到產品上線之後的運營 還需要在web端開發一個運營平臺

• 這個運營平臺可以來更新 產品裏面產品的數據內容 例如圖片、產品介紹、價格等一些日常高頻率使用的功能

• 其他比較大的功能 解耦出來 進行深度開發

• 上一次提到了 頁面上的字體採用 css3 的 rem單位特性（隨着根節點font-size的大小變化而變化）

• 這次‘個人中心’頁面 也全面採用了 rem特性和百分比來處理頁面樣式

• 更新README，增加 產品的 ‘個人中心’ 頁面的設計

• Github上工程的名稱更新了

• 工程文件已經上傳至Github：https://github.com/BlessedChild/ArthurSlogStore

• 至此，實現了mobile端 ‘個人中心’ 頁面的功能設計 和 佈局設計。

---

• 歡迎關注我的微信公衆號 ArthurSlog

• 如果你喜歡我的文章 歡迎點贊 留言

• 謝謝