分销商供货出货微信小程序的设计与实现

施 鹭

(芜湖职业技术学院 网络工程学院，安徽 芜湖 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)使用费用、小程序红包发放接口功能开发和红包使用费用等功能需要进一步开发和完善。