基于MPVUE技术的二手书交易小程序的设计与开发

霍 英，陈小曼，曾耿海，曾佳锴

（1.韶关学院 信息科学与工程学院；2.韶关学院 外语学院，广东 韶关 512005）

大学生是一个阅读书籍广泛的群体，不论是休闲类书籍还是科教类书籍，时间久了，书籍就会越来越多，而这其中有很多书不会再反复阅读［1］；加上高年级学生毕业之际，书籍过多携带不便，大部分会选择丢弃，这样就造成了资源浪费.同时，低年级学生为了学习，也会寻求二手教材、教辅书和考试类等各种书籍，而这类书籍往往是高年级学生使用过后不再需要的，因此二手书的流通与交易存在着较大的市场.

针对这些问题，笔者利用MPVUE技术建立了一个二手书交易小程序——“旧书屋”.用户只需通过微信进入旧书屋小程序，就可在平台上发布各类二手书的需求、查看平台上各类书籍的信息、并根据情况来选择二手书的交易，帮助用户实现资源的循环利用，在减轻学生经济负担的同时，也有助于环保.

1 相关技术概述

1.1 MPVUE技术

MPVUE是美团开源的一套语法，是与vue.js一致的、快速开发小程序的前端框架，可达到小程序与H5界面使用一套代码，同时为H5和小程序提供了代码复用的能力，使用快捷方便，适合本项目的开发［2］.MPVUE修改了vue.js的runtime和compiler实现，使其可在小程序环境中运行，但MPVUE要预编译成wxml，开发过程中只支持.vue的文件格式，不支持动态组件、自定义render和字符串模版等，同时小程序的事件绑定是以vue的语法来绑定的，因此MPVUE与原生小程序还是有区别的.

1.2 知晓云服务器

知晓云是爱范儿旗下继知晓程序后又一个基于微信生态的重要产品，它是一个方便易用的小程序开发工具，免去了小程序开发中服务器搭建、数据接口实现、域名备案等繁琐流程［3］.让程序开发更专注于业务逻辑的实现，采用知晓云搭建“旧书屋”小程序后台，门槛更低，效率更高.

1.3 mp-weui库

mp-weui是基于MPVUE和weui-wxss的微信小程序 UI库，是一套同微信原生视觉体验一样的样式库，由微信官方团队为微信 Web量身设计，使用户的使用感知更加统一，包含icon、button、dialog、article等各式元素［4］.

2 系统功能设计

通过问卷法、访谈法、文献阅读等多种调查形式对高校学生二手书交易的需求和实际情况进行分析之后，“旧书屋”将以微信小程序作为载体，用户不需要下载安装即可使用，用户即不需要担心手机容量的问题，也体现了“用完即走”的绿色环保理念［5-6］.在功能实现方面，主要分为图书展示、图书发布、联系卖家和个人中心管理 4 个模块［7-8］（见图 1）.

图1 系统功能结构图

2.1 图书展示模块

主页的书籍列表面向用户直观的体现书籍的信息，使用户一目了然.由于书籍种类繁多，买家未必知道所有书籍信息，可对书名进行半匹配查找需要的二手书，方便用户更快地找到相应的图书.当用户在书籍列表搜索不到想要的书籍，还可发布求购信息进行求购，买家也可对喜欢的书籍进行收藏.

2.2 图书发布模块

模块主要用于用户出售书籍时，对图书的情况进行简单介绍，及价格的发布等内容的填写.为提高用户体验、方便用户使用，系统可使用两种不同方式对图书信息进行发布，分别为手动添加和扫码添加图书信息.扫码添加时，卖家可通过手机扫书籍背面的条形码后获取书籍封面、书籍名称、书籍出版社等信息，再补充书籍价格、新旧程度、详细介绍等信息，以便有购买需求的用户了解此书的具体情况.

2.3 联系卖家模块

系统中买家通过该模块发出信息与卖家联系，系统就会跳转到聊天界面，“旧书屋”消息交流过程就开始了，之后所有和该联系相关的消息都会显示在消息模块中.买家可直接在此聊天界面进行消息发送，系统会自动将此消息发送给卖家；买家也可选择在聊天界面顶部直接一键复制微信号进行联系.为了避免信息泄露，买家必须通过个人中心管理模块中的身份认证，以确定真实身份，只有认证通过的用户才可使用一键复制微信号的功能进行聊天，并进行后续的交易.

2.4 个人中心管理模块

目前“旧书屋”小程序主要针对同一高校的学生使用，为了保证用户数据的安全，例如当用户想要卖书或者复制卖家微信号时，需要利用校园mis系统进行身份验证，只有本校的学生进行身份认证后才可进行交易，保障了学生信息的安全性.

用户也可在个人中心看到自己正在出售的书籍信息及收藏的书籍，管理发布过的图书信息、对自己发布过的图书进行下架处理等.

3 MPVUE技术在二手书交易小程序中的应用

3.1 系统结构

系统通过vue-cli脚手架生成了基于WebPack的开发环境，在开发过程中又添加了vuex、vue-router等功能，最终系统的项目结构见图2［8］.其中build主要是项目构建（webpack）的相关代码；config是项目开发环境配置；node_modules是npm加载的项目依赖模块；src是源码目录，也是整个项目的核心：components是独立页面组件的存放目录，app.vue是页面的总入口文件；main.js是程序的入口文件，加载各种公共组件；index.html是首页的入口文件；static存放着一些静态资源，如图片、json数据等.

3.2 组件拆分

vue组件在模板中使用之前需要先进行注册.vue提供全局注册和局部注册两种注册组件的方式［8］.组件注册时，需要通过Prop定义组件的一些自定义特性，作用类似于函数中自定义的变量.组件的每次调用都会创建一个新实例，因此每个组件会独立维护自身的变量.

系统根据原型的结构共设计出书籍卡片组件、消息框组件、扫码图书组件、徽章组件、买书组件、售卖组件、导航栏组件、卖书组件及聊天组件等9个组件（见图3）.其中导航栏组件用于主页，进行卖书组件和买书组件的切换以及分类的选择和搜索；书籍卡片组件用于所有的页面，进行书籍信息的介绍；消息框组件用于在消息页面展示用户的消息记录；扫码图书组件用于用户点击扫码识别条形码添加图书后填写信息；徽章组件用户在个人中心展示一些小的栏目，如我的售卖等；买书组件用于书籍展示；卖书组件用于展示用户添加图书的两种方式；聊天组件主要用于用户的聊天信息的展示、消息的发送；售卖组件用于展示用户的售卖书籍信息以及状态.

图2 系统总结构图

图3 “旧书屋”小程序组件

图4 系统主页

3.3 功能实现

3.3.1 图书展示模块的实现

主页的头部导航栏使用navbar组件，分为“买书”和“卖书”选项，首先展示的是买书模块（见图4）.当用户进入主页，点击任意一本书籍时，系统会判断storage里面userinfo值对应的value是否存在，从而判断用户是否登录.若用户未登录，系统将提示“请前往个人中心进行授权登录”.登录后，再次进入主页，在当前的组件DOM生成后会触发当前页面的mounted钩子函数，在钩子函数中向知晓云服务器的书籍表发送请求，批量获取数据项；请求成功后，使用微信小程序的原生组件scroll-view可滚动视图区域进行一个包装，并将每一本书籍进行一个封装，封装成一个名为card组件［9］.通过v-for循环card组件并把每项数据传给card组件，生成书籍列表，显示所有书籍数据.这些操作都要在mounted钩子函数中完成，因为只有这样在用户看到页面时，书籍列表已经渲染成功了，不会让用户等待太久，提高用户的体验.

主页导航栏类别的实现选择使用原生组件picker，默认属性mode=selector是普通选择器.用户通过点击类别按钮，弹出遮罩层，若有用户选择了四六级资料的选项，系统会执行PickerChange函数，获取用户点击的选项值e.mp.detail.value，判断this.categoryarray［e.mp.detail.value］是否与当前分类一致，如不一致则筛选出所选择的分类所对应的数据.

3.3.2 图书详情页面的实现

用户在主页通过点击主页书籍卡片组件，每个书籍卡片中信息会通过url中参数的传值传递到图书详情页面，详情页面中执行生命周期函数后把书籍渲染出来展示给用户.书籍详情页面头部复用了card组件，向用户展示了书籍备注及一些额外的书籍图片.用户进入书籍页面，通过created钩子函数获取storage的用户id，通过v-if判断是否与书籍的created_by（创建人id）一致，若一致则查看的书籍为用户自己发布的书籍，那么右下角的按钮分别为“管理”按钮和“收藏”按钮.如不一致，“管理”按钮将变为“给卖家留言”按钮.之后会触发当前页面的mounted钩子函数，在钩子函数中执行getBook函数，getBook函数将接收到的书籍id通过知晓云传送到数据库，获取书籍的详细信息并反馈在页面上.

3.3.3 图书发布模块的实现

为了给用户更好的操作体验，图书发布模块分为手动添加图书及扫码添加图书两种不同的操作（见图5、图6）.当用户选择扫码添加图书时，系统会调用微信的scanCode扫码api获取isbn编码（核心代码如下所示），通过小程序网络api中的网络请求wx.request把isbn编码post到豆瓣图书接口，豆瓣服务器响应请求并返回对应的图书json数据，其中包括图书分类、出版社、书籍名称、作者及书籍封面，用户只需要再填写新旧程度、价格、微信号和介绍就可以提交发布.同时除了从豆瓣获取到的封面图片，用户还可自己上传图片，达到完善图书信息的目的.

图5 选择发布方式

图6 发布图书页面

图片上传存储到知晓云服务器里核心代码如下：

chooseImage（e）

{var_this=this；

wx.chooseImage（{

sizeType：［"original"，"compressed"］，//可以指定是原图还是压缩图，默认二者都有

sourceType：［"album"，"camera"］，//可以指定来源是相册还是相机，默认二者都有

success： function（res）{

_this.files=_this.files.concat（res.tempFilePaths）；

console.log（res.tempFilePaths.length）；

for（var i=0；i＜ res.tempFilePaths.length；i++） {

let MyFile=new wx.BaaS.File（）；

let fileParams={filePath： res.tempFilePaths［i］ }；

let metaData={categoryName："用户图书详情图片"}；

/

/图片循环上传图片上传存储到知晓云服务器里“用户图书详情图片”文件夹里

MyFile.upload（fileParams， metaData）.then（

*注：只要是服务器有响应的情况都会进入success，即便是4xx，5xx都会进入这里

*如果上传成功则会返回资源远程地址，如果上传失败则会返回失败信息

*/ //let data=res.data//res.data为 Object类型

console.log（res）；

_this.imgfiles.push（res.data.path）；//接收回调函数返回的图片数组，push进imgfiles数组里，并渲染出来 }，

err=＞ {} ）； }

console.log（_this.imgfiles）； }， }）；}，.

3.3.4 联系卖家模块的实现

用户在书籍详情页面对卖家发起联系，在聊天界面发送消息给卖家，当消息发送成功时，系统会发送一个消息模板给卖家（见图7）.页面顶部的微信号已被加密，用户无法查看，当点击复制会弹出提示框“请前往个人中心进行身份认证”，点击确定则调用微信wx.navigateTo api跳转到个人中心页面.当卖家通过个人中心的身份认证即可返回聊天界面一键复制微信号.顶部复制按钮的一键复制功能采用了微信小程序原生设置系统剪切板api wx.getClipboardData.

图7 联系卖家页面

图8 消息页面

用户可在消息页面查看已建立聊天的记录.在message页面中，通过访问数据库查找已建立联系的信息记录，在消息页面中，每一个消息框都是一个组件mess，通过v-for循环mess组件并把每项数据传给mess组件，生成消息框，显示所有已联系过的记录（见图8），核心代码如下：

＜div＞

＜div v-for="data in messdata" ：key="index"＞

＜mess ：data="data" ：avatar="avatar"＞＜/mess＞//v-for循环组件 mess

＜/div＞

＜/div＞

4 结语

笔者采用MPVUE技术和知晓云平台搭建了一个面向高校学生的二手书交易小程序，实现了浏览书籍信息、发布售卖信息、用户进行交流等核心功能，并在韶关学院大学生中进行了初步的应用［10］.系统能够有效促进二手书的交流，解决高校二手书被大量浪费的问题，在降低用户经济成本的同时，也起到了良好的环保作用.同时本系统无需安装，使用简便，达到了较好的用户体验效果［11］.