【生活小相册微信小程序的设计与实现9700字】

生活小相册微信小程序的设计与实现摘要信息化时代正在一步步发展，计算机技术愈发成熟，如今，PC平台上已经有许多关于相册方面的应用程序，但是因为不能随时随地的使用，用户在使用上存在各种不方便，不能满足用户的需求。而开发一款生活小相册微信小程序，能够有效地解决这个问题。首先分析生活小相册是否符合各方面的需求和这个小程序是否能被开发，然后把生活小相册开发出来并进行测试，最后对生活小相册进行一个总结。在技术层面上，本生活小相册微信小程序使用的是微信开发者工具对整个系统的框架和功能进行开发、使用php和MySQL对整个系统的数据进行管理。这个微信小程序有很好的功能能给用户很好的体验，而且数据也会被很好的保护起来，具有良好的安全性和可靠度。本微信小程序在设计开发的过程中，本着“操作简单，功能实用”这一理念进行，力争给用户带来最好的使用体验。该论文有图21幅，表7个，参考文献25篇。关键词：生活小相册；PHP；微信小程序；MYSQL数据库目录摘要 绪论1.1研究背景在21世纪，手机已经成为人类生活中一个不可或缺的工具了，因为手机上面的软件能方便人们的生活。微信因为有简约、方便、快捷等优势，出现了没几年就已经拥有几亿用户[11]。随后诞生了微信小程序，它类似于一种“浓缩”的平台软件，虽然没有平台功能那么完善和齐全，但是他拥有的功能也可以满足一些简单的要求[6]。最重要的是微信小程序可以直接在微信里面打开，不需要通过商城下载和安装，所以就不会占用内存。进而各式各类的微信小程序争相涌出，吃的，玩的，看的等等，丰富多彩，功能十分多。人们开始更依赖于使用微信小程序。在微信小程序上建立一个小相册与pc端的相册程序相比，有着许许多多的优点，十分受用户的喜欢。生活小相册微信小程序使用计算机平台，对相册的相关信息进行管理，存储方式简单，查找方便，还能查看其他用户的精美相册。为了保护用户的数据安全和稳定，本小程序采用的是MySQL数据库。主要是建立一个用户界面友好、使用方便快捷、交互性强的生活小相册微信小程序，通过本系统，用户可以快速创建、查看和管理相册。1.2研究意义短短的几十年，手机变的越来越智能，开始取代各式各类的生活用品[16]，照相机就是其中一个。照相机的昂贵费用和打印照片的不方便，使得人们越来越少的去使用照相机。随着手机不断的更新换代进步，在摄像方面也做的越来越好，像素的提高让照片更加的清晰。照片也能存放在内存里，方便用户随时查看和管理。手机虽然在不断地进步，但是价格并没有变的非常高，反而是很多的平民手机出现使得大家都可以拥有智能手机[17]。微信作为手机的一个新生通讯软件，近几年迅速发展，已经成为人们的一个重要通讯软件，使用者遍布各个年龄段[12]。微信自带的微信小程序非常方便，用户可以直接在小程序上实现许多功能，不需要通过平台软件去操作，所以开发一个生活小相册的微信小程序是很有必要的。本生活小相册在开发上的目标有：（1）操作简单、界面干净：小相册的用户界面应该简单干净；用户使用生活小相册可以很直接的创建相册，也可以查看和管理相册相关信息。（2）即时可见：用户发布的信息应该即时显示出来，做到即时可见。（3）交互性：用户间可以相互查看和关注。（4）功能的完善性：管理员可以登录后台对相册进行各方面的管理。1.3研究现状微信小程序诞生已经有一段时间了，在这上面已经诞生了一些同类的相册小程序，下面将列举几个相册小程序：甜豆相册图1-1甜豆相册优点：照片下载功能，可以下载照片；与祝福美文小程序搭建链接，用户可以使用甜豆相册的同时使用祝福美文进行相册的美化。缺点：没有其他用户模块，无法与其他用户进行交流；没有收藏模块，不能收藏用户喜爱的模块。腾讯相册图1-2腾讯相册腾讯相册只是一个简易册小程序，没有任何过多的功能模块提供用户选择，只能满足最基础的相册制作功能。制作音乐相册图1-3制作音乐相册制作音乐相册是一个比较优秀的作品，它拥有用户平台功能，提供用户之间的互动，还可以提供相册照片的改动。总结和分析：优势：相册小程序众多，可以提供参考价值。在前人制作的小程序的基础上，观察到其他作品的优点，洞察其他作品不足的地方，加以完善。劣势：微信小程序仍处于发展中阶段，很多功能尚未成熟或者未能实现，用户是否会选择微信小程序仍是未知的。这对微信小程序的制作和发展也是一种挑战。机会：生活小相册程序是一个新型的小程序，如果做得有特色，完善好缺点，能顺应大部分用户的要求，就能机身微信小程序的前列。威胁：生活小相册微信小程序的威胁来自大型APP，刚出现的微信小程序可能在短期内不会被用户所发现和喜爱[15]，这是一个长期的过程。还有就是大型APP是否会进军微信小程序还未知，是一个潜在的威胁。目前来说，相册微信小程序已经有比较多作品面世，这对本课题的研究提供了参考。在各式各样的作品中，如何能做到在这里面生存下去并突出，是需要思考的问题也是需要努力的方向[13]。1.4研究内容基于前面的研究和分析，将设计和开发一个生活小相册的微信小程序，这个微信小程序主要提供创建相册的功能，还设立了用户平台，提供用户之间的交流。在具体实现上设立三个模块，分别是“制作影集”、“发现”、“我的”。在“制作影集”里，提供一个用户制作相册的功能，用户可以选取照片去制作相册。在我的模块里，包含了用户的个人信息，用户登录微信号后可以查看和管理自己的相册信息，还可以编辑用户资料。在“发现”模块里，设立很多不同的相册类型，用户可以选择自己想看的相册类型，还提供搜索功能供用户去准确搜索相册。还设有用户平台，提供用户交互的功能，用户可以查看和关注其他用户。

2需求分析

2.1可行性分析2.1.1技术可行性开发生活小相册需要用到很多技术，其中制作小相册平台使用的是js、wxml和wxss[14]，因为自己学过前端的开发，和微信小程序的开发语言是相似的[25]，所以是通过自学学会了其他两门语言。在数据处理和平台管理上，需要用到的是后端方面的知识，本人也是接触过后端的一些知识。所以开发生活小相册微信小程序的用户平台和管理后台所需要的技术，本人都是掌握的，在开发技术的需要上是支持的。2.1.2经济可行性开发生活小相册微信小程序需要的花销是很少的，在平台的开发上，虽然本人需要学习wxml和wxss，但是学习视频可以通过网上查找到，不需要花钱。而开发生活小相册用的工具是微信开发者工具，这个工具是免费下载和使用的。在数据库上面选择的是MySQL，这个软件是开源免费的。所以生活小相册微信小程序的开发花销是基本为零，是非常经济实惠的。2.1.3操作可行性本生活小相册微信小程序本着操作简单、界面简洁的目标去进行开发[20]。小相册主设三个大模块：用户想观看他人相册的时候可以点击“发现”模块，制作相册可以点击“制作”模块，管理自己的信息可以点击“我的”模块。没有任何过多的手续步骤，用户不需要学去学习思考如何使用这个生活小相册。在小相册的页面布局上，三个大模块主要放在小程序的底部，用户可以很清楚的看见。而且不会影响用户使用这个小相册，反而方便用户去单手操作使用小相册。所以在操作上，本生活小相册可以很好的满足用户。2.1.4法律可行性本人开发这个生活小相册微信小程序，在技术方面是从正规的视频网站和自己买书来学习，使用的开发工具也是免费的，整个生活小相册都是合法的。2.2系统性能分析（1）本生活小相册微信小程序不可能一直使用现在开发的功能，必须跟着技术进步去改善小程序的功能方面。（2）因为本生活小相册微信小程序录入的信息比较多而且复杂，所以应该保证用户使用本生活小相册时候产生的信息存放好。还有就是信息传输的时候应该够快而且有条理，不能让数据混乱。（3）用户的信息是很重要的，不能泄露或者丢了，要保护好这些信息。（4）本生活小相册微信小程序是给所有的微信用户使用的，用户遍布各个年龄层，所以应该把小相册做的简单，所有用户用起来都很方便。2.3生活小程序功能分析2.3.1用户功能分析本生活小相册微信小程序的用户功能主要是微信登录、制作相册和观看相册三个大的模块，在这三个大模块之下还有其他的功能小模块，用户用例图如图2-1所示。图2-1用户用例图2.3.2管理员功能分析本生活小相册微信小程序的管理员功能主要是登录和管理相册的信息两个大的模块，其中关于相册的管理有四个小模块，管理员用例图如图2-2所示。图2-2管理员用例图2.4用户体验需求分析本生活小相册微信小程序是给所有用户使用的，用户使用的体验是这个小相册开发一个很重要的关注点。只有用户用起来体验好才会继续使用这个生活小相册，并且和其他用户分享，这个才是应该考虑的东西。（1）用户的界面是很直观的第一印象，应该把界面做的简洁，让这个小程序看起来就很舒服，用户才会去使用。（2）生活小相册的每一个功能模块的使用方法都应该简单，太过于复杂的操作是不会受喜欢的，还有就是每个功能的响应都应该快一点，[11]。2.5系统流程分析如果想使用这个生活小相册微信小程序，必须先经过一系列登录等操作。具体的流程如图2-3所示。图2-3登录流程图3相关技术3.1微信开发者工具本生活小相册微信小程序的开发工具选用的是微信开发者工具，这个工具是用来专门开发微信小程序的，。它里面有很多功能，能协助开发人员很好的进行开发[2]。本生活小相册微信小程序的三个页面、每个页面里面都有不同的功能模块、还有这些功能的实现，都是通过这个工具去制作的[8]。3.2微信小程序API接口API接口就是一些拿过来就能用的东西，不需要在不同的小程序开发过程中再重新制作，也不需要知道它到底是如果实现的，直接用就可以了，能很大程度的减少开发的工作量，能很轻松的实现想要完成的功能。比如在生活小相册微信小程序里要得到用户的信息，只要写一个函数就可以直接使用了[7]。3.3WXML、WXSS、JS小程序编写语言WXML就是用来制作整个骨架的，创建一个个不同的标签搭建起小程序的框架，它决定了小程序有什么东西[23]。在本生活小相册微信小程序里的三个主页面：“发现”、“制作”和“我的”，还有这些页面里许许多多的标签，都是通过wxml去制作的。WXSS主要就是用来修饰的，把WXML创建的标签进行装饰，让页面更加好看，它决定了小程序长什么样子[7]。在本生活小相册微信小程序里wxss就是用来修饰前面搭建好的标签，比如生活小相册的页面颜色之类的。WXSS有点像CSS，大体语法于CSS语言差不多。JS是JavaScript[4]语言的简称，主要是用作开发页面的脚本语言。它用来处理用户的操作，用户点击什么地方会产生什么效果都是由js控制的。前面的wxml和wxss只是把每个功能模块制作出来，而js就是决定用户在使用这些这些模块的时候会产生什么反应。3.4PHP技术PHP(PHP:HypertextPreprocessor)，是一种开放源代码的多用途脚本语言[2]。目前有很多种脚本语言可以用于web的服务器端，但是更多开发者喜欢使用php，因为php有很多的优点。其中最大的优点就是php可以支持很多数据库。然后就是php还可以跨平台[2]。如果在不同的操作系统上安装用php编写的程序[1]，也可以很快的转到其他的操作系统上[3]。3.5MYSQL数据库本生活小相册微信小程序是关于相册的制作和分享方面的程序，所以在用户和相册两个层面会产生很多数据。首先在用户层面，每一个用户都有自身的资料信息，例如性别和称呼等，用户之间还有关注的关系，而且这个小程序是面向所有的微信用户的，用户量非常大。还有在相册层面，一个相册有很多的信息，例如相册本身的内容和评论回复等关系，因为用户多，所以制作的相册也会很多。所以本微信小相册会产生非常多而且复杂的数据，所以选用了MySQL数据库。MySQL数据库是一个能很好处理数据和关系的数据库。它会把数据的关系整理好成一个个表，在储存数据的时候把那些数据按照关系放进去表里，而不是直接丢进一整个库里面，这样可以很好的节省空间而且有条理。在需要调动数据的时候可以根据表来提取数据，调动的速度会很快也很方便。而且它是开源的，所以很多系统的开发都会选用MySQL来作为数据库。4概要设计4.1系统结构设计本生活小相册微信小程序主要分为管理员和用户两个大模块，在管理员这个大模块里面，管理员通过登陆以后才可以对这个相册进行管理，比如对用户的管理和对相册的管理等；用户的模块也是最重要的模块，用户如果不登录就只能查看其他用户的相册。只有在登陆以后才可以享受全部的功能，比如可以制作相册和可以查看和管理用户制作和收藏的相册等，结构如图4-1所示。图4-1系统功能模块图4.2数据库设计本生活小相册微信小程序有很多而且很复杂的关系和数据，应该把这些数据和之间的关系处理好，制作成一个个表，比如把每一个相册相关的信息放进一个表里。设计这个数据库需要认真细心，不能把关系弄错。4.2.1数据库E-R图设计本生活小相册微信小程序采用的是MySQL数据库。因为本系统不仅仅是相册的创建，还有用户之间的关注和作品之间的喜欢、收藏和转发等操作，会产生很多的信息。而MySQL数据库的特点很好的解决了这些问题，它能很好的把系统产生的信息分类清楚。在使用数据库的时候，应该把系统需要用到的各个个体和信息之间的关系理清楚。E-R图可以把各个数据和信息之间的关系清楚的反映出来，本生活小相册的E-R图如下所示：（1）管理员的信息如图4-2所示:图4-2管理员实体属性图（2）收藏相册的信息如图4-3所示:图4-3收藏实体属性图（3）关注用户的信息如图4-4所示:图4-4关注实体属性图（4）相册本身具有的信息如图4-5所示:图4-5相册信息实体属性图（5）用户自身的信息如图4-6所示:图4-6用户信息实体属性图（6）留言的信息如图4-7所示:图4-7留言信息实体属性图4.2.2数据库表设计本生活小相册微信小程序有很多的数据，他们之间还有关系。需要把这些数据根据关系来做成表。数据的关系表如下：表4-1admin管理员信息表列名数据类型长度允许空说明idint11否编号namevarchar80是用户名pwdvarchar32是密码表4-2coll收藏信息表列名数据类型长度允许空说明idint11否编号userIdint11是用户编号cidint11是相册编号表4-3like关注信息表列名数据类型长度允许空说明idint11否编号userIdint11是用户编号cidint11是相册编号表4-4comment相册信息表列名数据类型长度允许空说明idint11否编号titlevarchar80是标题nickNamevarchar80是昵称avatarUrlvarchar255是头像namevarchar255是姓名addressvarchar20是地址latitudevarchar255是经度longitudevarchar255是维度userIdint11是用户编号contentvarchar255是内容timevarchar20是时间likevarchar255是关注数classifyvarchar80是分类collint11是收藏数表4-5user用户信息表列名数据类型长度允许空说明idint11否编号openidvarchar255是微信号nickNamevarchar80是昵称gendertinyint3是性别avatarUrlvarchar255是头像cityvarchar255是城市singvarchar255是签名birthDaydate是出生日期表4-6msg留言信息表列名数据类型长度允许空说明idint11否编号userIdint11是用户编号infovarchar255是留言内容timedatetime是留言时间5系统的实现5.1用户功能模块的实现5.1.1微信授权登录界面用户登录后可以对相册的信息进行管理，登录界面展示如图5-1所示。图5-1微信授权登录界面图5.1.2发现界面用户可以查看不同类型的相册，点击相册进入相册的详细介绍界面，在这里可以对相册进行点赞等操作，还可以查看发表相册用户的个人空间，关注该用户。发现界面如图5-2所示。图5-2发现界面图具体的实现代码如下，这段代码的具体功能是转入用户点击的相册的页面。getIndext:function(){wx.request({url:host+'/Index/getIndex',data:{type:this.data.category[this.data.curIndex]},success:(res)=>{console.log(res.data)this.setData({Noteinfo:res.data.resultData})}})},5.1.3制作界面用户点击添加图片后选择系统照片，填写相册标题和内容，再进行分类后创建一个新相册，制作界面如图5-3所示。图5-3制作界面图具体实现代码如下，这段代码的功能是创建相册的一个流程，用户需要按照流程走才能创建相册。fabu:function(e){console.log(e);varthat=thisvarsrc=that.data.temp;if(src.length!=0){if(that.data.title==''){wx.showModal({showCancel:false,content:"标题不能为空！",})returnfalse;}if(that.data.content==''){wx.showModal({showCancel:false,content:"内容不能为空！",})returnfalse;}if(that.data.classify==''){wx.showModal({showCancel:false,content:"分类不能为空！",})returnfalse;}vari=0;varinterval=setInterval(function(){wx.uploadFile({header:{'content-type':'multipart/form-data'},//设置请求的headerurl:host+'/Index/fileUpload',filePath:src[i],name:'pic',success:function(res){console.log("FileUpload:",res);that.setData({httpImg:that.data.httpImg.concat(res.data)})}});i++;console.log("上传的I",i);wx.showLoading({title:'正在上传',})if(i>=src.length){{//清除上传定时器clearInterval(interval);setTimeout(function(){wx.hideLoading()},100)//设置图片上传同步定时器varadd=setInterval(function(){if(i==that.data.httpImg.length){clearInterval(add);that.addComment();}},1000);return;}}},500)}else{wx.showModal({content:'请添加图片!',showCancel:false})}},5.1.4我的收藏界面用户可以点击查看和管理收藏的相册，收藏界面图5-4所示。图5-4我的收藏界面图具体实现的代码如下所示，这段代码的功能是进入收藏界面。getUserNoteAndColl:function(){varthat=this,user=wx.getStorageSync("user");wx.request({url:host+'/Comment/getNandC?userId='+user.id,success:res=>{console.log(res);that.setData({notes:res.data.note,colls:res.data.coll})}})},5.1.5我的相册界面用户可以查看和管理用户制作的相册，相册界面如图5-5所示。图5-5我的相册界面图实现的代码如下，这段代码的功能是进入相册界面。getUserNoteAndColl:function(){varthat=this,user=wx.getStorageSync("user");wx.request({url:host+'/Comment/getNandC?userId='+user.id,success:res=>{console.log(res);that.setData({notes:res.data.note,colls:res.data.coll})}})},5.2管理员功能模块的实现5.2.1管理员登录界面这个界面提供一个登陆功能给管理员进入后台，登录界面如图5-6所示。图5-6管理员登录界面图5.2.2用户管理界面在这个界面里，可以看到使用相册的用户有哪些，还可以把用户删除。用户管理界面如图5-7所示。图5-7用户管理界面图5.2.3相册管理界面在这个界面里，可以看到每一个发布的相册具体的信息，如果发现不妥也可以把相册删除。相册管理界面如图5-8所示。图5-8相册管理界面图5.2.4评论留言界面在这个界面，可以看到评论的信息，如果回复内容不合适，可以把该留言删除。评论界面如图5-9所示。图5-9评论留言界面图6系统测试

6.1测试定义每一个系统的开发都应该经过测试，把这个系统放到不同的环境里面去运行，看看这个程序在遇到突发情况的时候是不是能运行，如果不能运行会有什么样的结果，或者运行会和原本的结果有什么差别。本生活小相册微信小程序的测试主要是看用户查看相册是不是会正常显示、制作相册的过程有没有错误、是不是能正常登陆。其中最重要的是制作相册和查看相册两个功能，用户需要按照规定的要求去操作，才可以把一个相册制作出来。没有一个系统会做的很完美，在进行系统测试的时候也许会发现一个以前从没有发现的错误，发现了错误就可以把这个不好的地方改好。系统测试应该存在于系统开发的整个过程，而不是只在系统开发的开头或者结尾进行，应该要不断测试，不断修改，把这个生活小相册微信小程序做的更好，减少bug的产生[22]。如果选择在结尾进行测试，那么最开始的问题可能不严重，不足以对程序产生影响，但如果没有发现小错误而且不加以重视，在继续开发工作之后，问题可能会恶化到影响整个程序的运行。在早期发现问题的时候就要把问题解决，防止错误变大[18]。6.2测试用例用户登录功能测试，如下表所示。表6-1用户登录功能测试用例用例名称测试功能操作操作过程预期结果测试结果用户登录模块测试用户成功登录。用户授权1.授权2.点击登录按钮。跳转到用户的界面正确相册信息添加功能测试，如下表所示。表6-2相册信息添加功能测试用例用例名称测试功能操作操作过程预期结果测试结果相册信息添加模块测试相册成功添加的情况相册的基本信息用户根据流程添加相册信息，然后点击“提交”按钮。提示成功。正确续表6-2相册添加模块测试相册添加失败的情况相册信息不完整用户点击创作后填写的信息不完整，然后点击“提交”按钮。提示“*信不能为空”。正确相册信息界面测试，如下表所示。表6-3相册信息界面测试用例用例名称测试功能操作操作过程预期结果测试结果相册信息显示功能模块测试相册信息显示的正常情况显示相册信息用户发现，进入相册信息列表，点击进入详细介绍界面。详细信息显示正常正确6.3测试方案对本生活小相册微信小程序进行测试，就是测试这个相册在实际操作中是否会出现问题，能不能正常运行。用户登录测试进入到小程序页面，会出现登录界面，这个时候点击“授权登录”按键，同意把用户的微信信息上传到小相册里面，然后从后台把用户的信息调出来显示在小程序上。制作相册测试在“制作”页面，点击添加照片，然后选取需要上传的照片，再填写标题、内容和选择分类，最后点击上传就可以生成一个相册。如果没有填写标题或者内容，系统会提示“标题\内容未填写”。查看相册内容测试在“发现”页面，选择其中一个相册查看，看看相册相关信息是否显示正常。6.4测试结论本生活小相册微信小程序设计要求基本都可以达到，软件功能模块都是完整的，使用起来没有任何问题。用户界面简约，没有过多繁杂的手续，很容易上手使用，本系统还能够正确的处理错误信息。但是在系统测试过程中，系统在一些方面的功能也不够好，以后我会加强学习和多磨练，把这个生活小相册完善好。结果分析，本生活小相册微信小程序系统运行性能良好，对用户的请求能快速给出回应；系统的基本功能都齐全，能满足用户的需求；用户界面简洁，操作方式简单。7总结

本生活小相册微信小程序，通过分析需求来说明本系统的设计与开发是可行的。然后使用wxml，wxss，js，php，MySQL这些技术去进行开发这个系统。在开发开始的同时，也要对系统进行测试，避免出现问题。系统开发完成时，最后对小程序进行系统测试，测试开发出来的系统是否符合用户的需求。本次设计开发的生活小相册微信小程序具有系统性能良好和用户界面良好等优点，是一款适合广大用户使用的小程序。对于本次生活小相册微信小程序的设计与开发，因为本人是第一次接触，很多技术都不懂，需要重新去学习，也算是提高了自己的能力。然后很多相册细节方面的东西也没有做好，这个小相册还有不足的地方，这