中国知网查重 高校在线论文查重入口

立即检测
  • 58 元/篇
    系统说明: 知网职称论文检测AMLC/SMLC是杂志社专用系统,针对投稿论文、评审论文、学校、单位职称论文的学术不端重复率检测系统。
  • 298 元/篇
    系统说明: 知网本科论文检测PMLC是最权威的大学生毕业论文检测系统,含“大学生论文联合对比库”,国内95%以上高校使用。检测结果和学校一致!
  • 498 元/篇
    系统说明: 此系统不支持验证!可用作研究生初稿检测,相比知网VIP5.3缺少“学术论文联合对比库”,检测结果有5%左右的误差!(论文中若参考往届研究生论文,重复率误差会较大)
  • 128 元/篇
    系统说明: 大分解论文检测系统,对于想检测学术不端文献检测系统,而又价格便宜的同学可以选择,限每篇2.9万字符,结果与大学生PMLC、硕博VIP定稿系统有出入!
  • 68 元/篇
    系统说明: 知网论文小分解检测系统,适合中国知网初稿查重,数据库和定稿查重不同。结果与本科PMLC,研究生VIP5.3有出入,限每篇1.4万字符!
  • 3 元/千字
    系统说明: 学术家论文重复率检测系统,支持学位论文、毕业论文、投稿论文、职称评审论文,提供全文对照,word标红报告,性价比超高!
论文方法介绍-基于微信小程序的个人博客的设计与实现
时间:2021-05-05 14:03:05

  随着近年来我国社会和经济的迅速进步和发展,人们对于手机的喜爱和需求越来越大,所以由于手机的各种功能和软件也是一直备受手机用户的广泛喜爱,博客也作为一种个性化的网络社交应用,得到了迅速的发展和广泛普及。当下微信被手机用户普遍的使用,且个性化的个人网站博客的建设人员可以通过博客发表文章和图片来充分帮助用户表达自己的价值观和思想、展示自己的智慧和才华、表达自己的价值观和情感。因此为方便用户能够可以随时发布个人心情以及想法,特开发了基于微信小程序的个人博客管理系统。

  本文系统主要是在c/s(客户端/服务器)开发模式下自主开发的基于微信小程序的网页顶端个人博客的管理系统。本文主要是讨论了小程序个人顶端博客开发和管理系统从用户需求的分析到视图编码的整个系统开发和设计的过程。它充分体现了mvvm的系统设计和开发思想,利用网页顶端视图编码模型自动完成了数据与网页顶端视图的双向相互绑定,并自动地承担大部分视图和数据的处理工作,解决了用户界面复杂、迭代速度快等复杂问题。

  本文主要介绍了个人博客各模块的功能,探讨了博客系统中存在的问题及解决方案。微信小程序个人博客的设计和开发管理系统利用了现有的成熟技术作为参考,以源代码为基础设计模板,分析了功能的调整与对微信小程序窗体顶端个人博客的管理实际以及用户需求的分析相结合,并简要讨论了基于网页顶端微信小程序开发的网页顶端微信小程序对于个人顶端博客开发和管理的实际应用。

  互联网是人类的基本需求,特别是在现代社会,随着个人压力越来越大和社会运行速度的加快,随着互联网的飞速发展,用户的需求也越来越高,用户将越来越依赖互联网而不是自己获取信息,使得各种软件程序的开发得到了应用。

  个人博客(personalblog)中文又称博客、部落馆(blogandtribalpavilion),是一种通常由腾讯个人开发者管理、不定时的发布新文章或发布动态的小程序。通常根据小程序在博客中的动态文章发表的时间,按从新到旧的顺序排列。比较基本典型的个人博客系统通常是发布博客文本、图片。博客评论作者们所发表的个人博客评论内容,很大一部分主要是以博客文字为主,还有一部分博主会发布包含视频、音乐的网站链接或者其他题材的网站链接等,因此,博客的世界本身就是一个千千万万的世界。

  1.2研究目的

  近年来,随着我国经济的不断发展,平台管理系统越来越多。各系统管理也将通过计算机进行整体智能化操作。对于微信小程序个人博客功能所涉及的数据,管理员可以在线查看个人博客信息,处理或留言,管理和维护相关知识数据。因此,开发微信小程序个人博客,方便用户评论或查看他人博客信息的详细信息。该系统能够满足用户获取微信小程序个人博客信息的需要,能够及时、准确、有效地查看微信小程序个人博客信息,而且可以很有效很规范极具系统性的进行工作。

  现阶段个人博客是广大人民群众交流沟通的主要途径之一,在社会的得到了广泛的欢迎和肯定,选择该课题深入研究个人博客,是为了可以给人们提供更加完善、更加有效的资源共享小程序,提供更加优质、更加丰富的服务,使大众的需求得到充分满足。不仅如此,个人博客小程序对推动微信平台和手机使用的更好发展起着不可忽视的作用。目前,大众所能接触到的个人博客系统,还没有统一的标准,且目前市面上已经开发的大多数博客系统都集中雨服务企业或其他社会机构,而对于普通用户的需求关注甚少。因此,创建一个适合个人交流的、功能完善的博客系统是最需要解决的问题。所以根据普通用户的需求开发一个个人博客小程序是非常必要的。

  1.3国内现有状况分析

  由于互联网技术的成熟稳定发展,因此网络传播的生活方式逐渐受到广大人民群众的喜爱,且人们对信息共享的兴趣也越来越高,逐渐增多的互联网爱好者开始在网络上满足他们的基本需求。微信小程序的个人博客管理系统,满足了用户工作繁忙时快速发布动态和文章的需求,不仅是方便用户随时查看他人博客信息的途径,也是提高生活效率和管理效率一种有力办法。

  本文先是以在开发微信小程序的个人博客的过程中面临的基本问题作为研究对象。在开发该小程序之前,我们对目前社会的状况进行了细致的调查以及分析。最后,我们使用微信开发工具开发了一整套完整且适合的微信小程序的个人博客管理系统。该小程序的实现后体现的主要优势是:该小程序运用最全面的技术开发,使它变得更加便利快捷,且它存在于微信之中,不用再去下载多余的APP,节省许多麻烦。

  微信小程序的个人博客管理系统软件是一款既便利又快捷且还实用的信息发布共享软件。由于在全球市场中智能网络和各种各样的智能平台的普及与运用,开发一些和人们的日常需求息息相关的软件、系统、程序变得尤为重要,中国作为主流的智能市场,有较为扎实的开发技术,自然需要这样的程序来满足更多用户的需求和体验。

  2、开发环境以及系统框架概述

  2.1系统开发环境以及使用工具概述

  2.1.1 JavaScript语言

  著名的Netscape的设计工程师设计了这个名为JavaScript的语言并完成和实现了它。在一开始的设计决策上,他们把这个脚本语言的名称定为livescript,后面Netscape和sun一起合作之后,他们决定开始正式开发这个语言,Peter是sun里面的工程师,他主持了这场开发工程并将这个脚本语言重新命名成JavaScript。在1992年,他们将JavaScript推向计算机智能应用市场后,该语言受到了非常多本行业专业的开发人员的肯定和追捧,很多人喜爱它并使用它。当时国际上较为重要的工程开发设计师Brendan以及名为Mozilla的设计小组所成立的基金会很快速的更新了这个受大众欢迎的新型产品,并且在原本开发设计的基础上适当的增加了一些新功能,最重要且最有利的是增加了比原本设计时更加好的更加方便于使用者的功能交互界面。由于足够重视的包装和推广力度,让这类面向对象的基于原型的脚本语言变成了整个智能主流市场乃至全世界较为流行的较为广泛使用的网络编程语言。ECMAScript是这个脚本语言的核心,它是这个语言的一套完整的标准,界定了该语言是什么样的、可以做什么;DOM代表文档对象模型,它是一个HTML和XML的API,它让该语言的一整个界面变成由节点一层一层衍生构成的一个文档,从而生成了一个个的标记语言;BOM是浏览器对象模型,对于开发者来说它一直都没有一个固定的硬性标准,都是程序系统根据自身的情况去确定实现它的。由这三部分组成了一个完整的JavaScript。图2-1-1为JavaScript的结构图。

  图2-1-1 JavaScript的组成结构图

  经过这些年的改进和沉淀,JavaScript成为了目前网络上设计开发较为常用的一种脚本语言,它的技术支持常常被广泛的使用在计算机Web这一类的设计开发之中。它本身最主要最具有可用性的功能是能够把嵌入动态文本这一想法实现在HTML页面中。这个功能给开发者提供了制作动态文本页面的方法,使HTML页面能以动态形式展示且便于设计开发着的访问,大大的取代了一个简简单单且死板的静态页面所展示实现的功能。这边还要提到另一个非常重要且实用的功能就是它能够控制cookies,其中甚至可以创建以及修改等权限。博客使用者只要通过这个简单的功能就可以快速的使得更新cookies等等状态的小程序变得更加快捷方便,而且还使使用者可以迅速的完成查看自己的博客历史文章和任务等其他的功能。

  2.1.2微信Web开发者工具

  该基于腾讯微信小程序的典型个人博客系统中所使用到的小程序开发工具主要是通过其腾讯官网发布的,它被叫做腾讯微信小程序开发者管理工具,通常也把它们统称作为下载微信小程序web的开发者下载工具,简称微信开发者工具。通常小程序开发者都是根据自己电脑的配置或者操作系统去微信小程序的开发文档中搜索找到不同位或者不同版本操作系统的小程序开发工具,然后进入自己选择下载的开发者界面并下载安装它。官方会提供一种框架用于小程序前端的开发。这是一种基于本机系统系统层的框架,引起注意的是Web中的JavaScript的某些方法(例如文档和窗口)不可用,这是因为它不在浏览器上运行。HTML5在过去的时候加载时经常处在网络环境中而受到种种限制,它总是需要一步步的去加载HTML、加载CSS以及JS接着再去返回数据,最后把页面进行渲染后才会呈现一个完整的页面显示在浏览器中。这样最不好的就是用户总是不得不等待很长一段时间,因此很大程度使用户体验降低了。再看小程序,它拥有的两个线程一个称为AppService线程另一个叫做View线程,启动时它们是同时进行的,同一时间同步加载,准确意义上甚至可以说AppService线程是会比另一个线程更加早一点执行的。这是一种新式流行的小程序,它的功能它具有的优化策略有效提升了开发者和用户的小程序使用体验和质量且也有效的减少了很大一部分的成本缩短用户下载等待的时间,同时更高效的提升了小程序的运作效率和速度

  微信小程序web的开发者模式工具它是一种仅仅只需要基于本身的开发者工具,它的优点很多,可以实现一套完整的流程:不用担心本地文件不能同步,它可以做到;开发是它必备的功能,开发后的调试也不能少;编译和预览对它来说也不在话下;完成开发后的上传作品和发布作品也是它自己本身就可以做到的。

  着重从底层的框架这方面来看,它是一种基于ne.js的微信Web开发者工具,它想要实现底层模块使用到的是node.js、还有chromium以及系统API,然后如果是搭建用户交互层的话它则会使用React、Redux等的一些前端技术框架,它的最大好处就是同一套代码能实现跨平台使用。

  2.2系统开发框架概述

  2.2.1微信小程序

  当时小程序刚起来的时候好似并不受人广泛使用,对于小程序这个新型产品,微信官方告诉我们的是,它是一个不需要再去商店下载就可以直接进行使用的应用,它的出现,使应用触手可得不再是梦想,使用者只要通过扫描特定的二维码或者搜索某个小程序的名称就可以进入到小程序里进行使用,并且可以做到“用完即走”,也不会占用太多的手机空间去安装应用,当你想去使用某个小程序的时候任何时间都可以通过微信授权进入到页面使用,它无处不在于微信中,你不用担心安装问题,不需要的时候也不用花费时间去卸载。2017年1月9日正式发布使用直到今日,它就一直在网上受到广泛的关注,微信开发团队也是快马加鞭不断的开发和更新各类小程序。从发展趋势以来不难看出微信小程序开发中存在的便利性和优势也是非常突出的,各种网页,各种微信公众号,还有h5以及一些其他app无法直接触及的其他地方它都有或多或少的涉及到,加上这种无需注册或者安装任何软件即可进行使用的便利大大的充分满足了用户的微信开发需求。另一方面从小程序开发者所有者的角度出发,很大力度的降低了开发成本,且由于微信是成为目前的主流交流工具,占据着很大一部分的流量市场,因而推广成本也就随之降低。总而言之,微信小程序以全新的方式,它能够把用户和服务很好地连接在一起,而且方便可以直接在微信中分享转发获取,使用中能体验到很棒的乐趣。

  2.2.2微信云开发

  微信小程序的云开发是在进行微信小程序开发时可以用到的较为方便的开发方式,它的较为主要的3个部分包括了数据库、存储器以及云函数。

  数据库。该小程序云开发它可以有多个集合(与关系型数据库里面的表相似)提供给Json数据库,这里面的每个集合都是一个特定好的Json数组,这个组中会存在很多条的记录,任何一条的记录都可以是任何一个Json格式的对象。通常情况下我们知道一个较为完整的数据库API都是根据服务端和小程序端结合而成的。小程序API具有着很大的优点是它的调用权限极好,技术开发者可以在小程序中使用小程序中的API直接进行调用非敏感的数据。服务端的API的功能是它完全可以通过云函数去操作数据,便于使用者完成安全性比较高的比较缜密的数据。且有一个好处就是该小程序的客户端是和云函数的内容以及环境完全隔开的,不用担心数据泄露等问题,因此使用者可以通过云函数上放心的操作数据库且不会有任何不安全的问题。同其他数据库一样,增加、修改、删除、查询是数据库API的基本功能,想要对数据库操作,可以通过使用API来进行获取数据库的引用、对条件的构造来更新和查询以及发出请求3个过程来完成数据库的操作。

  存储器。这也属于云开发里比较便利的一处地方,完全的免费存储空间是它可以给开发使用者提供的。不仅在云函数端包括小程序端,开发者都可以借助API来使用云存储的功能,而且用户也可以把文件上传到云端上或者如果云端带有权限管理,也可以对它进行文件下载操作。

  云函数。云函数的其根本从某种意义上来说就是一段完整的能够直接运行于整个云端的微信开发程序代码,它不需要任何的后端管理服务器,它是一种只是需要把它的整个程序代码进行完整编写,再进行一键上传后就可以直接运行出微信开发结果的后端程序代码。开发者在微信开发的过程中时可以在小程序里直接使用专门用来开发的可让通过云函数直接进行微信开发调用的数据库api,或者说只是对云端的数据库进行操作、对云开发文件进行的管理以及对其他一些的云开发函数文件进行调用等的一些读写操作都是可以在小程序的云开发函数中用来进行。

  3.可行性分析

  3.1技术可行性

  开发的基于微信小程序的个人博客系统采用的是C/S结构模式,还引入了MVVN结构,该小程序的功能完备、且使用起来简单方便,是一个便利的程序,同时也拥有、维护了一个数据完整、安全性、稳定性强的云端系统。

  这个小程序使用的是JavaScript语言和微信Web开发者工具作为设计工具,下载的东西仅仅是一个微信开发者工具而且好处是能够让人简单易行地学习和操作。根据用户角色之间的相结合去开发一套微信小程序的个人博客是值得尝试的,其中数据的完整性以及其他的许多较为良好的品质为系统的功能分配和管理提供了良好依据。它的云端数据库是小程序的重要组成部分,是提高和增强数据安全性的重要手段。在这这个开发工具中,功能强大并且免费同时做出来的界面良好,主要的就是上面提到的各项技术上的术语相对完善,给整个开发设计提供了非常全面的帮助,是非常利于进行程序开发和代码的维护,所以微信小程序的个人博客在技术方面是可行的。

  3.2经济可行性

  在这里,基于微信小程序的个人博客运用了当下比较流行且完善的开发方法,具有非常高的可靠性,而且开发时所需要的时间也相对比较短。这个小程序完全可以由开发者自己个人开发,根本不需要购买其他的软件或者端口之类的辅助工具,包括在开发个人博客小程序之前所做的市场调研以及对该小程序的推广和分享,都是没有任何费用的,通过开发者本身的努力,所有的工作都是自己独立完成亲力亲为的,在碰到自己一个人比较难以解决的问题的时候,大多数选择了求助同学和指导老师的帮助来解决相关的问题。而且,对于这个开发项目来说,并不需要太高要求的软件运行环境,所以就不需要支付任何维护设备的成本。因此,设计成本相对来说是非常低的。所以对于微信小程序的个人博客的开发在经济上是完全可行的,没有任何费用支出的。

  3.3操作可行性

  操作可行性的中心含义主要是当该微信小程序的个人博客系统设计完成后,用户对它进行使用的体验度。对于用户来说,是否全都可以简单明了的进入到自己的程序界面,并通过当中的界面导航以及菜单简单明了地操作拥有的这些功能模块。这个程序的优点就是方便满足用户获取和共享信息的需求以及管理员可以管理数据信息,且对于程序上,并不需要专业人员都可以直接进行对于功能模块的操作管理。所以综合使用情况后可以知道,在系统中的操作性是完全可以的。使用人员只要会简单的微信操作,懂得从微信中进入小程序即可。

  4、需求分析

  4.1系统功能模块分析

  不管是什么项目,任何一个在开发前,都需要对其研发系统本身的需求做一个认真的分析,基本的市场调研是很重要不可忽视的,从实际生活中确定使用人员的功能需求,从而明确开发功能的目标,对整个小程序的设计有一个更加准确的定位,所以我们需要进行对程序各种功能进行分析,一个好的完整的个人博客小程序应该具有:个人博客的用户管理功能,用户根据微信账号授权进入小程序;发表评论的功能,用户在主页进行下滑操作进行浏览动态时,对某一条动态内容有自己的见解,就可以选择评论功能发表自己的想法和博主互动;分享功能,用户浏览时对一些博主的动态比较感兴趣,觉得比较有趣想分享给其他微信好友时,直接点击本条博客下方的分享键就可以进行分享;发布文章功能,这个功能是最基本也是必备的,其中包括了可以发表文字、图片、网站链接等;搜索关键字查找功能,用户可以通过搜索栏输入关键字去搜索想看的博客内容。

  需求是否可行,是要分析和讨论所要开发的系统最大限度能达到什么样的要求以及开发后的程序结果是否有符合之前的要求。如果开发一个功能合格的系统的可行性很低或者完全不具备,那相当于开发失败。基于微信小程序的个人博客,要求在IOS和Android上都能正常运行,且切换不同系统原本数据不会丢失。

  系统设计需要从用户的实际需求开始,以了解他们需要实施哪些功能以及他们可以包括哪些管理工作。考虑到微信小程序的个人博客系统设计的特点,应满足几个要求:

  (1)它可以通过微信开展微信小程序的个人博客信息管理工作,促进对微信小程序的个人博客信息的统一管理。

  (2)学习方法变得更加多样化,管理更加标准化;

  (3)它提供了一个免费的渠道,以确保数据的实时有效沟通。

  4.2数据流图及用例图

  对于系统的安全性的第一关,就是用户想要进入小程序,必须通过本人账号授权才可以进行登录,登录之后直接进入博客主页的操作界面,接着就可以对每个功能进行使用、体验。如图4-1所示。

  图4-1个人博客小程序用户数据流图

  用户确定身份授权进入程序后,就可以以普通用户的身份来进行一系列的操作。如图4-2所示。

  图4-2个人博客小程序用户用例图

  5、系统设计与实现

  5.1系统功能设计

  微信小程序的个人博客系统项目的概述设计分析,主要内容有学习微信开发者工具平台的具体分析,数据采用云端数据库,而且我们对于这个程序的设计采用了比较人性化又通俗易懂的操作设计,对于系统如果出现错误的信息也可以及时做出处理及反馈。

  基于微信小程序的个人博客的设计界面主要包含“Homepage”和“我的”,方便用户在使用个人博客小程序时有更加直观的体验感。

  图5-1个人博客小程序系统功能模块图(一)

  其中“Homepage”可以进行的功能模块有浏览动态、评论动态、查看评论、分享动态、发布作品、搜索动态六个模块。

  (1)浏览动态模块:用户通过账号授权登录小程序,可以直接到达Homepage,往下互动可以看到广场上所有人发布的博客作品,系统会根据在后台进行实时数据刷新,按降序的方式把最新发布的放在最顶,用户可以通过小程序刷新或者重新进入来看到最新的动态。

  (2)评论动态模块:当你浏览动态时,想对某一条动态发表自己的看法,就可以点击该条动态的左下角的“评论”,这样就可以进行输入文字了。

  (3)查看评论模块:当你想看看其他人对某一条动态是如何评价的时候,你就可以直接点击这条动态,往下滑就能看到别人的评论了。

  (4)分享动态模块:假如你对刷到的这条动态很满意,想把它分享给微信还有,只要通过点击动态右下角的“评论”,就可以跳转到微信界面进行分享了。

  (5)发布作品模块:位于Homepage的左上角,直观醒目,用户可以很快的找到它,点击进入后,会跳转到发布博客的界面,这时就可以根据自己的意愿进行发布,还可以添加图片。

  (6)搜索动态模块:在博客Homepage的最上面正中间,有一个搜索栏,点击搜索栏,输入想要看的动态或者关键字,再点击“搜索”,就可以出来了。如果想重新进入Homepage,只要把搜索栏的文字删掉,再点击一次搜索,就可以回到Homepage。

  “我的”可以进行的功能模块有查看我的博客,生成小程序码两个模块。

  (1)查看我的博客模块:用户点击“我的”页面,再点击“我的博客”,就可以查看用户发表过的所有历史动态。

  (2)生成小程序码模块:用户点击“小程序码”就可以自动生成该个人博客小程序的程序码,然后长按小程序码,就可以对小程序码进行发送好友、收藏、保存至手机等操作。

  由以上功能模块组成一个完整的个人博客微信小程序,如图5-2所示。

  图5-2个人博客小程序系统功能模块图(二)

  5.2系统数据库设计

  在编程过程中最重要的步骤是数据库,一个程序项目想要达到我们的目标要求,就是依靠在数据库中不断地增删改从而去完成实现的。所以,一个数据库就是一个项目的核心,它的地位是举足轻重的。

  我们根据本课题项目的实际需求去设计并制定基本的逻辑结构,再通过根据上文的实际需求设计和分析,得出各个实体与其对应属性之间的逻辑相互联系,可以由此得到完整的E-R结构图。

  图5-3系统E-R图

  在基于微信小程序的个人博客系统中,为了让项目开发过程更加便利,同时也考虑到系统程序的可移植性,也包括节省开发资源,本小程序采用的是云开发平台数据库系统。

  下表是博客表,用户可以查看博客的基本信息。

  表5-1博客表

  字段名类型允许为空备注

  id string NOT NULL Id

  openid string NOT NULL openid

  avatarUrl string NOT NULL授权

  content string NOT NULL博客内容

  createTime date NOT NULL创建时间

  img array NOT NULL图片

  nickName string NOT NULL博主昵称

  下表是博客留言表,包含评论者、回复评论者、留言具体内容以及和留言存在相关联的信息。

  表5-2评论表

  字段名类型允许为空备注

  id string NOT NULL Id

  openid string NOT NULL openid

  avatarUrl string NOT NULL授权

  blogId string NOT NULL博客评论者的ID

  content string NOT NULL评论内容

  createTime date NOT NULL评论创建时间

  nickName string NOT NULL评论者昵称

  5.3程序结构

  基于微信小程序的个人博客通过需求分析和以上E-R图、基本属性表的制作,项目整体操作界面以及程序的架构满足最初制定的目标用户需求。以下制订的是个人博客微信小程序的用户界面的架构以及管理员处理数据的架构。

  图5-4个人博客微信小程序用户界面架构

  5.4用户界面各模块的实现

  微信用户通过账号授权后进入小程序端,可以直接用微信账号作为其个人博客小程序的账号,进入小程序后,就是博客的主页页面,类似一个广场,用户能够在这里看到其他所有用户发表的动态以及各个博主的一些相关信息。

  图5-5个人博客主页界面图

  登录时获取用户权限。

  exports.main=(event,context)=>{

  console.log(event)

  console.log(context)

  //可执行其他自定义逻辑

  //console.log的内容可以在云开发云函数调用日志查看

  //获取WX Context(微信调用上下文),包括OPENID、APPID、及UNIONID(需满足UNIONID获取条件)

  const wxContext=cloud.getWXContext()

  return{

  event,

  openid:wxContext.OPENID,

  appid:wxContext.APPID,

  unionid:wxContext.UNIONID,

  }

  }

  进入主页页面。

  <view class="container">

  <!--头部-->

  <view class="header">

  <view class="publish-container"bind:tap="onPublish">

  <i class="iconfont icon-fabu"></i>

  </view>

  <view class="search-container">

  <x-search iconfont="iconfont"icon-suosou="icon-suosou"bind:search="onSearch"/>

  </view>

  </view>

  <!--博客卡片列表-->

  <view class="blog-list">

  <block wx:for="{{blogList}}"wx:key="_id">

  <view class="blog-panel">

  <x-blog-card blog="{{item}}"data-blogid="{{item._id}}"bind:tap="goComment"/>

  <x-blog-ctrl blogId="{{item._id}}"blog="{{item}}"iconfont="iconfont"icon-pinglun="icon-pinglun"icon-fenxiang="icon-fenxiang"/>

  </view>

  </block>

  </view>

  <!--底部弹出层-->

  <x-login modalShow="{{modalShow}}"bind:loginsuccess="onLoginSuccess"bind:loginfail="onLoginFail">

  </x-login>

  </view>

  通过进入主页浏览其他人的博客之后,用户可以点击左上角的图标跳转到发表博客界面,通过输入文字,添加图片等操作确定内容、进行发表。

  图5-6个人发布博客界面图

  先要判断用户是否授权,授权之后才能在小程序进行发布等操作。

  //发布功能

  onPublis(){

  //判断用户是否授权←

  Wx.getSetting({

  success:(res)=>{

  if(res.authSetting['scope.userInfo])

  Wx.getUserInfo({

  success:(res)=>{

  this.onLoginSuccess({

  detail:res.userInfo

  })

  }

  })

  }else{

  This.setData({

  modalShow:true,

  })}}

  })}

  用户通过浏览有趣的动态,相对其进行分享,点击该条动态的右下角显示的分享,即可跳转到分享给微信好友的界面。

  图5-7我的博客分享界面图

  /**

  *用户点击右下角分享

  */

  onShareAppMessage:function(event){

  console.log(event)

  let blogObj=event.target.dataset.blog

  return{

  title:blogObj.content,

  path:`/pages/blog-comment/blog-comment?blogId=${blogObj._id}`,

  //imageUrl:''

  }

  }

  小程序的另一个主要页面是“我的”,通过这个页面,用户可以看到个人发表的历史博客,以及通过生成小程序码对他人进行小程序的分享。

  图5-8我的界面图

  以下是我的界面的相关代码,各个样式的视图设计。

  <view class="personalCenter-header">

  <view class="avatar-url">

  <open-data type="userAvatarUrl"></open-data>

  </view>

  <open-data type="userNickName"class="nickname"></open-data>

  </view>

  <view class="nav">

  <view class="nav-item">

  <navigator class="content"hover-class="none"url="/pages/personalCenter-bloghistory/personalCenter-bloghistory">

  <i class="iconfont icon-bokeyuan"></i>

  <text class="text">我的博客</text>

  <i class="iconfont icon-icon--"></i>

  </navigator>

  </view>

  <view class="nav-item">

  <view class="content"bind:tap="onTapQrCode">

  <i class="iconfont icon-erweima"></i>

  <text class="text">小程序码</text>

  <i class="iconfont icon-icon--"></i>

  </view>

  </view>

  </view>

  当用户想对某一动态进行留言自己个人看法的时候,点击评论输入文字等的操作可以进行留言。

  图5-9发表留言图

  <!--评论内容列表-->

  <view class="comment-list">

  <!--评论-->

  <block wx:for="{{commentList}}"wx:key="_id">

  <view class="comment">

  <view class="comment-title">

  <image class="comment-portrait"src="{{item.avatarUrl}}"></image>

  <text class="comment-nickname">{{item.nickName}}</text>

  </view>

  <view class="comment-content">

  {{item.content}}

  </view>

  <view class="comment-time">{{item.createTime}}</view>

  </view>

  </block>

  </view>

  通过小程序自带的查询语法编辑对博客列表查询的云函数代码。

  app.router('list',async(ctx,next)=>{

  const keyword=event.keyword

  Let w={}

  if(keyword.trim()!="){

  w={

  //小程序自带查询语法

  content:new db.RegExp({

  regexp:keyword,//模糊查询

  options:"i"//忽略大小写;m跨行匹配;s匹配字符

  })

  }

  }

  //数据库查询:where(查询条件),skip(分页),limit(分页条数)

  Let blogList=await blogCollection.where(w).skip(event.star).limit(event.count).orderBy('createTime','desc').get().then((res)=>{

  return res.data

  })

  ctx.body=blogList})

  以下是关于路由的插件,tcb-router的相关代码截图。

  {

  "name":"blog",

  "version":"1.0.0",

  "description":"",

  "main":"index.js",

  "scripts":{

  "test":"echo"Error:no test specified"&&exit 1"

  }

  "author":"",

  "license":"ISC",

  "dependencies":{

  "tcb-router":"^1.1.2",

  "wx-server-sdk":"latest"

  }

  }

  6、系统测试

  6.1测试概述

  每一个程序设计都不能保证它完全没有错误,开发一个程序,是一个漫长的过程,甚至在投入大众使用后,也有可能出现系统错误的情况,这几乎是难以避免的。当发现错误的时候,我们不能让它一直错误,不能让这个隐患总是存在在系统里面,因为稍微一点小错误如果不去重视就会引起更大的错误,从而造成不可预计的后果。小到系统可能会崩溃或者不能正常启动,大到信息泄露降低安全性甚至可能导致用户手机界面无法正常显示。因此为了不让这些问题造成严重的后果,我们就得把程序进行测试,争取找出每一个错误的问题,再把它解决改正,从而也能够让这个程序系统变得更加稳定更加成熟。

  总的来说,可以说它是检验系统的一个环节。在做完程序开发之后进行这个环节,把安装在电脑上的软件以及相关环境框架连接起来,搭建起一个互相通联的整体。对于软件系统这一方面来说,要牵涉到非常多的需要检查的内容,其中一个是会牵涉到使用的软件,还有另一个是会涉及到开发时需要的电脑硬件支持,不过该项目属于比较基本的开发项目,对电脑硬件没有过多的要求。此外,如果较为严谨的话,可以选择对使用的网络也展开对应的测试检验。这个程序主要用到的是黑盒测试的功能测试。黑盒测试的核心功能是能后让测试人员知道该系统的需求,测试人员也无需关心系统的实现过程。往往只用把涉及到每一个功能的数据全部输入进去,然后就可以认真且深入的把原定的目标和测试得到的结果进行对比,运用这种方法就可以检测出系统的问题。所以对于想测试系统功能有没有和原定的目标符合,以及功能有没有成功实现,往往运用到的是黑盒测试。

  6.2可用性测试

  (1)浏览、评论、分享功能:用户通过授权微信号进入到小程序的Homepage,对主页的每一条博客进行下滑浏览,能否正常的看到每条动态的文字、图片以及发布时间,在“我的”页面点击“我的博客”能否查看用户个人的历史动态,点击“小程序码”,能否生成该程序的小程序码;对他人博客发表意见时是否能够正常评论成功以及点击某一条博客是否顺利查看其他人的评论;对于分享博客,点击分享能不能跳转到微信好友界面。

  (2)用户发布作品功能:用户对左上角的发布作品的图标进行点击操作,能不能快速且直接顺利的进入到发布博客的页面,是否能正常输入文字以及正常的添加图片,确定内容后能不能发布成功,主页会不会显示发布成功后的动态,我的博客里有没有新增一条刚发布的动态。

  (3)用户搜索功能:点击Homepage上方的搜索栏,可不可以输入文字,点击搜索后能否出现想要的内容。当想回到主页的时候,删掉文字再点击搜索能否成功回到主页。

  根据以上内容进行测试,制定出测试用例表6-1。

  表6-1测试用例

  测试名称测试用例预期测试结果

  用户浏览用户授权进入小程序后,能不能正常的进行浏览动态,查看动态的相关信息,以及能否查看用户个人历史动态和小程序码。可以正常的下滑浏览主页的博客,可以查看他人博客的文字、图片和发布时间,在“我的”页面也可以查看到个人的历史动态,能顺利的生成小程序码。与预期结果相符合

  用户评论用户能否对某一条动态进行评论,评论后能否显示在动态下方,能否成功的查看到其他人的评论内容。点击动态左下角的“评论”后可以正常的输入文字并评论成功,并且正常的显示在该条动态的下方,点击某一条动态后,可以下滑看见其他人的评论内容。与预期结果相符合

  用户分享用户能不能成功的把感兴趣的内容分享给微信好友。用户针对某一条动态,点击它的右下角“分享”,可以顺利的跳转到微信好友界面,选择其中一个微信好友点击发送按钮,可以成功的分享。与预期结果相符合

  用户发布作品选择发布图标后,能否正常输入文字,选择图片,能否发布成功,发布后会不会显示在主页,在我的博客里是否有新增一条最新发布的动态。进入发布博客页面,能正常的输入文字,也能顺利从手机图库里选择照片,确定内容后可以成功发布,也会显示在主页里,我的博客也显示一条新的记录。与预期结果相符合

  用户搜索用户点击搜索栏进行关键字搜索,能否搜索成功,当用户想返回主页的时候能否返回成功。点击主页正上方的搜索栏,可以成功输入文字,点击搜索可以成功搜索出包含关键字的所有动态,把搜索栏的文字删除再点击搜索,可以成功的回到主页。与预期结果相符合

  6.3安全性测试

  对这个项目进行安全性测试这项工作,是为了对程序系统的安全性进行一个基本的评估,利用专业性的测试来发现当中是否有任何的危险性存在。经过一系列的安全测试,可以知道仅仅只有开发设计者可以对这个程序进行后续的修改等一系列增删改查功能,对于其他用户如果没有得到授权是没有办法做任何操作的,所以该程序的安全性是没有问题的。