《基于微信小程序的礼物设计与实现》8100字（论文）

基于微信小程序的礼物设计与实现目录TOC\o"1-3"\h\u236231引言 4206862开发技术以及开发工具简介 5229462.1开发技术 5159622.1.1Node.js开发平台 5151782.1.2VantWeapp小程序UI组件库 623352.1.3JavaScript语言简介 6163522.2开发工具 7123682.2.1VisualStudioCode开发工具 71482.2.2微信开发者工具 7194553系统分析 846863.1系统实现目标 8281943.2系统可行性分析 953903.2.1技术可行性 9238043.2.2经济可行性 9192804数据库设计 9310874.1数据库表关系分析 9249444.2表设计 11310455系统功能实现 1134345.1系统基础模块功能介绍与实现 1172945.1.1用户授权登陆功能 11126525.1.2人物刻画功能 12322725.1.3礼物添加功能 12163975.1.4礼物搜索功能 12255465.1.5礼物排名功能 13223125.1.6

礼物页面分享功能 14200266系统的测试 14283366.1开发环境及工具 14206706.2系统测试的主要内容 1489466.2.1用户授权登陆功能测试 15151496.2.2人物刻画功能测试 1777156.2.3礼物添加功能测试 18106856.2.4礼物搜索功能测试 198166.2.5礼物排名功能测试 20299596.2.6礼物页面分享功能测试 2131046.3系统测试结论 2329177结语 2424725参考文献 25摘要:如今的礼物推荐系统少见，且大多都比较繁琐，包含了其他无关的功能，，因此设计一款简单明了且操作简便的礼物推荐系统极其重要。本研究基于微信小程序，运用了VantWeapp组件，JavaScript，node.js和微信开发工具中的云开发控制等相关技术。该系统实现了简便明了的礼物推荐，礼物查询，以达到帮助用户精准得到心仪礼物的功能。关键词：VantWeapp组件;JavaScript;微信云开发;1引言现如今社会，每个人都得送礼物给别人，送同事，送朋友，送父母，还有送男女朋友等等，而且不同的节日，不同的场合，送的礼物类型也是需要分情况的，这导致大多数人都在送礼物上都会有许多烦恼，不知道送什么合适，打开购物软件，或者去实体店挑选，都要花费好久的功夫，而且选取的礼物也不知道是否合乎对方的心意，既浪费了时间，又不知道到底选的礼物是否合适，一旦不合适，就导致了尴尬的境地。而一个好的清晰地礼物推荐，方便了现在的人们不需要花费大量时间去挑选礼物，不需要在挑选礼物这件事情上劳心劳力而又可能不讨好，这是极其方便人们的。现如今大多数购物软件并不会给你推荐具体的礼物，搜索礼物出来的一堆东西，还需要你自己劳时劳力的去挑选，我的课题研究将会解决这种问题。国内研究状况:目前研究这方面的得课题还比较少，在《\t":3519/kns8/defaultresult/_blank"基于Python个性化礼物推荐系统的设计与实现》之中，提及人们在社会交往中必须需要赠送礼物,那么选择一款符合对方心意的礼物就显现的极其重要。为了帮助人们更方便地选择合适的礼物,论文的作者开发了一款基于Python语言并且整合了各个购物平台礼品信息的礼物推荐系统。网络爬虫技术是一种自动获取网络上数据的技术，这种技术有诸多优点,可以根据具体的要求和条件查询出来网络上的数据和信息,并对获取的数据进行处理、清洗掉无用的信息,最终得到自己需要的数据。这款系统使用网络爬虫技术获取各大购物平台的礼物信息并整合到该个性化推荐系统中，对于用户体验感来说十分满意。由于Python提供了强大网络爬取功能,还拥有网页处理能力,写爬虫代码也更方便,所以选用Python语言实现该系统的网络爬取功能。还有刘星晨、陈乐生等人的《基于深度学习的挑选礼物APP设计与实现》，他们的这篇论文是关于一款APP，这款APP是采用Java语言在Android系统下开发出来的。这款APP能够帮助用户构建人物肖像，智能的为用户提供符合心意的礼物。他们的开发工具为AndroidStudio，而这款APP的后台采用的是SSH框架，功能模块为MVP架构，这是目前比较通道的框架和架构，使用起来也比较合适且方便。由于这款APP实在Android环境下开发的，所以这款APP的页面跳转功能，作者运用了Service和Internet两大功能，在礼物数据存储方面，则采用了SharePreference和SQLite功能，然后将礼物信息和UI进行整合，最终到页面上，最后进行测试环节。作为一款APP，他的使用对象即为用户，作为用户，会有权限进行很多的功能使用，例如，人物刻画，购物车管理，查看礼物信息等。而作为APP的开发者，即为这款APP的管理员，管理员能够管理后台中用户信息的存储和修改，而且最重要的是管理礼物信息，还有订单的处理，购物车的管理等功能。国外研究状况:《\t":3519/kns8/defaultresult/_blank"GiveEmThis:个性化礼物推荐搜索引擎》这篇文章是谷歌提出来的，这篇文章着重介绍了Implylabs预测技术，这是GiveEmthis内核的主要算法，它能够通过采集Facebook用户的各项信息，例如他们的账号的数据，在Facebook上的行为方式，分享给其他人的链接等等，这些信息都会成为ImplyLabs算法的变量，进而通过这项算法得到令人满意的结果。2开发技术以及开发工具简介2.1开发技术2.1.1Node.js开发平台Node.js是RyanDahl开发的，对于JavaScript这门语言是相当重要的一个开发平台，它使得JavaScript能够和PHP、Python等语言并驾齐驱，而这个平台实质上是对ChromeV8引擎进行了封装处理。ChromeV8引擎采用了其他引擎没有的新技术，这使得开发者在使用JavaScript这门事件驱动语言时，不仅很大地提升了运行速度，并且降低了很大一部分开发成本。Node对性能方面的要求很严格，而作为事件驱动语言的JS，被Node完美的利用了这个优点。Node可以构建出性能和扩展性都极高的服务器，这是因为它采用了事件循环的架构，使得服务器变得简单且安全。作为开发者而言，他们提高服务器性能的方法有很多，可是Node构建出来的高性能服务器，降低了开发复杂度的架构，这对于开发者来说，是极其方便的。并发编程有很多不易察觉的错误，在编程的过程中很容易掉入陷阱，而Node则将这些陷阱都一一略过，大大提高了开发者的工作效率。事件循环的架构是Node所采用的架构，它是采用一系列“非阻塞”库的方法来支持事件循环。而这种架构的本质是为数据库等提供接口，当系统发送请求的时，不用进行寻址而直接检索，根据存储空间是否合适，这时候接口就会通知Node。关于对于慢资源的访问，Node的可扩展性简化了这项操作，这样的优点是非常直观明了，通俗易懂。而经常使用DOM事件的用户，Node的使用对于他们来说，是十分方便的事情。Node的最大特点是可以将JavaScript这门事件驱动语言在服务端运行起来，但是这并不是Node独有的功能。虽然很多其他平台也可以支持JavaScript在服务端进行运行，但是Node是功能最为完善，且使用比例最高的平台。我们都应该知道，浏览器的环境限制了我们自由开发前端时所使用的语言，所有的服务器和浏览器的客户端的应用进程之间只能够通过JavaScript在实现代码共享的功能，这就让Node更加合适这门语言在服务端运行。2.1.2VantWeapp小程序UI组件库Vantweapp是一项轻量，优化的小程序组件库，开发者使用起来非常方便，利于开发，缩减了开发的时间，提高了开发效率。目前，Vant官方只提供了两个版本供开发者使用，分别是微信小程序版本的和Vue版本。开发微信小程序过程中，Vantweapp提供包含了基础组件、表单组件、反馈组件、展示组件、等等，包含的内容比较全全面。当用户使用时，只需要在当前页面的json或者全局的json中导入，然后根据定好的格式和自己的需求来适当修改，最终完成功能。2.1.3JavaScript语言简介JavaScript是一种解释性，多范式的前端开发语言，是一门不断更新发展的语言，它包含三个主要内容，分别为DOM、BOM、和ECMAScript语法。作为JavaScript重要的组成部分，事件是必不可少的，用户与网页交互时产生的操作，称为事件。事件由用户引发，也可能是页面发生改变而引发，甚至还有你看不见的事件，绝大部分事件都由用户的动作所引发，如：click事件，onmouse事件，这是鼠标事件中的部分，而keydown事件，按下键就可以触发，而keypress则是按下后按键弹起时才会触发，这是键盘事件中的一种，还有很多其他的事件。2.2开发工具2.2.1VisualStudioCode开发工具VisualStudioCode是一个运行于各大操作系统之上，用于编写目前web端和移动端，并且在云开发上也有重要的地位。2.2.2微信开发者工具微信开发者工具是微信官方为微信小程序开发者提供的一项极其方便的工具，开发者可以直接使用微信开发者工具进行小程序的编写，调试，还有真机演示等功能。而且它有两种开发模式，分别为公众号网页调试和小程序调试。云开发控制平台在微信开发者工具中，选择云开发时，在云开发控制平台之中，可以更方便的创建数据库，实现云存储和写入云函数，极大地节省了空间。在云开发控制平台中的数据库中可以任意手动更改，添加，删除，还有对数据进行权限设置，对于集合中的每条数据，分别可以设置不同的权限来进行不同的功能运行。云函数就是在云端运行的函数，云函数由多个文件组成并且占用部分内存资源；各个云函数之间相互独立，可部署于不同区域。开发者脱离了服务器的束缚，只需要将已完成数据代码部署在小程序云端即可实现调用。云函数的代码写法和JavaScript的写法没有什么区别，云函数的代码运行在云端Node.js中。当小程序需要某个功能时，可以在云函数端调用写好的云函数代码，然后代码会在node.js运行环境中执行。在云函数端进行网络请求等一系列操作，其实和我们在Node.js运行环境中使用JavaScript是相同的。当你想使用多种服务时，还可以通过云函数后端SDK进行搭配，从而达到一系列的多种服务。这些服务包括:使用云函数SDK中提供的数据库和存储API进行数据库和存储的操作等等，这些服务可以通过存储后端的API文档和数据库进行参考使用。云函数可以和微信登陆功能完全整合是其独特优势所在。云函数提供了高安全，强稳定的云存储功能，能够存储任意数量和形式的数据，如视频和图片，进而在云开发控制平台进行可视化的管理。3系统分析3.1系统实现目标首先，针对该系统进行开发前的需求分析，分别研究礼物的管理，用户的管理，还有人物的刻画管理，归纳出该系统的功能需求。详细的系统实现目标如下：1.人物刻画功能，刻画需要被送礼物的对象,达到礼物精准推荐的能力。用户可以通过性别，职业，星座，地域，等具体刻画，得到精准的的礼物推送，更加方便用户，减少用户为了找个合心意礼物的时间。2.礼物分享:分享用户选礼物心得供其他用户参考，用户可以分享小程序给其他用户。3.界面优化设计，根据Photoshop软件，对图片和模块的展示进行优化，然后在小程序页面上显示出来。4.管理礼物的排名，用户点击喜好按钮之后，修改数据库的信息，再次在页面渲染的时候，将按照新的排名顺序渲染出来5.授权登录功能，用户点击授权登陆按钮之后，进行授权登陆，然后将用户信息存入云开发的数据库之中。6.礼物分类功能，礼物按照分好的类别存放在数据之中，然后在查询的时候搜索应该有的分类，显示出对应的礼物信息图1礼物推荐功能图3.2系统可行性分析3.2.1技术可行性精准礼物推荐的微信小程序借鉴了原始的小程序框架Mina，数据库方面则使用了微信小程序云开发控制中心中的数据库。该数据库是微信小程序开发中官方提供的数据库，完全契合小程序开发。前端开发使用WXML，WXSS，JavaScript脚本语言，以及VantWeapp组件库的使用。优化响应速度方面通过使用AJAX异步请求技术来增加用户的使用体验，用JSON来进行数据存储和交互，MIna框架在小程序开发的领域中已经发展的十分成熟了，能够帮助开发者开发各式各样的小程序。3.2.2经济可行性该小程序开发所需经济成本不高，仅需一台性能较高的笔记本电脑就能够支撑微信开发者工具运行。同时该微信小程序开发完成后，可以很好的降低人力成本，因此该系统具备经济可行性。4数据库设计数据库是什么重要的部分，首先要对数据库进行需求分析，根据需求分析建立数据库集合。4.1数据库表关系分析本系统的数据库包括了用户，礼物相关信息。经过分析，便可得到礼物推荐的维信小程序对应的实体和属性。礼物推荐微信小程序的用户表：（城市，国家，语言，用户名，省份，用户id，头像）;如下图所示。图2用户实体及属性图礼物推荐微信小程序的礼物表：（星族，标题，价格，图片，省份，礼物id，年龄，统计访问量，性别）;如下图所示。图3礼物实体及属性图4.2表设计User表用来存储基本的用户信息，如表1。表1User表编号次序字段的名称数据类型字段说明1_id字符型用户ID2avatarUrl字符型用户头像3city 字符型用户城市4country 字符型用户国家5language字符型用户语言6nickName字符型用户名title7province字符型用户省份Products表用来存储角色的相关信息，如表2。表2Products表编号字段字段的名称数据类型字段说明1_id 字符型礼物ID2age字符型年龄区分3image字符型礼物图片4numm整数型统计访问量5price浮点型礼物价格6sex字符型性别区分7title 字符型礼物标题8xz字符型星座区别5系统功能实现5.1系统基础模块功能介绍与实现5.1.1用户授权登陆功能用户通过点击授权登录按钮，进行授权登陆，并将页面跳转到微信小程序的首页，进行礼物挑选，而进行授权登录后，后台会获得用户的微信头像，用户的国家、省份、城市、用户的使用的语言、还要用户名，然后并将其存放到云开发控制平台的数据库中，得到用户的完整信息。图4用户授权登陆流程图5.1.2人物刻画功能用户进入礼物搜索界面，然后进行人物刻画功能，根据给出的规范内条件进行人物刻画，选择下拉式的滚动条来选择具体的条件。例如星座，性别，地域，年龄段等等进行精准的人物刻画，从而进行更加精准的礼物推荐。5.1.3礼物添加功能当有更加符合的礼物出现时，在数据库的products集合中添加新的礼物信息，在礼物添加界面，填好具体的礼物信息之后，点击添加按钮，将新的礼物信息添加到数据库之中，也可以打开云开发控制平台，在products集合中手动添加一个礼物的信息。5.1.4礼物搜索功能为了精准负责用户对礼物信息的推荐，本微信小程序提供了精确地搜索功能，用户可以通过从底部弹起的滚动选择器来进行人物形象的刻画的方式，进行礼物信息的查询。当用户选择完任务的形象后，通过点击查询按钮，连接后台数据库，然后获取到符合条件的礼物信息，然后将其渲染到微信小程序的页面上，展示给用户，用户可以清楚地礼物的价格，名称，外观等一系列的信息。图5礼物搜索功能模块图5.1.5礼物排名功能当用户完成礼物搜索功能之后，搜索出来的礼物将会以卡片的方式呈现出来，而在卡片上有两个按钮，一个是喜欢的按钮，一个是不喜欢的按钮，不管用户点击哪个按钮，数据库中的numm字段都会发生变化，由于搜索出来的礼物是根据products集合中num的大小进行的排序，所以通过用户点击按钮，numm字段的值发生变化，当再次查询时，礼物的出现排名会发生变化。图6礼物排名功能模块图5.1.6

礼物页面分享功能

用户点击当前页面的右上角的功能按钮，会出现分享给好友的功能提示，用户点击后会弹出来分享界面，点击发送即可发送给好友。6系统的测试6.1开发环境及工具微信小程序在开发过程中不可避免的会出现各种错误,为了保证小程序的质量和运行时的流畅，必须进行微信小程序的测试。本次软件测试使用系统环境如下：win10专业版操作系统，node.js开发平台，vantweapp组件，构建npm，维信开发者工具，云开发控制平台等。6.2系统测试的主要内容软件测试是软件生命周期中最后也是不可或缺的重要阶段,是软件工程的重要组成部分。微信小程序的测试会直接影响小程序的质量运行以及后期交付和使用。本次测试主要测试系统的功能实现情况是否完成。包括系统的是否能够正常授权登录，系统的核心功能是否可以正常工作。同时本次测试的目的也旨在发现问题并找出系统内隐含的bug。6.2.1用户授权登陆功能测试用户授权登陆功能测试分为两种情况，一种是用户授权后没有进入到维信小程序的首页，另一种是授权登录后，后台没有获得用户的信息，没有将其存入数据库。经过测试发现，当点击授权登陆按钮后，进行了页面跳转到首页和获取用户信息的数据库进行存储。测试过程与结果如下所示。图7用户授权登陆功能测试图表3用户授权登陆功能测试表用例说明用户授权功能测试测试要求用户授权登陆后进入首页面测试用例点击授权按钮预期结果数据库中的User集合存入了用户信息，并且跳转到首页实际结果点击授权按钮后，User集合中存入了用户的信息，并且页面自动跳转到首页6.2.2人物刻画功能测试进行人物刻画功能测试时，出现的情况一般有两种，一种无法从底部弹出滚动选择器，一种是选择后无法将选择的信息填入到相应的选择框内。经测试，发现当选择picker选择器时，可以从底部弹出滚动选择，且选择完内容后，点击确定可以把内容显示在页面内。测试过程与结果如下所示。图8人物刻画功能测试图表4任务刻画功能测试表用例说明人物刻画功能测试测试要求通过选择滚动条选择信息刻画人物形象测试用例点击属性选择，底部弹出滚动选择器，选择条件预期结果底部滚动选择器可以准确挑选条件，并将其填入到属性中实际结果点击某个属性后，可以底部弹出选择器，选择条件后将条件放入属性中6.2.3礼物添加功能测试当进行礼物添加时，一般会出现信息无法添加到数据库的问题。经测试，发现再添加礼物信息时可以把信息添加到数据库。测试过程与结果如下所示。图9礼物添加功能测试图表5礼物添加功能测试表用例说明礼物添加功能测试测试要求将礼物信息添加到数据库测试用例点击添加按钮，将礼物信息添加到数据库预期结果点击添加按钮后，礼物信息将完整的存入到数据库的products集合中实际结果点击添加按钮后，礼物信息准确存入products集合中6.2.4礼物搜索功能测试当进行搜索功能测试时，可能会出现无法将数据库中的礼物信息在页面中渲染出来的问题。经测试，发现当选择完条件之后，可以准确地将礼物信息渲染在页面上，用户可以很直白的看到礼物的各种信息。测试过程与结果如下所示。图10礼物搜索功能测试图表6礼物搜索功能测试表用例说明礼物搜索功能测试测试要求准确搜索出符合条件的礼物测试用例根据属性的条件值，点击查询按钮，搜索出符合条件的礼物预期结果准确在页面中渲染出符合条件的礼物信息实际结果在页面中成功渲染出礼物信息6.2.5礼物排名功能测试当进行礼物排名功能测试时，一般会出现，无法进行排名的问题。经测试发现，当点击关于喜好的两个按钮之后，当再次查询时，礼物可以进行重新排名渲染到页面上。测试过程与结果如下所示。图11礼物排名功能测试图表7礼物排名功能测试表用例说明礼物排名功能测试测试要求根据用户的喜好进行礼物排名测试用例点击喜好的按钮，在下次测试时，礼物重新排名后渲染页面预期结果礼物根据喜好重新排名，再次查询时渲染到页面中实际结果再次查询时，礼物重新排名，成功渲染到页面上6.2.6礼物页面分享功能测试当礼物分享功能测试时，一般会出现无法弹出分享页面的提示。经测试可以正常分享页面给其他好友。

图12礼物页面分享功能测试图用例说明礼物搜索功能测试测试要求点击分享按钮分享给好友测试用例点击右上角的省略按钮，然后点击分享好友，然后点击发送分享好友预期结果正确分享给好友界面实际结果成功分享给好友表8礼物页面分享功能测试表6.3系统测试结论经过严格的测试之后，礼物推荐微信小程序可以得到用户的授权信息，可以添加礼物信息到云开发控制平台的数据库中，可以进行精准的礼物搜索和礼物的受喜爱程度的排名功能，满足了用户需求。7结语该微信小程序是基于MIna框架的开发，且使用了VantWeapp组件库，能使微信小程序结构清晰,同时具备很好的可扩展性和可维护性[。该论文对礼物推荐的微信小程序开发过程进行了详细的分析，同时，礼物推荐微信小程序也基本满足了用户明确礼物推荐的需要，解决人们送礼物纠结或者迷茫的问题，实现了礼物推荐微信小程序的精准化。由于数据库需要的数据同时精力也非常有限，技术上没有做到完全精准的推荐