分銷商供貨出貨微信小程序的設計與實現

施 鷺

(蕪湖職業技術學院 網絡工程學院，安徽 蕪湖 241000)

0 引言

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

1 開發技術

1.1 開發平臺

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

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

1.2 微信小程序代碼結構

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

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

1.3 小程序云開發

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

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

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

2 系統需求分析

2.1 需求分析

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

分銷商的需求：一個簡單易操作的Web后臺管理入口，分銷商可以批量導入系統中的基礎數據，包括供給賣場的產品的分類數據、產品圖片資料、產品價格、賣場信息、賣場管理員賬號信息等，分銷商通過微信小程序端，能夠收到各個賣場的出貨消息提醒，查看出貨信息詳情，填寫獎勵紅包發放金額，完成紅包發放給賣場管理員的操作。

分析賣場的需求：賣場管理員從小程序端登錄完成后，可查詢本賣場的產品庫存信息，進行供貨產品的收貨確認、出售產品完成后進行產品出貨業務操作等。在前期的需求調研中發現，各個賣場的管理人員容易發生變動，因此系統中，賣場管理員賬號需要和實際的賣場管理人員的微信號、手機號進行綁定，并由系統管理員在小程序的后臺統一管理分配該賬號。

2.2 系統總計設計

本系統的用戶角色分為系統管理員(分銷商)和賣場管理員兩類，系統管理員完成企業產品數據的維護工作，可以查看到各個賣場庫存、賣場發貨訂單數據并進行產品供貨管理，賣場管理員查看到自己的賣場庫存數據，完成產品收貨、產品出貨、賬號轉移等工作。系統的結構功能如圖1所示。

圖1 系統的結構功能圖

3 系統功能設計與實現

3.1 云數據庫設計

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

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

表1 出貨表sale

3.2 云函數定義與實現

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

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

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

表2 主要的云函數

在小程序端，實現分頁查詢時，需要構建頁面的數據列表數組productList，結合頁面的onReachBottom事件實現分頁查詢；當用戶下拉頁面時，程序將觸發onReachBottom事件代碼的執行，將新分頁的數據偏移量參數傳入到云數據庫中進行數據查詢，將返回的數據結果填充到productList數組中。在云函數端，需要解決一次性查詢全表數據的問題。

獲取賣場數據getMarketList云函數部分關鍵代碼如下。

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

//先取出market集合記錄總數

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

console.log(countResult)

const total = countResult.total

//計算所有market數據需分幾次取出來

const batchTimes = Math.ceil(total / MAX_LIMIT)

//承載所有讀操作的 promise 的數組

const tasks = []

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

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

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

tasks.push(promise)

}

//返回market全表的數據

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

return {

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

errMsg: acc.errMsg,

}

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

3.3 用戶登錄授權

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

3.4 供貨流程分析與實現

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

onLoad方法部分關鍵代碼如下。

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

name: "getGoodList",

data: {

action: action,

searchKey: searchKey,

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

}

}).then(res => {

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

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

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，進行分類

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 出貨流程分析與實現

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

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

圖2 產品出貨界面

圖3 出貨記錄詳情頁

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

4 總結

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