施 鷺

(蕪湖職業(yè)技術(shù)學(xué)院 網(wǎng)絡(luò)工程學(xué)院，安徽 蕪湖 241000)

0 引言

伴隨著移動互聯(lián)網(wǎng)技術(shù)的持續(xù)快速發(fā)展，越來越多的智能手機(jī)用戶安裝并使用手機(jī)微信。微信公眾號和微信小程序的大量應(yīng)用，已經(jīng)使微信不僅僅是一種聊天社交工具，而且在企業(yè)生產(chǎn)、產(chǎn)品營銷、網(wǎng)絡(luò)購物、餐飲服務(wù)等領(lǐng)域，發(fā)揮了越來越重要的作用。本研究運用微信小程序開發(fā)技術(shù)，結(jié)合線下傳統(tǒng)零售業(yè)的應(yīng)用場景，為濟(jì)南某數(shù)碼產(chǎn)品銷售公司設(shè)計了一款用于分銷商和賣場管理員使用的數(shù)碼產(chǎn)品供貨和出貨小程序運用效果良好。該小程序也可在其它相關(guān)企業(yè)中推廣應(yīng)用，幫助企業(yè)管理商品和促進(jìn)產(chǎn)品銷售。

1 開發(fā)技術(shù)

1.1 開發(fā)平臺

微信小程序提供一個簡單、高效的應(yīng)用開發(fā)框架和豐富的組件及API，旨在幫助開發(fā)者在微信中開發(fā)出具有原生 APP 體驗的應(yīng)用服務(wù)。小程序是一種輕量級的移動端應(yīng)用程序，從用戶的角度來看，小程序具有“無需安裝，即掃即用，用完即走，無需卸載”的顯著特點。用戶通過掃一掃小程序的專屬二維碼或者通過微信內(nèi)的搜索，即可打開小程序應(yīng)用程序，不需要在手機(jī)中額外安裝程序；同時，微信小程序很好地解決了用戶手機(jī)移動端跨平臺的兼容性問題和適配問題，實現(xiàn)一次開發(fā)，可同時應(yīng)用于IOS、Android系統(tǒng)手機(jī)；小程序通過微信程序提供的手機(jī)設(shè)備底層調(diào)用接口，能夠很好的實現(xiàn)手機(jī)上的原生功能，比如拍照、錄像、定位、掃碼等。

當(dāng)前要進(jìn)行微信小程序應(yīng)用開發(fā)，可以選擇的開發(fā)平臺和工具非常豐富，“有贊”“微盟”等是比較知名的小程序開發(fā)平臺，比較適合非專業(yè)的人員，在線就可以快速生成自己的微信小程序，缺點是不夠靈活，二次開發(fā)不方便，國內(nèi)目前有像“上線了”這樣的第三方開發(fā)平臺，它提供的小程序開發(fā)工具具有豐富的行業(yè)模板。本研究選擇微信官網(wǎng)提供的微信小程序開發(fā)者工具V1.03來完成小程序項目的開發(fā)。

1.2 微信小程序代碼結(jié)構(gòu)

微信小程序代碼的主體部分由項目配置文件和各個頁面的模塊文件組成，小程序項目名文件夾所在的位置下，app.js文件被稱為小程序配置文件，該文件中以JSON數(shù)據(jù)格式，配置小程序的全局范圍的參數(shù)，包括小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部 tab 等；project.config.json文件稱為工具配置文件，針對小程序開發(fā)者來進(jìn)行一些個性化的配置，例如界面顏色、編譯配置等。

在Pages文件夾下，包含小程序的各個頁面模塊，每個頁面模塊是一個獨立的文件夾，一般我們用頁面名稱來命名該文件夾。每個頁面包含四個基本文件，文件的后綴名依次是.wxml、.wxss、.js、.json，它們分別表示頁面的視圖、樣式、行為和配置參數(shù)。在項目開發(fā)過程中，小程序的這種規(guī)范化的代碼文件管理方式，實現(xiàn)程序的外觀和行為分離。WXML文件使用類似HTML標(biāo)記語言的語法描述頁面上的內(nèi)容結(jié)構(gòu)，WXSS文件使用類似CSS的語法樣式描述頁面的外觀樣式，JS文件使用JavaScript代碼定義頁面的邏輯功能和頁面數(shù)據(jù)模型，實現(xiàn)頁面視圖層和服務(wù)器之間的數(shù)據(jù)交互，它接收來自視圖層的服務(wù)請求和事件觸發(fā)，向微信服務(wù)器發(fā)送請求，進(jìn)行數(shù)據(jù)處理后，再將數(shù)據(jù)處理結(jié)果返回給視圖層。

1.3 小程序云開發(fā)

小程序云開發(fā)是微信團(tuán)隊聯(lián)合騰訊云推出的專業(yè)小程序開發(fā)服務(wù)。開發(fā)者可以使用云開發(fā)快速開發(fā)小程序、小游戲、公眾號網(wǎng)頁等，并且原生打通微信開放能力。開發(fā)者無需搭建服務(wù)器，可免鑒權(quán)直接使用平臺提供的API進(jìn)行業(yè)務(wù)開發(fā)。云開發(fā)中提供一個JSON數(shù)據(jù)庫，數(shù)據(jù)庫中的每條記錄都是一個JSON格式的對象。一個數(shù)據(jù)庫可以有多個集合(相當(dāng)于關(guān)系型數(shù)據(jù)中的表)，集合可看做一個JSON數(shù)組，數(shù)組中的每個對象就是一條記錄，記錄的格式是JSON對象。

云函數(shù)是一段運行在云端的代碼，開發(fā)者無需管理服務(wù)器，在開發(fā)工具內(nèi)編寫、一鍵上傳部署即可運行后端代碼。微信小程序中還提供專門用于云函數(shù)調(diào)用的API。開發(fā)者可以在云函數(shù)內(nèi)使用wx-server-sdk 提供的getWXContext方法獲取到每次調(diào)用的上下文(appid、openid 等)，無需維護(hù)復(fù)雜的鑒權(quán)機(jī)制，即可獲取天然可信任的用戶登錄態(tài)(openid)。

微信小程序云開發(fā)后臺提供一個基于WEB方式的內(nèi)容管理平臺(CMS)，該CMS是基于云開發(fā)搭建的可視化的內(nèi)容管理平臺，提供豐富的內(nèi)容管理功能，開通簡單，獨立于云控制臺，無須編寫代碼即可使用，支持文本、富文本、Markdown、圖片、文件、關(guān)聯(lián)類型等多種類型的可視化編輯，易于二次開發(fā)，并與云開發(fā)的生態(tài)體系緊密結(jié)合，可以幫助我們顯著提升開發(fā)效率。

2 系統(tǒng)需求分析

2.1 需求分析

經(jīng)過前期的調(diào)研分析，項目組考慮到系統(tǒng)中分銷商的供貨、出貨和賣場庫存管理等功能應(yīng)該具有一般通用性，因此將系統(tǒng)中的用戶分為系統(tǒng)管理員(分銷商)和賣場管理員。系統(tǒng)管理員可以從小程序端和WEB端登錄，管理賣場、產(chǎn)品分類、產(chǎn)品等基礎(chǔ)數(shù)據(jù)，分配賣場管理員賬號，進(jìn)行產(chǎn)品供貨、產(chǎn)品出貨確認(rèn)、紅包發(fā)放等業(yè)務(wù)操作。

分銷商的需求：一個簡單易操作的Web后臺管理入口，分銷商可以批量導(dǎo)入系統(tǒng)中的基礎(chǔ)數(shù)據(jù)，包括供給賣場的產(chǎn)品的分類數(shù)據(jù)、產(chǎn)品圖片資料、產(chǎn)品價格、賣場信息、賣場管理員賬號信息等，分銷商通過微信小程序端，能夠收到各個賣場的出貨消息提醒，查看出貨信息詳情，填寫?yīng)剟罴t包發(fā)放金額，完成紅包發(fā)放給賣場管理員的操作。

分析賣場的需求：賣場管理員從小程序端登錄完成后，可查詢本賣場的產(chǎn)品庫存信息，進(jìn)行供貨產(chǎn)品的收貨確認(rèn)、出售產(chǎn)品完成后進(jìn)行產(chǎn)品出貨業(yè)務(wù)操作等。在前期的需求調(diào)研中發(fā)現(xiàn)，各個賣場的管理人員容易發(fā)生變動，因此系統(tǒng)中，賣場管理員賬號需要和實際的賣場管理人員的微信號、手機(jī)號進(jìn)行綁定，并由系統(tǒng)管理員在小程序的后臺統(tǒng)一管理分配該賬號。

2.2 系統(tǒng)總計設(shè)計

本系統(tǒng)的用戶角色分為系統(tǒng)管理員(分銷商)和賣場管理員兩類，系統(tǒng)管理員完成企業(yè)產(chǎn)品數(shù)據(jù)的維護(hù)工作，可以查看到各個賣場庫存、賣場發(fā)貨訂單數(shù)據(jù)并進(jìn)行產(chǎn)品供貨管理，賣場管理員查看到自己的賣場庫存數(shù)據(jù)，完成產(chǎn)品收貨、產(chǎn)品出貨、賬號轉(zhuǎn)移等工作。系統(tǒng)的結(jié)構(gòu)功能如圖1所示。

圖1 系統(tǒng)的結(jié)構(gòu)功能圖

3 系統(tǒng)功能設(shè)計與實現(xiàn)

3.1 云數(shù)據(jù)庫設(shè)計

小程序云開發(fā)的云數(shù)據(jù)庫給我們提供系統(tǒng)的數(shù)據(jù)組織和存儲，通過內(nèi)容管理平臺(CMS)提供的WEB后臺界面，我們可以便捷的將設(shè)計好的系統(tǒng)數(shù)據(jù)模型建立起來，并將前期從客戶收集整理完成好的數(shù)據(jù)文件，以JSON的數(shù)據(jù)格式導(dǎo)入到云數(shù)據(jù)庫中，完成系統(tǒng)基礎(chǔ)數(shù)據(jù)的初始化工作。

筆者在微信開發(fā)者工具中，開通本系統(tǒng)的云開發(fā)功能，然后進(jìn)入云數(shù)據(jù)庫管理界面，接著進(jìn)入內(nèi)容管理平臺(CMS)創(chuàng)建名稱為“供貨發(fā)貨管理”的項目，在內(nèi)容模型管理菜單中，建立用戶信息表、產(chǎn)品信息表、用戶信息表供貨表、出貨表等。其中出化表如表1所示。

表1 出貨表sale

3.2 云函數(shù)定義與實現(xiàn)

云函數(shù)是微信小程序推出的在云端(微信服務(wù)器端)運行的函數(shù)。物理設(shè)計上，一個云函數(shù)可由多個文件組成，占用一定量的 CPU、內(nèi)存等計算資源；各云函數(shù)完全獨立；可分別部署在不同的地區(qū)。對于開發(fā)者來說，不需要自己額外購買、搭建服務(wù)器，只需編寫函數(shù)代碼并部署到云端即可在小程序端調(diào)用，同時云函數(shù)之間也可互相調(diào)用。云函數(shù)的獨特優(yōu)勢在于與微信登錄鑒權(quán)的無縫整合。當(dāng)小程序端調(diào)用云函數(shù)時，云函數(shù)的傳入?yún)?shù)中會被注入小程序端用戶的 openid，開發(fā)者無需校驗 openid 的正確性，因為微信已經(jīng)完成這部分鑒權(quán)，開發(fā)者可以直接使用該 openid。

根據(jù)系統(tǒng)需求和功能，我們定義并部署好一系列云函數(shù)以提供給系統(tǒng)中各個功能模塊來調(diào)用。幾個主要的云函數(shù)如表2所示。

我們在調(diào)用小程序提供的數(shù)據(jù)查詢接口、獲取云數(shù)據(jù)庫中數(shù)據(jù)的時候，發(fā)現(xiàn)小程序端與云函數(shù)端在調(diào)用查詢接口，返回全表數(shù)據(jù)集的時候，會有如下差異：在小程序端，如果沒有指定limit查詢參數(shù)，則默認(rèn)且最多取 20條數(shù)據(jù)記錄：在云函數(shù)端，如果沒有指定limit查詢參數(shù)，則默認(rèn)且最多只能取100條數(shù)據(jù)記錄。

表2 主要的云函數(shù)

在小程序端，實現(xiàn)分頁查詢時，需要構(gòu)建頁面的數(shù)據(jù)列表數(shù)組productList，結(jié)合頁面的onReachBottom事件實現(xiàn)分頁查詢；當(dāng)用戶下拉頁面時，程序?qū)⒂|發(fā)onReachBottom事件代碼的執(zhí)行，將新分頁的數(shù)據(jù)偏移量參數(shù)傳入到云數(shù)據(jù)庫中進(jìn)行數(shù)據(jù)查詢，將返回的數(shù)據(jù)結(jié)果填充到productList數(shù)組中。在云函數(shù)端，需要解決一次性查詢?nèi)頂?shù)據(jù)的問題。

獲取賣場數(shù)據(jù)getMarketList云函數(shù)部分關(guān)鍵代碼如下。

exports.main = async (event,context) => {

//先取出market集合記錄總數(shù)

const countResult = await db.collection('market').count()

console.log(countResult)

const total = countResult.total

//計算所有market數(shù)據(jù)需分幾次取出來

const batchTimes = Math.ceil(total / MAX_LIMIT)

//承載所有讀操作的 promise 的數(shù)組

const tasks = []

for (let i = 0;i < batchTimes;i++) {

//get()操作返回的是Promise對象，每獲取一個Promise就壓棧進(jìn)入tasks數(shù)組

const promise = db.collection('market').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()

tasks.push(promise)

}

//返回market全表的數(shù)據(jù)

return (await Promise.all(tasks)).reduce((acc,cur) => {

return {

data: acc.data.concat(cur.data),

errMsg: acc.errMsg,

}

我們需要在全表查詢所有數(shù)據(jù)記錄的云函數(shù)中先查詢出表中所有數(shù)據(jù)行數(shù)，然后迭代多次查詢，每次迭代查詢的記錄條數(shù)最大是100條。將每次查詢的數(shù)據(jù)記錄結(jié)果存入數(shù)組，全部完成后將該數(shù)組返回給云函數(shù)的調(diào)用者。

3.3 用戶登錄授權(quán)

本系統(tǒng)中的用戶登錄授權(quán)，主要解決兩個問題：一是通過微信官方提供的小程序登錄功能，獲取到微信提供的用戶身份標(biāo)識，即微信用戶信息，這樣可以快速建立小程序內(nèi)的用戶體系，在產(chǎn)品收貨、產(chǎn)品發(fā)貨等業(yè)務(wù)流程中，都是需要記錄下操作者的微信用戶信息的。二是系統(tǒng)提供管理員登錄或賣場人員登錄兩種不同的登錄方式，授予登錄用戶不同的操作權(quán)限，調(diào)用微信提供的wx.setStorageSync()方法本地存儲用戶身份標(biāo)識。當(dāng)賣場管理員登錄成功后，系統(tǒng)在小程序本地存儲賣場管理員賬號信息和賣場信息；當(dāng)系統(tǒng)管理員登錄成功后，執(zhí)行wx.setStorageSync(“admin”“admin”)存儲系統(tǒng)管理員信息，并清空賣場管理員賬號信息和賣場信息?？紤]到賣場管理員人員流動性較大，因此當(dāng)賣場管理員在小程序端進(jìn)入管理頁面時，比如進(jìn)行產(chǎn)品收貨確認(rèn)、產(chǎn)品出貨時，都會進(jìn)行一次賬號檢測，即查詢云數(shù)據(jù)庫，獲取最新的賣場管理員賬號數(shù)據(jù)列表，和小程序本地存儲的賣場管理員賬號信息比對，一旦發(fā)現(xiàn)是已離職人員，則清空小程序本地的所有登錄賬號信息，并退出程序。

3.4 供貨流程分析與實現(xiàn)

系統(tǒng)管理員在小程序首頁點擊“去供貨”按鈕進(jìn)入產(chǎn)品選擇頁面，該頁面參照美團(tuán)外賣小程序中的用戶菜品點單頁面，簡化設(shè)計開發(fā)而成，在頁面加載時，執(zhí)行onLoad方法中定義的代碼，先從云數(shù)據(jù)庫一次性加載全部供貨產(chǎn)品數(shù)據(jù)，然后將產(chǎn)品數(shù)據(jù)根據(jù)產(chǎn)品類型字段的值，進(jìn)行重新分組，分組完成后，在頁面上顯示各個分類的產(chǎn)品數(shù)據(jù)，當(dāng)用戶點擊加號或減號時將選中的產(chǎn)品加入或移除出購物車，接著點擊確認(rèn)按鈕，把之前選擇的產(chǎn)品以列表形式展現(xiàn)出來，并計算總的供貨產(chǎn)品件數(shù)和總金額，提供輸入框可填寫供貨備注信息，提供日期時間選擇器可選擇供貨日期時間，點擊確認(rèn)按鈕后進(jìn)行供貨數(shù)據(jù)提交，完成后給出提交成功的信息并返回小程序首頁。

onLoad方法部分關(guān)鍵代碼如下。

wx.cloud.callFunction({ //獲取已選擇的供貨物品

name: "getGoodList",

data: {

action: action,

searchKey: searchKey,

marketId: wx.getStorageSync('marketUser').marketId //只查該賣場庫存有的產(chǎn)品

}

}).then(res => {

let dataList = res.result.data;//管理員直接顯示

if (wx.getStorageSync('admin')) {//遍歷1,并把購物車購買數(shù)量填充進(jìn)來

dataList.forEach(good => {

good .quantity = 0;

cartList.forEach(cart => {

if (cart._id == good ._id) {

good .quantity = cart.quantity ? cart.quantity : 0;

}

})

});

let tempArr = [],endData = [];

dataList.forEach(item => { //遍歷2，進(jìn)行分類

if (tempArr.indexOf(item.fenlei) === -1) {

endData.push({

title: item.fenlei,

list: [item]

});

tempArr.push(item.fenlei);

} else {

for (let j = 0;j < endData.length;j++) {

if (endData[j].title == item.fenlei) {

endData[j].list.push(item);

break;

}

3.5 出貨流程分析與實現(xiàn)

賣場管理員在首頁點擊“去發(fā)貨”按鈕進(jìn)入出貨產(chǎn)品選擇界面，該界面復(fù)用供貨時的選擇供貨產(chǎn)品界面，在頁面的數(shù)據(jù)初始化時，系統(tǒng)調(diào)用指定的云函數(shù)getProductsByMarketId，查詢出賣場庫存產(chǎn)品(庫存數(shù)量值大于0)，頁面接收到返回的產(chǎn)品列表數(shù)據(jù)后，再將數(shù)據(jù)進(jìn)行重新分組，顯示出各個分類的產(chǎn)品數(shù)據(jù)，賣場管理員選擇本次出貨的產(chǎn)品后，點擊“選好了”按鈕進(jìn)入產(chǎn)品出貨填寫頁面，如圖2所示。在該頁面中，確認(rèn)出貨產(chǎn)品信息無誤，并需要上傳出貨發(fā)票截圖或拍照后進(jìn)行圖片上傳。

系統(tǒng)管理員在微信小程序端首頁，點擊出貨列表按鈕，選擇指定的賣場后，查看到該賣場的出貨記錄數(shù)據(jù)(按照出貨日期時間先后順序和紅包是否發(fā)放逆序排列)，點擊一條出貨記錄后，可查看到該出貨記錄的詳情信息，接著系統(tǒng)管理員對出貨圖片信息進(jìn)行核對確認(rèn)，并根據(jù)出貨產(chǎn)品總金額和總件數(shù)，填寫本次出貨的紅包發(fā)放金額，最后點擊保存按鈕完成出貨確認(rèn)和紅包金額數(shù)據(jù)的記錄。

圖2 產(chǎn)品出貨界面

圖3 出貨記錄詳情頁

在出貨記錄詳情頁面的最下方，我們利用微信小程序的頁面內(nèi)發(fā)起轉(zhuǎn)發(fā)接口，利用按鈕的open-type=“share”功能，將喚起跳轉(zhuǎn)與指定微信好友的聊天窗口，在聊天窗口中，系統(tǒng)管理員給賣場管理員發(fā)微信紅包，在回調(diào)函數(shù)中，將紅包發(fā)放金額記錄下來。出貨記錄詳情頁如圖3所示。

4 總結(jié)

筆者采用微信小程序開發(fā)技術(shù)，選取線下零售行業(yè)典型的業(yè)務(wù)場景，從企業(yè)日常業(yè)務(wù)實際需求出發(fā)，開發(fā)基于微信平臺的分銷商供貨出貨小程序系統(tǒng)。設(shè)計中，選取了當(dāng)前小程序開發(fā)技術(shù)中最新的平臺和工具，融合云函數(shù)、云數(shù)據(jù)庫、云存儲和內(nèi)容管理系統(tǒng)(CMS)，開發(fā)的系統(tǒng)不僅較好地滿足了企業(yè)管理者對產(chǎn)品管理和供貨管理的要求，同時也促進(jìn)企業(yè)零售端的產(chǎn)品銷售。系統(tǒng)中產(chǎn)品供貨、發(fā)貨等環(huán)節(jié)的運營數(shù)據(jù)報表自動導(dǎo)出(發(fā)送到企業(yè)郵箱)、云函數(shù)調(diào)用中的查詢接口代碼優(yōu)化、內(nèi)容管理系統(tǒng)(CMS)使用費用、小程序紅包發(fā)放接口功能開發(fā)和紅包使用費用等功能需要進(jìn)一步開發(fā)和完善。