【基于微信小程序的校园生活论坛设计与实现（论文）8200字】

基于微信小程序的校园生活论坛设计与实现目录TOC\o"1-3"\h\z\t"标题,1"HYPERLINK1 系统概述 9HYPERLINK1.1 系统现状分析及发展趋势 9HYPERLINK1.1.1 国内外研究现状 91.1.2 发展趋势 91.2 系统可行性和意义 101.2.1 研究该系统的目的和现实意义 101.2.2 系统可行性 101.3 系统简介 112 开发工具和技术分析 112.1 开发环境 112.1.1 硬件环境 112.1.2 软件环境 112.2 微信小程序开发相关技术概述 112.2.1 微信小程序前端开发语言 112.2.2 微信小程序后端接口开发 123 系统需求设计 123.1 系统目标 123.2 系统功能需求 133.2.1 广场界面的功能 133.2.2 发布界面的功能 133.2.3 我的界面的功能 144 系统模块概要设计 144.1 系统数据库逻辑结构设计 144.2 系统操作模块设计 154.2.1 广场界面的功能 154.2.2 发布界面的功能 154.2.3 我的界面的功能 155 系统模块详细设计 16HYPERLINK5.1.1 界面设计 16HYPERLINK5.1.2 关键函数的描述 165.2 注册界面的实现 17HYPERLINK5.2.1 界面设计 17HYPERLINK5.2.2 关键函数的描述 17HYPERLINK5.3.2 关键函数的描述 19HYPERLINK5.4 发布界面的实现 19HYPERLINK5.4.1 界面设计 19HYPERLINK5.4.2 关键函数的描述 19HYPERLINK6.1 测试环境 22HYPERLINK\l"_功能性测试"6.2 功能性测试 23HYPERLINK\l"_注册登录功能测试"6.2.1 注册登录功能测试 23HYPERLINK\l"点赞功能"6.2.2 点赞功能测试 23HYPERLINK\l"发布帖子"6.2.3 发布帖子功能测试 23HYPERLINK\l"_删除帖子功能测试"6.2.4 删除帖子功能测试 24HYPERLINK\l"_评论帖子功能测试"6.2.5 评论帖子功能测试 24HYPERLINK\l"_结束语"7 结束语 24HYPERLINK\l"_参考文献"参考文献 24

摘要：随着移动互联网的不断发展，人们的生活也越来越离不开网络，微信作为当下最流行的社交软件之一，拥有极其广泛的手机覆盖率。微信小程序作为一种在微信生态下的轻应用，具有功能丰富、无需下载、操作简洁等特点，应用于生活中的各个领域，社会效应不断提升。在校园生活中，完善师生在线上讨论校园内的学习生活成为必然趋势。本文介绍了利用微信小程序轻便快捷的特点，通过WXML,WXSS,ThinkPHP等技术手段在微信小程序中设计了一个校园生活论坛，方便广大师生的沟通交流。关键词：微信小程序；论坛设计；ThinkPHP引言在当今校园生活中，我们在学习生活的各个方面都离不开手机。2017年1月，第一批微信小程序上线，从而正式开启了轻应用的大门[1]。从用户角度来看，微信小程序是一款轻量级的手机应用，它几乎不占手机内存，使用起来也比手机网页更方便。从开发者角度来看，开发一款微信小程序所涉及的技术相对简单，门槛较低，并且开发出来的功能能满足大部分用户的使用需求[2]。在微信小程序尚未正式发布之前，大部分高校的线上服务通常是通过下载某个特定软件来实现的。与这些特定的软件相比，微信小程序由于操作简单、无需下载等特点更具有吸引力。在如今的大学校园生活中，会经常用到一些微信小程序，例如扫码点餐，校园导航，图书馆座位预约等[3]，这些微信小程序给广大师生带来了诸多便利。基于微信小程序，本文设计并实现了一个校园生活论坛，旨在加强师生之间的互动交流。系统概述系统现状分析及发展趋势国内外研究现状2017年9月，第一批校园小程序在全国30所高校正式上线，上线初就引起了大量学生的关注。最初这些小程序的功能并不丰富，较为单一，但仍然受到了广大学生的追捧。在各个高校学生们的宣传下，这些小程序迅速走红。近两年来，其他许多学校也紧随其后，上线了自己的校园小程序，并且功能愈加丰富。其中，清华大学的一款名为水木汇THU的校内生活平台设计较为出色。它整体规划了四个界面，主界面整体布局简洁精美，用于介绍当前校园内正在开展的活动；校内二手交易的界面和校内求助界面的设计也独具特色，整体用户体验良好。因此，设计出一款界面简洁，功能丰富的校园生活论坛，供校内师生使用，就显得尤为重要了。发展趋势虽然移动互联网发展很快速，但是人际传播依旧是学生获取信息的主要途径[4]。一项相关的校园调查显示传统的信息渠道仍占主体地位[5]，例如海报、广播，但是对于微信小程序的未来发展趋势，绝大多数人也都纷纷看好。在当前的校园中，微信公众号以及微信小程序时常会出现在广大学生的学习生活中，学生们可以通过这两个平台来获取信息、寻求帮助。随着当前校园内公共WIFI的大规模覆盖，WIFI信号和WIFI质量的不断加强，学生们对线上平台的需求也会不断增大[6]，也为微信小程序的大规模应用创造了成熟的条件。学生们对线上平台往往有着更高的热情，普遍希望能从线上获取校园资讯，因此对开发一款供师生线上交流的微信小程序怀有极高的期待。目前，通过使用其他高校的校园微信小程序，发现这些小程序的大部分功能与校园生活紧密相关，包括成绩查询、课表查询、二手物品交易、校园活动推广等，大部分学生也都广泛使用。系统可行性和意义研究该系统的目的和现实意义近年来，随着手机应用不断的更新发展，不得不导致用户对手机硬件配置要求也逐渐变高[7]。对于32GB以及64GB内存的手机，许多用户会在使用一段时间后发现内存不足，导致系统运行缓慢，此时大部分用户往往会选择删除一些平时不太经常使用的App，若以后再次需要使用时，可以再从手机应用商店中重新下载。微信小程序作为一种在微信生态下使用的轻应用，因其几乎不占内存，无需下载，引起了人们的广泛关注，其发展状况也经常引起人们的关注。微信小程序的出现，极大的推动了轻应用的发展，使其迈上了全新的台阶。近两年来，许多国内高校都推出了各具特色的校园类微信小程序，引发了广大学生和老师的关注，并受到了大量好评。然而，目前在校园内尚未有一款供师生公开交流类的软件，在一定程度上限制了不同年级不同专业的学生之间进行沟通交流。因此，开发一款校园生活论坛类的微信小程序就显得尤为重要了。通过该微信小程序，学生之间可以相互咨询学习生活中的难题，也可以讨论校园内发生的新鲜事；老师也可以通过该微信小程序了解学生对大学校园建设方面的一些看法和建议。系统可行性（1）技术可行性在目前，校园生活论坛类的微信小程序在各大高校中的运用较为普遍，所以前景是欣欣向荣的。通过查阅相关资料以及自我分析，决定采用JSP、WXML、WXSS、ThinkPHP技术及MySQL数据库综合开发[8]。MySQL是一款开源的数据库管理系统，性能较稳定，使用较方便[9]。ThinkPHP是一个运行速度快、兼容性好而且使用简单的轻量级国产PHP开发框架。（2）经济可行性在本次的开发微信小程序中，我们只需要要一台笔记本电脑和一台手机即可，一台笔记本电脑用于微信小程序的开发设计，一台手机用于后期的真机调试。而且我们所使用到的软件微信开发者工具、sublime、POSTMAN都是免费软件，新浪云服务器有学生优惠，价格较为便宜，可以接受。后期开发完成后对该小程序的运行维护也是较为简单。系统简介校园生活论坛主要用于全校的学生和老师进行交流沟通。因此该系统的主要使用者为学生和老师。若用户第一次使用该小程序，需要用手机号进行注册。若用户已经注册，则可以直接使用账号进行登录。登陆成功后，进入小程序的广场界面，可以浏览其他用户的帖子并进行点赞评论，也可以选择自己发表一篇帖子谈谈自己的校园生活。在我的界面，用户可以选择对已发表的帖子进行删除操作。开发工具和技术分析开发环境硬件环境（1）处理器：IntelCOREi5或者更高的处理器（2）内存：1GB或更高（3）网络：局域网软件环境（1）操作系统：Windows10（2）开发平台：微信开发者平台、MySQL（3）技术结构：ThinkPHP+JSP微信小程序开发相关技术概述微信小程序前端开发语言本次开发的微信小程序，前端页面的开发设计采用下面3种类型的文件来实现。WXML是一套标签语言，类似于HTML。在WXML文件下编写的代码主要用于实现小程序的整体页面框架。WXSS是一套样式语言，类似于CSS。在WXSS文件下编写的代码主要用于实现WXML文件下那些组件的显示效果。JavaScript主要用于页面的交互，根据用户在页面上做出的不同动作，从而实现页面的一些功能，比如获取用户在页面输入的数据，跳转到其他页面等[10]。、小程序开发语言关系示意图如图2-1所示。图2-1开发语言关系示意图微信小程序后端接口开发本次开发的微信小程序，后端接口的开发所使用到的工具分别为：代码编辑器（sublime），本地运行环境（phpstudy），接口测试工具（POSTMAN），线上服务器（新浪云SAE）。后端开发采用了ThinkPHP框架[11]，版本号为3.2.3，该框架体积小，兼容性好，减少了后端开发的任务量。后端开发采用了PHP语言，该语言由于其跨平台性较强[12]，与主流数据库的连接也非常广泛，且相对较为简单易学，适合本次小程序的开发设计。系统需求设计系统目标校园生活论坛是一个操作简单，使用方便的线上交流平台，主要面向大学校园中的学生[13]。该系统的基本功能是用户浏览其他用户发布的帖子，同时可以对感兴趣的帖子进行评论点赞。此外，用户也可以选择发布帖子，谈谈自己的校园生活，若发表后觉得不合适，可以在我的页面进行删除操作。功能总体框架如图3-1所示。图3-1小程序的功能总体框架系统功能需求广场界面的功能广场界面主要用于实现浏览所有用户的帖子，并显示该帖子的详细信息，包括发布者的昵称，头像，发布时间等。此外，还需要实现对每条帖子的点赞以及评论的功能，点赞完成后需要在点赞按钮旁显示最新的点赞数。发布界面的功能发布界面主要用于实现用户发布帖子。我的界面的功能我的界面主要用于展示用户的个人信息，包括用户的头像以及昵称。此外，该界面还会展示该用户所发表的所有帖子，用户可以对某条帖子实现删除功能。系统模块概要设计系统数据库逻辑结构设计本程序设计的数据库表有user表，message表以及comment表。user表用于保存用户的注册信息，实现用户登录以及头像昵称等个人信息的展示，user表的具体定义如表4-1所示。message表用于保存用户的发帖内容，实现帖子在广场界面以及我的界面的展示，message表的具体定义如表4-2所示。comment表用于保存用户的评论内容，comment表的具体定义如表4-3所示。表4-1user表的定义字段类型空注释idint(11)否idusernamevarchar(50)否用户名phonevarchar(11)否手机号passwordvarchar(32)否密码face_urlvarchar(500)否用户的头像地址表4-2message表的定义字段类型空注释idint(11)否iduser_idint(11)否用户idusernamevarchar(50)否用户名face_urlvarchar(500)否用户的头像地址contentvarchar(500)否论坛的消息内容total_likesint(11)否点赞数send_timestampint(11)否发布的时间戳表4-3comment表的定义字段类型空注释message_idint(11)否帖子iduser_idint(11)否用户idusernamevarchar(50)否用户名face_urlvarchar(500)否用户的头像地址commentvarchar(500)否评论的内容send_timestampint(11)否发布的时间戳系统操作模块设计广场界面的功能根据广场界面的功能需求，该小程序实现了用户进行注册或登陆后，进入到该小程序的广场界面，广场界面显示了所有用户发布的帖子，并显示该帖子的详细信息，包括发布者的昵称，头像，发布时间等。用户可以对帖子进行点赞，点赞完成后显示最新的点赞数。此外，用户还可以点击评论按钮，实现对该帖子的评论。广场界面还附带底部导航栏，用于跳转到发帖界面和我的界面。发布界面的功能根据发布界面的功能需求，该小程序实现了用户从底部导航栏的发布按钮跳转过来后，进入到发布界面。若用户进入该界面后不想发布帖子，可以选择返回按钮返回到广场界面。若用户想发布帖子，只需要在发布框内输入文字，然后点击发送按钮即可实现发布。发布完成后关闭当前发布界面并跳转到广场界面。我的界面的功能根据我的界面的功能需求，该小程序实现了用户从广场的底部导航栏跳转过来后，进入到我的界面。该界面会显示当前用户的头像以及昵称，同时也会显示用户发布的所有帖子，若用户想删除某条已发布的帖子，可以点击对应帖子的删除按钮，实现删除操纵。我的界面也附带了底部导航栏，用于跳转到广场界面和发帖界面。系统模块详细设计登录界面的实现界面设计在用户授权个人信息后，就会跳转到登录界面。该界面主要实现用户的登录以及注册界面的跳转。具体界面设计如图5-1所示。图5-1登录界面关键函数的描述实现本模块的两个关键函数如下所述：（1）login(phone,password)，该函数为用户的登录接口，输入方式为POST/json，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若不存在该账号，则返回{“error_code”:2,“msg”:“不存在该手机号用户，请注册”}；若密码错误，则返回{“error_code”:3,“msg”:“密码不正确，请重新输入”}；若登录成功，则返回{“error_code”:0,“msg”:“登录成功”,“data”:{id,user_id}}。（2）wx.request(Objectobject)，该函数用于发起HTTPS网络请求[14]。调用该函数后，会请求用户的登录接口，然后根据登录接口返回的错误类型，做出不同的提示。若error_code==1,则提示参数不足；若error_code==2,则提示不存在该手机号用户，请注册；若error_code==3,则提示密码不正确，请重新输入；若error_code==0，则提示登录成功；若未能成功发起网络请求，则提示网络不在状态呢！注册界面的实现界面设计该界面用于实现新用户的注册。具体界面设计如图5-2所示。图5-2注册界面关键函数的描述实现本模块的两个关键函数如下所述：（1）sign(username,phone,password,password_again,face_url)，该函数为用户的注册接口，输入方式为POST/json，用户密码采用md5加密格式存储在数据库中，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若输入的两次密码不一致，则返回{“error_code”:2,“msg”:“两次密码不一致”}；若输入的手机号已经被注册，则返回{“error_code”:3,“msg”:“手机号已被注册”}；若注册成功，则返回{“error_code”:0,“msg”:“注册成功”,“data”:{id,user_id}}。（2）regist:function(e)，该函数用于实现用户的注册功能。其中正则表达式=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/，用于检测输入的手机号格式是否正确；wx.request(Objectobject),该函数用于发起HTTPS网络请求。调用该函数后，会请求用户的注册接口，然后根据注册接口返回的错误类型，做出不同的提示。若error_code==1,则提示参数不足；若error_code==2,则提示两次密码不一致；若error_code==3,则提示手机号已被注册；若error_code==0，则提示注册成功；若未能成功发起网络请求，则提示网络不在状态呢！广场界面的实现界面设计该界面用于显示所有用户发表的帖子，包含用户的昵称和发帖时间。用户可以选择为自己感兴趣的帖子点赞，但同一个用户对每个帖子只能点一次赞。具体界面设计如图5-3所示。图5-3广场界面关键函数的描述实现本模块的三个关键函数如下所述：（1）onLoad:function(options)，该函数为生命周期函数，在页面加载时被触发[15]。该函数主要用于实现每次用户访问广场界面时，查询message表，获取所有用户发布的帖子，并实时显示在广场界面。（2）do_like(message_id,user_id)，该函数为用户的点赞接口，输入方式为POST/json，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若指定的帖子不存在，则返回{“error_code”:2,“msg”:“指定的数据查询失败”}；若点赞成功，则返回{“error_code”:0,“msg”:“数据保存成功”,“data”:{message_id,user_id}}。（3）like:function(e)，该函数用于实现用户的点赞功能。若用户点击点赞按钮，就会调用该函数，请求点赞接口，然后根据点赞接口返回的错误类型，做出不同的提示。若error_code!=0,则提示出错了呢；若error_code==0,则提示点赞成功。此外，该函数定义了一组数组，该数组用于存放当前用户是否对该条帖子进行过点赞，从而实现了同一个用户对一条帖子只能进行一次点赞的操作。发布界面的实现界面设计该界面用于实现用户发布帖子的功能。具体界面设计如图5-4所示。关键函数的描述实现本模块的两个关键函数如下所述：（1）public_new_message(user_id,user_name,face_url,content)，该函数为用户发布帖子的接口，输入方式为POST/json，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若发布成功，则返回{“error_code”:0,“msg”:“发布成功”}。（2）send_function(e)，该函数用于实现发帖功能。若用户点击发送按钮，就会调用该函数，请求发布帖子的接口，然后根据发布接口返回的错误类型，做出不同的提示。若error_code!=0,则提示出错了呢；若error_code==0,则提示发布成功。图5-4发布界面我的界面的实现界面设计该界面用于实现用户头像昵称的展示以及用户帖子的删除。具体界面设计如图5-5所示。关键函数的描述实现本模块的两个关键函数如下所述：（1）get_one_user_all_messages(user_id)，该函数为获取指定用户所有帖子接口，输入方式为POST/json，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若获取成功，则返回{“error_code”:0,“msg”:“数据获取成功”,“data”:{id,user_id,username,face_url,content}}。（2）delete_message(message_id,user_id),该函数为删除指定帖子接口，输入方式为POST/json，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若删除的帖子不存在，则返回{“error_code”:2,“msg”:“指定的数据查询失败”}；若删除成功，则返回{“error_code”:0,“msg”:“删除成功”}；图5-5我的界面评论界面的实现界面设计该界面用户实现用户对某条帖子进行评论。具体界面设计如图5-6所示。关键函数的描述实现本模块的两个关键函数如下所述：（1）publish_comment(message_id,user_id,username,face_url,comment)，该函数为用户发表评论接口，输入方式为POST/json，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若获取成功，则返回{“error_code”:0,“msg”:“发送成功”,“data”:{message_id,user_id,username,face_url,comment}}。（2）get_allcomment(message_id),该函数为查询指定帖子下所有评论接口，输入方式为POST/json，返回方式为Ajax/json。若输入的参数不足，则返回{“error_code”:1,“msg”:“参数不足”}；若查询的帖子不存在，则返回{“error_code”:2,“msg”:“指定的数据查询失败”}；若查询成功，则返回{“error_code”:0,“msg”:“查询成功”}；图5-6评论界面系统测试测试环境本次测试使用荣耀20S手机进行测试，以及在微信开发者工具的模拟器中对iPhone7，iPhone8，iPhoneX等多个版本的手机进行了测试。荣耀20S配置如表6-1所示。表STYLEREF1\s6SEQ表\*ARABIC\s11测试机配置表参数名称值手机型号荣耀20SAndroid版本10.0处理器海思麒麟810运行内存6.0GB屏幕尺寸6.2英寸通过在手机以及模拟器中测试，该小程序的各项功能实现正常。功能性测试本次功能性测试采用黑盒测试。注册登录功能测试注册登录功能具体测试如表6-2所示。表STYLEREF1\s62注册登录功能测试表测试步骤期望结果实际结果结论输入已有账号登录跳转到广场界面跳转成功通过点击还没有账号？点我注册按钮跳转到注册界面跳转成功通过进行用户注册跳转到广场界面跳转成功通过点击已有账号，点我登陆按钮跳转到登录界面跳转成功通过点赞功能测试点赞功能具体测试如表6-3所示。表STYLEREF1\s63点赞功能测试表测试步骤期望结果实际结果结论点击点赞按钮出现点赞成功的提示框与期望相同通过对已经点过赞的帖子再进行点赞出现已经点过赞了的提示框与期望相同通过发布帖子功能测试发布帖子功能具体测试如表6-4所示。表STYLEREF1\s64发布帖子功能测试表测试步骤期望结果实际结果结论点击发布按钮跳转到发布界面跳转成功通过不输入内容直接发送出现出错了的提示框与期望相同通过输入内容进行发送出现发送成功的提示框与期望相同通过删除帖子功能测试删除帖子功能具体测试如表6-5所示。表STYLEREF1\s65删除帖子功能测试表测试步骤期望结果实际结果结论点击删除按钮出现删除成功的提示框删除成功通过返回广场界面，寻找刚才删除的帖子找不到刚才删除的帖子与期望相同通过返回我的界面，寻找刚才删除的帖子找不到刚才删除的帖子与期望相同通过评论帖子功能测试评论帖子功能具体测试如表6-6所示。表STYLEREF1\s66评论帖子功能测试表测试步骤期望结果实际结果结论点击评论按钮跳转到评论界面跳转成功通过输入评论内容，点击发送界面刷新后出现该条评论与期望相同通过结束语通过这次开发，我基本了解了开发一个微信小程序的基本流程，主要包括需求分析，小程序页面开发，申请HTTPS域名，小程序后端接口，数据库配置，前后端调试，页面自测。同时，这次开发经验也让我巩固了大学期间学习的一些课程，例如web前端设计，数据库设计等，通过理论与实际相结合，提高了自己的实操能力。基于微信小程序的校园生活论坛，可以较为方便地作为实现大学生线上交流的一个平台。但由于时间和技术上的缺陷，该小程序还有以下不足：小程序的功能太