基于微信小程序的土特產(chǎn)商城開發(fā)

郭學(xué)超

（1.泉州職業(yè)技術(shù)大學(xué) 商學(xué)院,福建 泉州 362268；2.電子商務(wù)福建省高校應(yīng)用技術(shù)工程中心, 福建 泉州 362268）

一、背景介紹

近年來，國家多次在文件中提到，要大力發(fā)展農(nóng)產(chǎn)品電商，振興農(nóng)村經(jīng)濟。隨著現(xiàn)代人生活 節(jié)奏加快，食品安全意識的提高，越來越多人都向往到農(nóng)村生活，品嘗各地特色、綠色健康的土特產(chǎn)商品。但是受時間、地域的種種限制，人們購買外地優(yōu)質(zhì)的土特產(chǎn)很難，除非去旅游順便帶點商品，但是這樣很難滿足需求。隨著移動互聯(lián)網(wǎng)+技術(shù)和物流行業(yè)的蓬勃發(fā)展，在消費者和商家之間建立了無縫連接渠道，使得異地產(chǎn)品共享變成現(xiàn)實，消費者足不出戶就能夠輕松的購買到異地土特產(chǎn)商品。據(jù)中國互聯(lián)網(wǎng)信息中心統(tǒng)計第44次統(tǒng)計報告顯示，2019年6月我國網(wǎng)民規(guī)模達(dá)到8.54億，其中手機網(wǎng)民的規(guī)模就有8.47億，占比99.18%。由此可見移動電子商務(wù)的市場規(guī)模是非常龐大的。土特產(chǎn)微信商城小程序開發(fā)為農(nóng)產(chǎn)品電商的未來發(fā)展開啟了更廣闊的道路。在緩解行業(yè)激烈競爭形勢的同時，也促進(jìn)土特產(chǎn)行業(yè)的信息化發(fā)展和轉(zhuǎn)型升級，提高了企業(yè)的競爭力。微信小程序商城可以調(diào)用微信支付、二維碼掃描、微信會員卡等功能，同時通過微信龐大的用戶群體，商戶可以接觸到更多的消費者。商家通過微信小程序的組件可以直接和消費者進(jìn)行溝通，通過微信會員卡可以更好留住客戶并且進(jìn)行各種豐富的促銷活動。通過微信支付可以讓客戶下單更加便捷，微信小程序一系列的開放組件為消費者了提供更好的購物體驗。

二、關(guān)鍵技術(shù)介紹

微信小程序以“無需下載，即開即用”的特點，在移動用戶中十分流行。微信小程序除了具備APP的功能之外，它還有自己獨特的優(yōu)點：第一：小程序的獲取范圍非常廣泛，用“觸手可及”一詞形容也不為過，最常用的獲取途徑就是通過微信搜索功能或者微信掃碼。第二：即用即走：小程序的背景是微信社交App，所以在使用微信小程序之前無需登入或注冊，只要點擊授權(quán)就可直接使用。第三：無需下載：微信小程序最讓大眾喜愛的一個優(yōu)點就是使用小程序是一款不用耗費大量的流量和內(nèi)存去下載輕型應(yīng)用程序。

（一）微信小程序開發(fā)組件

微信官方為微信小程序提供了一套完整的開發(fā)組件，主要有三部分：一是邏輯層，微信開放了一系列API，比如有網(wǎng)絡(luò)方面的API，微信支付API，微信身份認(rèn)證API等等。通過這些API可以大大提供開發(fā)者的開發(fā)效率。二是視圖層，不同于傳統(tǒng)的HTML，CSS，javascript網(wǎng)頁前端開發(fā)三劍客，微信官方寫了一套類似的語言分別是WXML,WXS,WXSS。這三套開發(fā)語言相比于傳統(tǒng)的HTML，CSS，javascript做了更多的限制，沒有傳統(tǒng)網(wǎng)頁開發(fā)那么靈活。三是微信官方提供了開發(fā)小程序的IDE環(huán)境。該開發(fā)工具能為開發(fā)者提供網(wǎng)絡(luò)性能測試，為不同手機型號類型兼容測試，代碼調(diào)試，代碼上傳等開發(fā)者常用的功能，有利于提高開發(fā)者的開發(fā)效率。

（二）開發(fā)技術(shù)

土特產(chǎn)商城小程序開發(fā)主要使用PHP語言，利用MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)的存儲，基于流行的ThinkPHP框架，最后部署在云服務(wù)器上。系統(tǒng)采用MVC 三層架構(gòu)，將原本與HTML代碼混雜在一起PHP代碼邏輯分離，將業(yè)務(wù)邏輯與數(shù)據(jù)庫操作分離。整個項目分為小程序前端和后臺控制端。項目的前端表現(xiàn)形式為微信小程序，這是商城的消費端，采用js+ wxml+css技術(shù)，主要利用微信的一整套服務(wù)接口API,如微信開放的身份驗證令牌，微信支付和微信通知接口以及各種開放接口和組件進(jìn)行開發(fā)。項目的后端是商家管理臺，使用傳統(tǒng)的PHP網(wǎng)頁開發(fā)技術(shù)，采用不同于B/S結(jié)構(gòu)（瀏覽器和服務(wù)器結(jié)構(gòu)）的RESTful API的架構(gòu)，主要負(fù)責(zé)商戶對微信小程序前端進(jìn)行管理。因各種終端設(shè)備層出不窮，例如手機、平板、桌面電腦等等。為了能在各種設(shè)備進(jìn)行統(tǒng)一的數(shù)據(jù)調(diào)用，必須有一種統(tǒng)一的機制，方便不同設(shè)備的前端界面與后端進(jìn)行通信。這是API構(gòu)架流行的主要原因。

三、系統(tǒng)業(yè)務(wù)及流程分析

特產(chǎn)商城小程序購物系統(tǒng)業(yè)務(wù)流程圖如圖1所示。用戶首先要用微信賬號登入微信，然后通過搜索或者掃碼進(jìn)入小程序，進(jìn)入后需要對本系統(tǒng)進(jìn)行授權(quán)登錄，沒授權(quán)的只能進(jìn)行簡單的商品瀏覽和查詢，而授權(quán)之后才能正常的進(jìn)行購物。商家要進(jìn)入系統(tǒng)后臺之前必須用管理員賬號和密碼進(jìn)行驗證，通過之后才能進(jìn)入本系統(tǒng)的后臺管理界面，商家可根據(jù)實際需要對商品信息進(jìn)行處理，例如設(shè)置土特產(chǎn)商品的名稱、價格、圖片、商品詳情等，還有上下架處理。對用戶所下的訂單進(jìn)行配貨，發(fā)貨處理。商城開發(fā)重點在于購物車，訂單處理，支付等方面。

圖1 業(yè)務(wù)流程圖

四、系統(tǒng)設(shè)計

（一）系統(tǒng)架構(gòu)設(shè)計

本系統(tǒng)分為兩部分，其中一部分為土特產(chǎn)商城的小程序端部分，這一部分主要是為消費者下單購物所服務(wù)的。第二部分為商戶控制臺，這一部分是為商家提供后臺商城所服務(wù)的。

在本項目中的微信小程序部分的整體開發(fā)設(shè)計與傳統(tǒng)的網(wǎng)頁開發(fā)類似，微信團隊開發(fā)了與傳統(tǒng)網(wǎng)頁開發(fā)相應(yīng)的WXSS,WXHL,WXS。其中WXSS對應(yīng)CSS，同屬于網(wǎng)頁開發(fā)中的層疊樣式表。WXML對應(yīng)HTML，同屬于網(wǎng)頁開發(fā)中的超文本標(biāo)記語言。WXS對應(yīng)JavaScript，同屬于動態(tài)腳本語言。

但與傳統(tǒng)的網(wǎng)頁開發(fā)不同的是，微信小程序是使用API進(jìn)行數(shù)據(jù)調(diào)用的。無論是調(diào)用土特產(chǎn)商城后臺數(shù)據(jù)，還是調(diào)用微信本身開放出來的數(shù)據(jù)，都是基于API。而在第二部分商戶控制臺部分，是完全基于B/S結(jié)構(gòu)。商家能在瀏覽器上通過商戶控制臺中完成對土特產(chǎn)商城的信息維護。

（二）數(shù)據(jù)庫設(shè)計

在本系統(tǒng)數(shù)據(jù)庫的設(shè)計中，主要考慮到了以下幾部分，一、數(shù)據(jù)庫設(shè)計要滿足本項目中的功能需要。二、滿足數(shù)據(jù)庫設(shè)計的三大范式，這既能保證本項目的數(shù)據(jù)庫運行效率，又能在后續(xù)的項目開發(fā)中進(jìn)行更優(yōu)雅的代碼實現(xiàn)。三、為項目的將來的升級擴展做準(zhǔn)備，數(shù)據(jù)庫的設(shè)計不能僅僅為了滿足現(xiàn)有的功能實現(xiàn)。在當(dāng)下的互聯(lián)網(wǎng)時代，Web項目的升級換代節(jié)奏越來越快，一個好的數(shù)據(jù)庫設(shè)計需要能滿足于將來的項目更新升級需求。

根據(jù)土特產(chǎn)商城的實際需求，以及考慮到將來項目的可擴展性，在本項目中一共設(shè)計了13張表。主要包含如表1所示：

表1 土特產(chǎn)商城數(shù)據(jù)庫主要包含的表

（三）系統(tǒng)功能模塊

根據(jù)系統(tǒng)的功能需求分析，將系統(tǒng)劃分小程序前臺客戶端和小程序后臺控制端兩大模塊，其中前臺客戶端為六大功能模塊，每個模塊又分為若干個子功能，如圖2所示。后臺控制端分為5個模塊，每個模塊又分為若干個子功能，如圖3所示。

圖2 土特產(chǎn)商城前臺功能圖

圖3 土特產(chǎn)商城后臺功能圖

五、系統(tǒng)的實現(xiàn)

（一）前臺客戶端

根據(jù)前面的系統(tǒng)功能模塊設(shè)計，完成代碼編寫和調(diào)試。前臺客戶是微信小程序商城端，這一部分是消費者的購物端，用戶可以在微信小程序上完成商品的搜索，瀏覽，加入購物車，下單支付，查看訂單的所有操作。

1.土特產(chǎn)商城小程序主界面

微信小程序土特產(chǎn)商城主界面如圖4所示。用戶通過微信小程序打開土特產(chǎn)商城時首先會加載商城主界面。商城主界面主要由輪播廣告位，商品分類，特色推薦等內(nèi)容。

圖4 微信小程序土特產(chǎn)商城主界面

2.微信小程序土特產(chǎn)商城分類界面

當(dāng)商家的商品數(shù)量多到一定程度時，為了讓商家更好的管理商品，同時也為了能讓消費者更好的尋找到自己需要的商品，土特產(chǎn)商城主要是根據(jù)產(chǎn)品的出產(chǎn)地進(jìn)行分類展示。顧客可以通過點擊各個省份分類按鈕，切換到自己需要的商品界面。

3.微信小程序土特產(chǎn)商城購物車界面

購物車，顧客能將自己需要的商品添加到購物車中，然后統(tǒng)一下單付款。購物車是本項目中開發(fā)的重點和難點。在當(dāng)顧客退出微信小程序，購物車的商品不會因此清空，項目中使用緩存技術(shù)。項目中因為該土特產(chǎn)商城屬于輕量級項目，同時為了減少服務(wù)器的資源開銷和帶寬壓力并減少網(wǎng)絡(luò)延遲，采用的是客戶端緩存解決方案。

4.微信小程序土特產(chǎn)商城個人中心及訂單生成界面

用戶在購物車進(jìn)行下單后，會進(jìn)入訂單生成頁面。訂單生成頁面在取得用戶的授權(quán)后，能調(diào)用顧客在微信的地址信息，最后用戶只需要確認(rèn)地址信息和購買商品信息無誤，就能通在該頁面進(jìn)行商品下單。

顧客可以通過土特產(chǎn)商城個人中心界面來查看自己訂單信息，管理自己個人地址信息。在個人中心界面中需要請求用戶的個人信息授權(quán)。這功能需要調(diào)用微信開放API。需要將微信開發(fā)者的個人開發(fā)id和開發(fā)密鑰secret，傳入到微信開放的API進(jìn)行數(shù)據(jù)調(diào)用。

（二）土特產(chǎn)商城后臺管理功能實現(xiàn)

項目后臺采用B/S結(jié)構(gòu)實現(xiàn)，后臺數(shù)據(jù)處理服務(wù)放在服務(wù)器上，商戶在后臺控制臺上的操作在瀏覽器上的頁面完成。商戶后臺管理是以商家為中心進(jìn)行開發(fā)的。在這一部分中主要實現(xiàn)了以下五大功能。

1.商品管理功能

商品管理功能主要是實現(xiàn)商家對商品信息維護的功能，商家可以通過商品管理實現(xiàn)對商品的添加、刪除、價格信息修改，商品介紹修改等功能。

2.商戶分類管理功能

商品是按照產(chǎn)出地來進(jìn)行分類的。商品分類可以將商品更直觀的呈現(xiàn)給用戶。商品分類管理功能可以實現(xiàn)商家對商品管理的需求。商家可以在后臺進(jìn)行商品分類管理，進(jìn)行商品分類的添加、刪除更新等操作。

3.專題管理界面

商品專題功能，商家結(jié)合旅游購物節(jié)以及土特產(chǎn)文化展等形式將，將特色土特產(chǎn)做活動專題進(jìn)行營銷。在后臺商品專題管理中，可以將商品添加到專題，更新商品專題的圖片、描述等相關(guān)信息。

4.特別推薦管理功能

特別推薦管理功可以對微信小程序的首頁商品推薦進(jìn)行管理。在商戶控制臺中，可以對商品推薦圖片進(jìn)行更新操作，更改特別推薦的商品等。

5.訂單管理功能

訂單管理功能主要是幫助商家查看用戶的訂單詳情，可以進(jìn)行訂單發(fā)貨處理，查看物流基本信息等。

六、系統(tǒng)部署

系統(tǒng)屬于一個Web項目，需要將項目發(fā)布到互聯(lián)網(wǎng)上。系統(tǒng)部署包括以下幾個步驟：第一步部署前系統(tǒng)環(huán)境準(zhǔn)備，項目使用的是阿里云的Linux服務(wù)器，我們需要將域名地址解析到Linux服務(wù)器下,并配置PHP，MySQL，Nginx環(huán)境。第二步項目代碼上傳，使用FileZilla FTP客戶端將代碼上傳到服務(wù)器，并添加到Nginx目錄下。第三步為項目添加SSL證書。在本項目中使用的SSL證書是Let’s Encrypt免費的解決方案。在服務(wù)器上運行Let’s Encrypt官網(wǎng)提供的腳本，根據(jù)提示輸入相應(yīng)的信息就可以了。最后一步只需要通過微信團隊專門為微信小程序開發(fā)IDE將代碼上傳到微信服務(wù)器，并到微信小程序開發(fā)者后臺配置進(jìn)行域名配置，通過這一步就能上線一個體驗版的微信小程序了。

七、結(jié)語

隨著移動互聯(lián)網(wǎng)+技術(shù)和物流行業(yè)的蓬勃發(fā)展，在消費者和商家之間建立了無縫連接渠道，使得異地產(chǎn)品共享變成現(xiàn)實，消費者足不出戶就能夠輕松的購買到異地土特產(chǎn)商品。本文主要敘述了基于PHP的微信小程序土特產(chǎn)商城開發(fā)中的流程和關(guān)鍵技術(shù)。該土特產(chǎn)商城后端以PHP語言編寫，采用MVC和RESTfuk API 編程思想，采用MySQL作為后臺數(shù)據(jù)庫，Nginx作為網(wǎng)絡(luò)服務(wù)器，使用微信小程序作為用戶使用界面，最終的項目運行在阿里云服務(wù)器下的Linux系統(tǒng)上。為商家提供了一個在微信上操作體驗良好的微信小程序土特產(chǎn)商城，同時也為農(nóng)產(chǎn)品電商未來發(fā)展開啟了更廣闊的道路。