基于WAMP架構(gòu)的微商城網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

熊曉莉，馬 越

（渭南師范學(xué)院 陜西 渭南 714099）

1 引言

隨著智能手機(jī)的大眾化和5G技術(shù)的發(fā)展，使用手機(jī)上網(wǎng)愈來愈普及。據(jù)2017年《中國移動(dòng)互聯(lián)網(wǎng)用戶行為報(bào)告》顯示，截至2016年第四季度，我國的移動(dòng)互聯(lián)網(wǎng)用戶已經(jīng)達(dá)到8.8億，無線網(wǎng)絡(luò)的廣泛覆蓋更是促進(jìn)了移動(dòng)互聯(lián)網(wǎng)呈現(xiàn)爆發(fā)發(fā)展趨勢。移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展給電子商務(wù)帶來了無限的發(fā)展機(jī)遇。用戶只需要一臺(tái)手機(jī)就能享受商家提供的商品服務(wù)信息。

移動(dòng)商城作為一種常見的電商平臺(tái)，是基于微信等各大社交媒體和平臺(tái)建立起來的商品銷售網(wǎng)站，它的主要作用用來滿足商家在移動(dòng)端創(chuàng)建商城的需求。根據(jù)相關(guān)調(diào)查數(shù)據(jù)顯示，2016年末用戶使用移動(dòng)端搜索關(guān)鍵字的次數(shù)已遠(yuǎn)超過用戶使用電腦端搜索關(guān)鍵字的次數(shù)。據(jù)官方統(tǒng)計(jì)微信使用人數(shù)已突破10億。微信公眾號(hào)是開發(fā)者或商家在微信公眾平臺(tái)上申請(qǐng)開通使用的賬號(hào)，平臺(tái)能夠?qū)崿F(xiàn)特定群體之間的文字、圖片、語音、視頻的全方位溝通、互動(dòng)，形成了一種主流的線上線下微信互動(dòng)營銷方式。正如，線上線下微信互動(dòng)營銷的代表微部落，率先提出標(biāo)準(zhǔn)的行業(yè)通用模板和深定制的微信平臺(tái)開發(fā)理念相結(jié)合，形成了線上線下微信互動(dòng)營銷的開放應(yīng)用平臺(tái)。

同時(shí)，近年來微信加大了對(duì)服務(wù)號(hào)的扶持力度，建立基于服務(wù)號(hào)的電商生態(tài)服務(wù)體系，不斷推動(dòng)服務(wù)號(hào)的發(fā)展。微店、微商城等產(chǎn)品銷售平臺(tái)的大量涌現(xiàn)證明其發(fā)展?jié)摿湍芰Α墓δ苌现v，服務(wù)號(hào)比訂閱號(hào)API接口的更開放，服務(wù)號(hào)能夠申請(qǐng)開通微信支付功能，某種程度上說明微信的商業(yè)化全面推開。微信支付與線下場景深度結(jié)合，成為移動(dòng)互聯(lián)O2O的核心模式[1]。將社交屬性、位置屬性(LBS)、支付閉環(huán)、溝通體系能夠全面打通，成為當(dāng)前實(shí)體項(xiàng)目發(fā)展的的一個(gè)新起點(diǎn)。

2 關(guān)鍵技術(shù)

基于WAMP的微商城系統(tǒng)使用PHP語言進(jìn)行編寫，數(shù)據(jù)庫方面由My SQL提供技術(shù)支持。PHP+MySQL的組合可以成為目前最穩(wěn)定和最安全的網(wǎng)站開發(fā)技術(shù)，PHP中提供了整套的MySQL函數(shù)，所以可以說PHP為MySQL提供了最全面的支持[2]。

基于WAMP架構(gòu)下，參照天貓、京東商品購買模塊的框架樣式，運(yùn)用baijiacms引擎，模擬商品交互和支付調(diào)試，搭建商城管理系統(tǒng)。

《花城》微商城網(wǎng)站的核心技術(shù)包括以下幾種：（1）MySQL數(shù)據(jù)庫的構(gòu)建及使用。（2）PHP技術(shù)及代碼優(yōu)化，保證數(shù)據(jù)安全性。（3）curl+js頁面?zhèn)髦档臄?shù)據(jù)調(diào)用。（4）基于微信公眾平臺(tái)的curl返回json值的回調(diào)技術(shù)。（5）微信工作平臺(tái)開放接口的調(diào)用和回調(diào)接口的開發(fā)。

3 系統(tǒng)信息架構(gòu)及UI設(shè)計(jì)

3.1 系統(tǒng)信息架構(gòu)

微商城以移動(dòng)手機(jī)平臺(tái)作為主要使用平臺(tái)，在信息架構(gòu)設(shè)計(jì)上采用的是符合手機(jī)界面特點(diǎn)的信息架構(gòu)模式，在商城的底部區(qū)域設(shè)定了固定導(dǎo)航的功能菜單，包括“在線咨詢”“全部商品”和“個(gè)人中心”三個(gè)主菜單欄。每個(gè)主功能菜單下面設(shè)置了對(duì)應(yīng)的功能項(xiàng)（具體功能信息架構(gòu)如圖1所示），以滿足用戶購買產(chǎn)品時(shí)所需的功能操作[3]。

圖1 功能信息架構(gòu)圖

3.2 設(shè)計(jì)構(gòu)思

《花城》微商城UI設(shè)計(jì)部分主界面排版樣式的顏色搭配遵循統(tǒng)一協(xié)調(diào)，主要藝術(shù)特色：以簡約的平面風(fēng)格為主，以淡色的色調(diào)為基準(zhǔn)，制作整體清爽風(fēng)格主頁；根據(jù)主流的平面界面，和現(xiàn)代人視覺審美的特點(diǎn)，以白紅色為主色，黑灰色為輔色的購物頁面；以主色和輔色為基準(zhǔn)的框架下，制作個(gè)人中心頁面，色彩總體簡約明了，子頁面風(fēng)格簡單統(tǒng)一[4]。

4 微商城的設(shè)計(jì)與實(shí)現(xiàn)

4.1 構(gòu)造訪問接口

在開發(fā)后臺(tái)接口時(shí)，第一步需要使用開發(fā)者模式，先進(jìn)入到開發(fā)者中心，開啟開發(fā)者模式，在開發(fā)者中心，需要獲取開發(fā)者ID（包括開發(fā)者app ID和appsecret），獲取后根據(jù)開發(fā)者文檔獲取相應(yīng)的開發(fā)者接口文檔，在此開發(fā)者過程中，需要自主創(chuàng)建服務(wù)器事件推送接口，公眾號(hào)后臺(tái)服務(wù)器配置。

4.2 創(chuàng)建查詢接口

除了創(chuàng)建數(shù)據(jù)訪問接口外，還需要查詢內(nèi)容，需要?jiǎng)?chuàng)建查詢接口，通過查詢接口獲取數(shù)據(jù)庫中的數(shù)據(jù)，并以json的格式返回并顯示出來，查詢接口創(chuàng)建的樣例如圖2所示。

圖2 創(chuàng)建查詢接口

4.3 創(chuàng)建數(shù)據(jù)庫

等相應(yīng)的接口創(chuàng)建完成后，需要?jiǎng)?chuàng)建數(shù)據(jù)庫，根據(jù)頁面的功能以及跳轉(zhuǎn)中需要獲取和傳遞的數(shù)據(jù)進(jìn)行前綴建表，創(chuàng)建數(shù)據(jù)庫和數(shù)據(jù)表。

4.4 支付接口調(diào)試

根據(jù)微信支付的官方開發(fā)文檔調(diào)用微信支付API，然后撰寫PHP參數(shù)與API對(duì)接，調(diào)用樣例如圖3所示。

圖3 創(chuàng)建數(shù)據(jù)庫和數(shù)據(jù)表

4.5 后臺(tái)服務(wù)端菜單功能板塊建立

商品分類，商品展示，收貨地址管理，數(shù)據(jù)提交與公眾號(hào)推送事件url，與服務(wù)端數(shù)據(jù)庫訂單返回值一一對(duì)應(yīng)。

4.6 制作前臺(tái)頁面

根據(jù)運(yùn)用baijiacms內(nèi)核軟件設(shè)計(jì)前端頁面，通過Photoshop軟件對(duì)圖片進(jìn)行美化處理，運(yùn)用JS代碼控制滑動(dòng)展示--幻燈片展示--商品分類展示，增加CSS樣式顏色代碼控制頁面的布局構(gòu)造，制作出各分類板塊的頁面，如圖4所示。

圖4 制作前臺(tái)界面

4.7 微商城運(yùn)行效果

在手機(jī)端運(yùn)行微商城《花城》效果圖如組圖5所示。

圖5 運(yùn)行效果圖

5 結(jié)語

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，微商城很好地彌補(bǔ)了實(shí)體店的部分不足，微商城的廣泛應(yīng)用，將更加完善地從多渠道、多方式推進(jìn)個(gè)體工商戶以及零售類中小企業(yè)O2O模式的發(fā)展[5]。本文中的《花城》網(wǎng)絡(luò)微商城，在頁面交互上用了很普遍的curl頁面?zhèn)髦?，增加了頁面在微信?nèi)核中的實(shí)用性和安全性，是一種值得嘗試的開發(fā)模式。