2023年6月28日发(作者：)

◎61万～200万中国科技信息2019年第1期·CHINA SCIENCE AND TECHNOLOGY INFORMATION Jan.2019DOI：10.3969/.1001- 8972.2019.01.027可实现度可替代度行业曲线linkappraisementindustry影响力真实度远方仿真行业关联度王 媛  基于微信小程序的线上交易平台通过微信开发者工具提交代码，等待审核；随着移动互联网时代的快速发展，线下面对面的现金交易模式已经越来越不符合社会发展的需要，也赶不上信息化引领企业发展的潮流。官方审核通过即可发布。文章基于微信小程序，借助java后端设计语言和微信小程序的界面实现技术（XML+WXSS+JavaScript）设计了一套基于企业内部的线上交系统概述易平台小程序。该系统分为个人用户端和商家用户端，可进行实时在线本文实现的线上交易平台分为个人用户端、商家用户端支付、交易记录查看、申请退款、处理退款及财务结算等功能，旨在提高企业的服务与保障能力。及商家子柜台。旨在企业内部为企业个人用户和企业商家用户提供线上支付功能，不同用户通过登录不同用户端软件可进行实时在线支付、交易记录查看、申请退款、处理退款及在这个信息高速发展的时代，我国的信息化技术也在迅财务结算等功能。该平台为用户提供高效便捷、良好的人机猛发展，诸如4G通信、智能掌上终端、二维码技术等日新交互体验，从而提高企业的服务与保障能力。月异的发展不断带给人们推陈出新的生活体验。依赖于智能本系统采用C/S（客户端、服务器）架构，基于微信客手机的微信已经是生活中人们接受率和使用率最高的一种通户端的小程序既发出各种操作请求到服务器端，也接收服务讯工具，而微信小程序是一款轻快的软件，在微信生态体系器端返回的大量数据信息。微信的服务器架起了客户手机和内，建立了友好、高效、一致的用户体验。又因其不用安装、用完即走、触手可及的优势，使用起来方便快捷。小程序提供了一套完整的开发框架、丰富的组件和API，可实现快速开发，因此，很多企业单位纷纷入驻微信小程序。传统的线下支付模式已经不能满足当前人们高效快速的生活步调，也降低了企业财务人员进行账单核算与统计的效率，甚至占用更多的人力和物力资源，增加企业负担。因此，有必要设计一个基于微信小程序的线上交易平台，服务企业员工，优化企业管理，提升企业内部保障能力。小程序接入流程微信小程序的开发需要遵循其独立的注册、发布流程，过程如下：在微信公众平台上注册小程序，完善基本信息；下载微信开发者工具进行编码；图1 系统消息流程图-78-CHINA SCIENCE AND TECHNOLOGY INFORMATION Jan.2019·中国科技信息2019年第1期61万～200万◎统分配的合法商家可通过微信扫描商家应用端二维码访问本系统。商家应用端登录角色分为2种：商家管理账号和商家柜台账号，不同的账号登录具备不同的功能。商家管理账号商家管理端主要实现的功能：账号安全设置，包括商家及子柜台登录密码的修改；完成商家在线交易；商家有权限处理用户的退款申请；商家可生成交易账单并以excel表格形式导出。商家柜台账号商家用户柜台端通过子柜台账号登录使用该系统，主要实现的功能：柜台有权限当面处理一小时之内的退款，超过一小时的退款申请，柜台没有权限处理；柜台端可实时接收个人用户的交易及退款申请语音播报；可查看该柜台所有交易记录。界面设计图2 系统功能结构图微信小程序前端界面设计是通过WXML+WXSS+JavaScript结合的方式实现，一个小程开发者服务器的一个桥梁，通过消息的传递和响应，实现了序框架页面文件由js页面逻辑、wxml页面结构、wxss页与用户的交互操作，小程序消息流程如图1所示。面样式表和json页面配置共同组成。其中VXML和VXSS属于渲染层，负责页面的布局和样式，JavaScript脚本工作系统设计在逻辑层，负责页面与后端服务器的逻辑工作，小程序的渲系统需求染层和逻辑层是分离的。json文件配置当前页面的window本系统主要考虑将企业内线下交易方式向线上无现金交表现。易方式转变。企业个人用户可通过该系统向企业内的服务商界面设计遵循微信官方小程序界面设计指南，建立了友家付款、查看个人消费记录、对一定时期内的消费申请退款好、高效、一致的用户体验。下面以具体实例介绍本系统界等。商家通过向个人用户出示系统生成的二维码完成线上支面设计方法。付过程，且商家有权限处理退款申请，可查看该商家账号下实例一：用户登录密码找回所有子柜台的的交易列表，并生成账单，以excel表格形式界面设计导出，方便财务人员对账核算。个人用户通过登录页的“忘记密码”链接进入“短信验功能设计证”页面，短信验证成功后进入“找回密码”页面，修改密码，本系统功能设计包括个人用户端和商家用户端（包含子完成登录密码找回功能，页面设计如图3所示。柜台），主要在企业内部为员工实现在线支付，为商家实现接口设计财务对账与账单导出等功能，系统功能结构如图2所示。企业内员工手机号码验证通过才会向服务器获取验证个人用户端码，否则提示“该用户不存在”。用户短信接收到验证码之本系统不对外开放注册功能，未分配登录名和密码的非后再向服务器请求检查验证码的正确性，正确则跳转至修改企业员工不能登录该系统。企业内个人用户通过微信扫描个人用户端二维码访问该系统，扫描成功则进入个人用户端登录页面，通过登录名和密码登录系统。个人用户端主要实现的功能：实时在线支付交易；查看个人信息、余额信息及交易记录信息；设置个人账号安全，包括个人登录密码修改，交易密码设置与修改及用户登录密码找回；申请退款，用户可在交易记录页对七日之内的消费申请退款。；用户可在退款页查个人所有看退款信息及退款详情。商家用户端本系统为企业内服务商家提供登录账号和登录密码，系图3 界面设计—短信验证、密码找回-79-◎61万～200万中国科技信息2019年第1期·CHINA SCIENCE AND TECHNOLOGY INFORMATION Jan.2019图5 界面设计—商家交易账单及导出该过程中，loginName为用户手机号码，memberType代表用户端验证码，checkCode为获取到的短信验证码，codeType代表类型是找回密码的验证码。修改密码时的接口：url：fix+”recoverUserLoginPwd”，data：{userTel：lphone，userLoginpwd：_1，}，该过程中的url是修改密码时请求服务器的接口地址，data参数中，uerTel是用户手机号码，userLoginpwd是新输入的登录密码，通过手机号码查询更改用户登录密码。流程设计密码找回功能流程设计如图4所示。图4 用户登录密码找回流程实例二：对账单生成及导出界面设计密码页，否则提示“验证码错误或过期”。商家管理员通过管理账号登录商家应用，可通过“交易向后台请求获取验证码的接口：记录”查看商家所有柜台的交易信息。导出模块可筛选柜台、url：fixCom+”wx/时间段、账单状态生成相应的对账单列表，并以邮件格式导createCheckCode”，出EXCEL账单文件。界面设计如图5所示。data：{接口设计loginName：umber，A．获取交易列表的接口：memberType：2，url：fixUser+”getBusinessTrcodeType：1，}，ansactionInfo”，该过程中，url是微信请求服务器的接口地址，datadata：{为请求的参数，其中loginName为用户手机号码，businessId：ssId，memberType代表用户端验证码，codeType代表类型是subIds：tr，beginTime：that.找回密码的验证码，用户输入的手机号码验证通过，即可通startDate +’00：00：00’，过该手机号收到短信验证码。endTime： endDate +’23：59：向后台请求检查验证码的接口：59’，url：fixCom+”wx/status：_id，verifyCheckCode”，pageSize：ze，data：{startRecord：umloginName： umber，}，memberType：2，该过程中，url即为页面加载时请求获取交易列表的接checkCode：eCode，口地址，data参数中，businessId为商家用户Id，subIdscodeType：1，}，为柜台的Id号，beginTime为获取列表的开始时间，-80-CHINA SCIENCE AND TECHNOLOGY INFORMATION Jan.2019·中国科技信息2019年第1期61万～200万◎endTime为结束时间，status为订单状态（0/1：正常/异常），pageSize为一次获取记录的条数，startRecord为每次获取记录的开始条数。这些参数将根据查询条件取不同值向服务器请求获取到相应条件的列表。B．导出账单时的接口：url：fix+”sendTransacationMail”，图6 获取交易列表流程data：{businessId：ssId，subIds：tr，beginTime：startDate+’00：00：00’，endTime：endDate+’23：59：59’，status：_id，businessMail：fo.图7 导出交易账单流程businessMail}，（res）该过程中，url为请求发送邮件的接口地址，data包含if（ != null）{查询的参数信息及接收账单的邮箱地址。ast（{流程设计title： ，商家在交易页面查看交易列表，筛选出账单列表后，通duration： 2000，过导出按钮向后台请求发送邮件，发送成功提示邮件发送成icon： ‘none’，}）}}，功，否则提示邮件发送失败。获取交易列表流程设计如图6fail：function（）{所示，导出账单流程如图7所示。ading（）ast（{title：’connect failed’，关键技术icon：’none’，duration：2000}）t}，t是腾讯封装好的一个request请求的函数，complete： function （） {}}）}是小程序客户端与服务器端交互的接口，只能发起 HTTPS

}）网络请求。小程序通过request直接发起url请求与后台进Request请求中，包含了请求的接口地址url，参数行数据交互。Request请求方式如下：data，头部header，方法method，success、fail及t（{complete函数。url：fix+”sendTransacationWebSocketMail”，商家子柜台端登录后能够实时接收个人用户交易及退款data：{申请的语音播报，即小程序需要即时接收服务器端推送的消businessId：ssId，息，使用小程序的API WebSocket实现。一个微信小程subIds： tr，序同时只能有一个 WebSocket连接，如果当前已存在一beginTime：startDate+’00：个WebSocket连接，会自动关闭该连接，并重新创建一个00：00’，WebSocket连接。endTime：endDate+’23：59：使用tSocket创建一个Socket连接，59’，etMessage监听WebSocket接受到服务器的status：_id，消息事件；ocke关闭WeSocket连接。businessMail：ssMail结语}，本文通过分析微信小程序的特点及关键技术，设计了一header：{“Content－Type”：”application/x－套C/S架构的企业内部线上交易平台，比传统APP的开发www－form－urlencoded”}，难度和成本更低，且易于推广，符合当今互联网“微、小、轻”method：’POST’，的产业发展趋势。企业可采用该平台管理和服务广大员工，success： function （res）{提高企业财务核算效率，节约企业成本，提高企业信息化程ading（）度，符合当代移动互联网发展潮流。-81-