整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
案例和由此案例重點講解的知識點介紹
案例代碼實現(xiàn)
并集選擇器知識點詳解
此案例是頁面，效果如下：
此頁面的技術實現(xiàn)解析：
此頁面中l(wèi)i標簽內(nèi)需要由div包裹，同時div主要的顯示部分又是img，故兩者大部分樣式具有通用性，可以使用并集選擇器，將通用樣式提出，以免重復書寫
此案例中主要用到了，基于此，我們會系統(tǒng)的將如下知識點全部講解：
并集選擇器
第一步：書寫商標列表的html
第二步：定義通用樣式，主體樣式，同時將通用樣式使用并集選擇器提取，并針對個性化樣式進行單獨定義
并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標記選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。
融商城剛建立的時候，業(yè)務相對單一，主要負責公司點券和體驗金的兌換。在最初的搭建商城構架的時候，我們使用了當下流行的前端框架 React 作為地基，但在上層分支上處理相對混亂。
主要表現(xiàn)在HTML 的 DOM 元素被 React 的 Virtual Dom 和 jQuery 同時操作，導致維護一個 state 的狀態(tài)變得不是那么的順利。
為了使前端構架能夠更靈活適用于商城的業(yè)務擴展，我們就對前端架構進行重構：
地基 View層：React
js 語法：ES6
語法編譯：Babel
數(shù)據(jù)流操作：Reflux
樣式使用：Stylus
頁面跳轉：React-router
打包上線：Gulp+Webpack
為了保持 state 狀態(tài)的統(tǒng)一管理，既有 React 何須 jQuery。
項目框架結構如下：
1）運行機制：
npm 通過加載 package.json 必要的 modules，解決項目的依賴關系。通過 npm start 運行本地服務器，通過 webpack 加載 app 目錄下main.js，通過 react-router 路由配置解析，進入到商城首頁。
2）編譯機制：
babel 使用 babylon 解析器對源代碼進行解析并生成 AST(Abstract Syntax Tree 抽象語法樹)，接著通過 babel-traverse 對解析出來的 AST 進行遍歷，解析出來整個樹的 path，讀取對應的元素，并應用到 transformers 插件上，生成變換后的 AST，最后使用 babel-generator 將 AST 樹轉碼成最終編譯后的代碼串。
3）數(shù)據(jù)流向：
當用戶進來網(wǎng)站的時候，React action 匹配用戶當前的操作，通過 API 獲取后端提供的信息。Dispatcher 作為事件調(diào)度中心，Reflux 模型的中心樞紐，管理著Reflux 應用中的所有數(shù)據(jù)流，它本質(zhì)上是 Store 的回調(diào)注冊，每個 Store 注冊它自己并提供一個回調(diào)函數(shù)。
當 Dispatcher 響應 Action 時，通過已注冊的回調(diào)函數(shù)，將 Action 提供的數(shù)據(jù)信息發(fā)送給應用中所有的 Store，React views 把后臺的數(shù)據(jù)渲染后呈現(xiàn)給用戶，完成整個閉環(huán)的數(shù)據(jù)流。
MVC 模型進化過程：
1）單頁面
2）業(yè)務線
3）點融商城 MVC模型
商城主業(yè)務的轉型：原來單一業(yè)務的券功能轉變?yōu)橥ㄟ^投資免費獲取商品的模式，將券功能移動到二級分類里。
這一模式的改版，是業(yè)務模式的探索與嘗試。MVP 商城之所以能快速革故鼎新，得益于重構的能適應復雜業(yè)務線的前端架構，以及團隊間的精誠協(xié)作與共同努力。
商城的首頁也是經(jīng)過不斷更迭的頁面 UI 優(yōu)化調(diào)整，形成了用戶舒適的視覺體驗，并且在功能上給到用戶更多的選擇，如：提供商品搜索、心愿單、愛大牌、每日上新、商品多屬性選擇等等。
商城作為一個通過“商品”來連接用戶生活場景的模塊，通過利息前置的方式，來幫助用戶梳理理財與消費之間的關系。既解決了用戶強烈的投資需求，同時也滿足了實際的消費需求。
商城前端之路漫漫其修遠兮，我們都在上下而求索的道路上。未來，我們會不斷革新，打造貼近用戶體驗的全新商城模式。
本文作者：喬樂（點融黑幫），Social Team 前端攻城獅一枚，負責點融商城和社區(qū)前端開發(fā)，喜歡游泳，騎行，旅游，以及更多大千世界未知的美好事物。
本文由@點融黑幫（ID：DianrongMafia）原創(chuàng)發(fā)布于，未經(jīng)許可，禁止轉載。
前張工就跟大家探討過商城網(wǎng)站的積分和支付等等，近日又有朋友在問我那么到底怎樣才能開發(fā)好一個整體的商城網(wǎng)站呢?是的，這個問題問得比較好。我們都知道了商城的細節(jié)了，也知道做商城網(wǎng)站的好處，那么到底怎樣才能把一個商城網(wǎng)站給做好呢？
先給大家普及下商城網(wǎng)站的基本知識。商城網(wǎng)站跟普通企業(yè)純展示官網(wǎng)的區(qū)別在于除了前端的頁面設計和展示，它還有功能。像會員、購物車、支付、訂單、評論等等。所以現(xiàn)在你知道了，要把商城網(wǎng)站做好，不光是前端的展示頁面要設計好，后端的功能開發(fā)也要做好才行。
那么現(xiàn)在我們就詳細講講做商城網(wǎng)站的細節(jié)吧！
首先是商城網(wǎng)站的頁面設計。像我們助標網(wǎng)絡做的都是定制商城，所以商城每個頁面都會出效果圖個性化設計的。先是設計商城的首頁，一般的純商城網(wǎng)站網(wǎng)站頭部有：Logo、導航欄目和搜索框。Banner大圖（輪番切換的橫幅），一般是上浮產(chǎn)品分類，一般是展開到細分產(chǎn)品欄目名稱。主體區(qū)域有：熱銷產(chǎn)品（左側廣告板塊 右側產(chǎn)品推薦區(qū)域）；系列產(chǎn)品推薦板塊（每個系列產(chǎn)品板塊，左側廣告區(qū)域，右側相應系列產(chǎn)品推薦區(qū)域）。網(wǎng)站底部，版權號、備案號和聯(lián)系信息等。
內(nèi)頁主打是產(chǎn)品的介紹，這里也主要介紹產(chǎn)品欄目。一般的點擊產(chǎn)品欄目，首先是篩選，下測是商品的列表頁按序排列。這里要注意的是，篩選的品類要確定好。品類的意思就是你有多少屬性支持用戶篩選，一般的像商品的價格、品牌、地點、新舊和重量等屬性篩選。然后是根據(jù)銷量和價格等默認排序。下側了就是產(chǎn)品列表圖文樣式，縮略圖列表，上側標題，下側描述字段。最后點擊進入產(chǎn)品詳情頁。商品詳情頁有：左側多圖相冊，放大鏡功能；右側產(chǎn)品標題、價格、配置、日期和數(shù)量等字段，在開發(fā)商城網(wǎng)站的時候這些字段也都是先要確定好的。然后是下單和購物車功能 ；下側商品詳情、商品參數(shù)和咨詢評論功能（會員針對單個商品評論）。
好了，頁面的設計差不多就是這些，下面再講講商城的功能開發(fā)。
首先是會員功能。一般的是可以支持手機和郵箱注冊的，當然手機注冊的更簡單，做得比較多。就是在做商城網(wǎng)站的時候需要客戶買短信，提供接口給我們就行了。這里還要注意的一點是找回密碼也很重要，一般這個功能做好后可以支持手機號找回密碼。
注冊好會員登錄后就可以去購買商品了，這里一般會用到購物車。購物車的好處是針對多個產(chǎn)品可以加入購物車，統(tǒng)一支付。當用戶選擇多種商品一起去購物車準備結算后，增、刪或者減少商品，價格都可以實時變化。選好商品后，點擊確認，填好收貨地址，提交訂單，去支付。
支付了，一般是可以支持微信、支付寶以及帶銀聯(lián)標識的銀行卡等，一般客戶提供接口給我們即可。
支付好之后，就進入訂單頁面了。用戶支付好之后訂單的狀態(tài)就是已付款訂單（未發(fā)貨訂單），商家發(fā)貨后手動更新狀態(tài)為已發(fā)貨訂單，用戶確認收貨后就是已完成訂單。
用戶在完成購買過程后，還可以去評論，這個評論支持管理員回復。一般的評論是針對單一用戶購買商品后的，不支持游客評論，當然管理員可回復，也不支持其他用戶去回復。
常規(guī)的商城就是這樣。當然還有復雜一點的，功能會比較多點，因為本來做的就是定制商城網(wǎng)站嘛，所以功能也是可以定制開發(fā)的。比如說在線充值、退換貨、積分和優(yōu)惠券等。
在線充值就是用戶可以直接將支付寶、微信或者銀行卡里面的錢充值到他的會員帳號里面去，這樣下次購買商品的時候就可以直接用會員里面的錢去支付了。當然這個充值功能一般大的平臺才有可能會用得到！
而退換貨功能一般是這么做的。用戶要退換貨，輸入電話、訂單號、退換貨原因等字段，提交表單，消息推送至管理員郵箱，管理員后臺操作退換貨狀態(tài)，安排線下退款；用戶可以查看申請記錄與進度。
積分和優(yōu)惠券就是當用戶在商城網(wǎng)站購買商品后一般都會產(chǎn)生積分，這個積分可以用于購買新商品時候抵扣一部分錢也可以用在積分商城的積分支付和兌換其他商品。優(yōu)惠券了，主要是管理員發(fā)放到會員賬號里面去的，可以用于購買新商品時候抵扣一部分錢，抵扣的規(guī)則也是和積分抵扣的規(guī)則類似。
要開發(fā)好商城網(wǎng)站，要注意的細節(jié)還是挺多的，從頁面設計到功能開發(fā)算下來工時也不少，所以價格也不會太便宜。這里希望大家在做商城網(wǎng)站的時候一定要注意下。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
