论文方法写作-基于微信的旅行分享与购物平台的小程序开发-CNKI知网查重网站

论文方法写作-基于微信的旅行分享与购物平台的小程序开发

2021-05-29 14:21:29
作者:杭州千明

  经济社会的发展推动着互联网技术的进步,在线上购物技术日益成熟的今天,开发一个集旅行图片视频分享和具有特色产品购买的小程序。利用成熟的互联网线上购物技术,和人们的旅行与购物需求相结合。

  本论文将实现应用Nightly Build代码开发者工具,使用以javascript语言为主,并在基于iOS、Android系统条件下,利用Bmob云端数据库,结合实体经济和网络购物两种形式,开发一个结合旅游分享和购物的微信旅游购物小程序。小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,在这个小程序里可以实现旅行图片、视频的分享和购物服务,用户可以浏览图片视频,并对视频进行点赞、评论、转发操作,以及上传自己的视频,并对自己心仪的商品进行购买。

  经济发展推动着移动互联网技术的进步,旅游的大众化,智能移动终端的高覆盖率,涵盖衣食住行宿多种门类的APP日益完善,使得越来越多的人可以实现手机在手,说走就走的旅行。在旅游类的APP中,国内以携程、去哪儿、马蜂窝等较为被熟知,以为消费者提供酒店预定、门票机票等购买和景点攻略推荐为主。国外有AirPano Travel Book、Guides、Momondo,以寻求旅行灵感、目的地介绍,机票酒店预定为主。在景点特色产品这一块几乎空缺的。

  网络购物技术目前已经较为成熟,拥有庞大又完善的购物体系,涵盖人群范围广,相较于实体经济拥有更低的成本,且不受时间、地点、空间的限制,更具有灵活性。国内的淘宝、天猫、京东的编程语言以Java、PHP为主。国外的ebay、Amazon主要以Java、javascript、C++为编程语言。互联网的发展为一些无法亲自前往人群提供便利,实现在家就能看遍世界,买遍各种优质好物。

  互联网的发展,催生了软件市场的繁荣,通讯类APP以其实用性高居人们日常生活使用频率的榜首,QQ、微信、钉钉,甚至支付宝都有通讯功能。其中微信以更简单便捷的操作被广为使用。由此基于微信平台下开发一个小程序,既有一个程序应有的各项操作,又具备免下载安装、微信授权登录,即登即用的清爽用户体验。同时小程序的开发语言相对简单,成本较低,已经成为更多人瞄准并投入生产的对象。本文的小程序主要以不同地区的旅游图片视频分享和购物为呈现目的,javascript为主要编程语言。以微信小程序开发者工具Nightly Build为开发环境,基于面向iOS、Android操作系统的微信客户端,掌握小程序中JS、JSON、WXML、WXSS四种文件的编辑,以WebStorm前端开发工具,Bmob为数据库服务器,来开发一个集合旅游图片短视频、购物于一体的微信小程序。

  1绪论

  1.1背景及意义

  随着经济的发展,互联网广泛普及,网络购物体系庞大又完善,并且受众范围广。城市快节奏的生活使人们越来越需要片刻的放松,改革开放以来国家政策鼓励发展旅游业,旅游业也随之蓬勃生长。

  2018年,国内旅游市场保持持续增长趋势,全年国内旅游人数为55.39亿人次,比上年同期增长10.8%;国内旅游总收入为5.97万亿元,同比增长10.5%。根据中国旅游研究院数据,2019年国内居民出境达到16921万人次,国内旅游收入为2.78万亿元,同比增长13.5%。国内旅游人数增速较2018年有所放缓,但消费增速没落下。同时出境游比例也在逐年增加。

  在旅行中计划中,人们通常会采用旅游类产品进行酒店门票机票等的预定,参考旅行攻略来制定自己的出行计划,国内例如携程、去哪儿、马蜂窝等旅游网。国外有AirPano Travel Book、Guides、Momondo等APP可以为旅行者提供旅行灵感、目的地确定、酒店机票购买的服务。

  互联网技术的成熟,网络购物以其不受时间、地点、空间限制的特点,逐渐成为不可或缺的购物选择,以更少的房屋水电雇佣成本,使得商品的价格相较于实体购物更低,当然实体购物也有着“所见即所得”、“即买即有”等这些网络购物目前不具备的优点。在手机、平板电脑广泛普及的今天,微信已经成为人们手机中必不可少的软件之一,以其便捷的文字、语音、视频通话多种选项的聊天方式,支付与收款等功能被人们接受。2017年1月9日,微信小程序正式开放。作为一种不需要下载、即开即使用的线上应用,它最大的好处莫过于节省手机空间。小程序可在微信中置顶或在手机桌面形成快捷方式,这样一来用户可卸载掉手机中冗杂的应用,用小程序代替。

  基于微信设计出一款集旅游和购物分享的小程序。国内现状:从开发角度,比APP编程语言更简单,制作周期更短,成本更低。从运行环境,小程序在多种平台上运行:iOS(iPhone/iPad)微信客户端、Android微信客户端、PC微信客户端、Mac微信客户端和用于调试的微信开发者工具。从用户角度,基于微信平台,不用下载安装,只需授权登录,使用过程便捷清爽。国外现状:从用户角度,主要是留学生和华人。从开发语言角度,JavaScript主要集中在网页前端编程语言。2017年1月小程序正式上线,早期的小程序数量较少,用户增长非常缓慢。在2017年末小程序开放游戏项目,同时在首页添加下拉小程序入口,并选用游戏“跳一跳”作为重点推广对象,随后“跳一跳”成功引爆朋友圈,被我们熟知,从那时候起小程序的访问量大增。直至2018年第二季度,微信小程序数量已经突破百万,小程序的用户规模也接近3亿人。同时,在小程序的流量诱惑下,接连吸引诸多巨头入局。

  1.2研究现状

  信息网络化时代催生了互联网经济,在当今发展阶段主要包括电子商务、互联网金融(ITFIN)、即时通讯、搜索引擎和网络游戏五大类型,是基于互联网所产生的经济活动的总和,是一种崭新的经济现象。

  移动互联网的革命浪潮开始至今,智能手机已经可以做到通过各类软件,为人们的生活提供各类服务,买衣服、订外卖、预定住宿、公共交通的查询和支付,以及叫车等。例如,淘宝天猫京东、ebay、Amazon等电商平台为用户提供:服饰、箱包、食品、美妆、电子产品、车品、家装等国内外产品。Uber、滴滴公司的叫车服务,美团、饿了么提供的订餐外卖,支付宝的理财支付,微信的社交,Momondo和携程的在线预定各种票类、酒店,北京公交、亿通行为北京市公共交通提供全覆盖,路线查询、手机扫码支付,无需公交地铁卡,轻装了人们的出门必需品。

  互联网为人们提供另一种选择。当下的互联网经济发展已经颇为成熟,覆盖人们生活的方方面面,由此微信小程序中以旅游分享和购物的主题也符合经济发展趋势和人们的需要。并且基于微信这个大平台更能使人们接受与使用。

  2019年天猫双11全天成交额为2684亿元人民币,超过去年的2135亿元人民币,再次创下新纪录。仅天猫平台就做到成交额的逐年显著增长,可见网络购物的潜力和发展力。网络购物已经成为一种趋势,互联网经济以其蓬勃的生命力为世界经济的发展注入新的动力。

  综合国内外的旅游类APP和购物类APP,都具有各自代表性功能,然而产品的研发期长、成本高,并且推广一个全新的APP需要耗费大量的人力和资金,都使得一个新产品的成本过分高昂。在微信的平台下,开发出一款具有旅行图片视频分享和购物功能的小程序,以其开发周期短、开发成本较低、开发语言较为简单,基于大平台更易被用户接受等优点被选择开发。小程序可在微信中置顶或在手机桌面形成快捷方式,这样一来用户可卸载掉手机中冗杂的应用,用小程序代替[8]。

  目前互联网经济体系已经较为完善,互联网技术也发展迅猛。互联网经济与互联网技术互相促进发展,互联网技术的成熟使得互联网经济应运而生,互联网经济的蓬勃发展促使互联网技术的日渐完善与不断改革出新焕发新的活力。在手机操作系统中,iOS操作系统的软件和硬件整合度高、稳定性强,界面美观、操纵简易。Android操作系统开源性、无缝集成Google应用、使用Java来开发Android应用的特点。这两者以其独具的特点,让苹果公司的iOS和谷歌公司的Android占据了市场的百分之九十以上的份额。由此微信小程序主要面向iOS和Android两大手机操作系统,开发出一款可适用于iOS和Android的小程序,从开发角度,小程序的编程语言主要是javascript,比APP编程语言更加简单,制作周期更短,成本低。运行环境来讲,小程序在多种平台上运行:iOS(iPhone/iPad)微信客户端、Android微信客户端、PC微信客户端、Mac微信客户端和用于调试的微信开发者工具。用户使用角度,由于基于微信平台,不用下载安装,授权登录既可,使用清爽,实现“即点即用”和“用完即走”的特点。从企业角度,能够以尽量少的成本得到流量。它主要针对具有时代发展潮流眼光的企业,这些企业懂得微信流量的无限可能性[9]。小程序在轻量化的使用上具有很大优势,但想要取代iOS和Android难度系数非常大。小程序虽是跨平台的,但是缺乏成熟的组件,缺少统计、绘图组件,以前的echarts和hightchars都无法使用[1]。在2020年的疫情当中,一些地方政府采用小程序为当地居民提供信息查询、政务服务。小程序在这特殊形势下又焕发了新的活力。

  1.3研究目标

  本论文主要基于微信平台设计一个可应用于iOS、Android操作系统的小程序,这个小程序集旅游分享与购物于一体。在互联网的大趋势与成熟的线下商品结合,为用户提供操作便捷清爽、内容丰富多样的体验。在供应商方面,使更多的线下商户搭乘互联网的快车,通过网络购物的渠道增加收益。

  本小程序主要功能模块如下:

  1、图片展示

  本界面有轮播图、最新最热分类、发布视频并包含标题和内容介绍。

  2、短视频

  用户可对不同视频进行点赞、评论、分享的操作。

  3、商品列表

  对商品进行分类,进入不同类别商品,含有商品图片、名称、价格显示。

  4、登录功能

  点击我的,通过授权登录,出现用户头像、用户名称,以及个人功能。

  5、我的钱包

  用户进入我的钱包后,可以选择固定充值额、手动充值额两种充值方式。

  6、我的订单

  用户进入后出现暂无订单、我的订单两种显示,其中我的订单记录包含:购买时间、商品名称、商品图片、商品价格。

  7、我的喜欢

  对用户的点赞视频进行展示,包括视频的标题和介绍。

  8、我的消息

  用户的未读和已读,未读包含红点提示、用户头像、用户名称、消息标题。已读包括用户头像、用户名称、消息标题并包括消息内容和消息时间。

  9、我的发布

  展示用户的暂无发布或我的发布,我的发布包含标题、视频、内容、删除。

  10、联系我们

  这里显示邮箱地址、新浪微博、微信公众号、抖音、快手、哔哩哔哩、知乎的联系方式。

  11、设置

  用户可在设置里增加收货地址。

  1.4论文组织结构

  本论文分为五章:

  第一章,绪论部分。这里说明了本论文的背景和实际意义,阐述当前国内的相关研究和分析,也对小程序的功能和论文的总体结构做了相关介绍。

  第二章,在本章节主要是对此系统所用到的关键技术做了相关的介绍。

  第三章,在此章节中主要是分析本系统的需求。

  第四章,本章节主要阐述说明了应用的整体设计。

  第五章,本章介绍了系统的实现及测试。

  2关键技术介绍

  2.1 Android

  安卓(Android)是一种基于Linux的自由及开放源代码的操作系统。主要用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。Android操作系统最初由Andy Rubin开发,支持手机为主。2005年8月由Google收购注资。2007年11月,Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。随后Google以Apache开源许可证的授权方式,发布了Android的源代码。第一部Android智能手机发布于2008年10月。Android逐渐扩展到平板电脑及其他领域上,如电视、数码相机、游戏机、智能手表等。目前安卓官网提供Android 4.4 KitKat、Android 5.0 Lollipop、Android 6.0 Marshmallow、Android 7.0 Nougat、Android 8.0 Oreo、Android 9 Pie、Android 10,到目前的Android 11开发者预览版的支持。

  Android开发者Android Studio是基于IntelliJ IDEA且适用于开发Android应用的官方集成开发环境(IDE)。除了IntelliJ强大的代码编辑器和开发者工具,Android Studio还提供更多可提高Android应用编译效率的功能,例如:

  ?基于Gradle的灵活编译系统

  ?快速且功能丰富的模拟器

  ?统一的环境(供您开发适用于所有Android设备的应用)

  ?Apply Changes功能可将代码和资源更改推送给正在运行的应用,而无需重启应用

  ?代码模板和GitHub集成,可协助您打造常见的应用功能及导入示例代码

  ?大量的测试工具和框架

  ?Lint工具,能够找出性能、易用性和版本兼容性等方面的问题

  ?C++和NDK支持

  ?内置对Google Cloud Platform的支持,可轻松集成Google云消息传递和App Engine

  以下是Android的各个重要模块,了解Android功能:

  1、界面框架,Android界面框架最有特色的就是资源和布局体系,通过完善的控件库和简明的接口,可以快速搭建界面。

  2、数据存储,数据存储有两种方式进行本地存储和上传到远端服务器进行的云存储。

  3、网络通信,Android系统会负责底层网络的连接管理,开发者可直接通过Http或socket与远端服务器连接。

  4、地理信息,获取地理信息可以通过网络利用基站定位。

  5、图形和多媒体处理,Android支持MPEG4、MP3、AAC、AMR、JPG、PNG、GIF等等格式的图像音频。

  6、外部设备,Android可以兼容各类设备并支持各种类型的感应器,例如键盘,光学传感器、压力传感器等。

  以上核心功能将Android打造成了一个开放的平台,可以运行在各种设备上,因为可以兼容不同的硬件、屏幕尺寸、外设等等,针对不同的设备环境,分别定制统一界面的资源文件放入特定的资源目录,这样就可以在运行时寻找最符合当前设备的资源文件。Android在高度组件化下的各个应用只有明确的组件边界,而不再有明确的进程边界和应用边界,应用的一个功能是很多应用的若干组件共同完成。

  2.2 iOS

  iOS是由苹果公司开发的移动操作系统。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad上。iOS与苹果的macOS操作系统一样,属于类Unix的商业操作系统。原本这个系统名为iPhone OS,因为iPad,iPhone,iPod touch都使用iPhone OS,所以2010年WWDC大会上宣布改名为iOS。

  图2.1 iOS进化史

  iOS实际上是Darwin的ARM变体,源自BSD,类UNIX内核,以及Apple自己的Mach内核扩展系统。这与Linux是完全不同的,Linux是一个单片内核,这意味着所有驱动程序代码和I/O工具包都是核心内核的一部分。

  图2.2 iOS的架构

  ·UI层:主要有SpringBoard、Spotlight等UI交互界面

  ·应用框架层:主要有Cocoa Touch

  ·核心框架层:主要有OpenGL、Quartz等图形、多媒体组件

  ·Darwin:操作系统核心,包括XNU内核和UNIX shell

  进程调度,进程是独立运行、独立分配资源和独立接受调度的基本单位。进程有三个基本状态:

  ·就绪状态,当分配到除CPU以外的所有必须资源后,只要获得CPU,便可立即执行,此时进程的状态为就绪状态。系统中处于就绪状态的进程通常由多个,将这些进程存入一个队列中,称为就绪队列。

  ·执行状态,进程已获得CPU,其程序正在执行。

  ·睡眠状态(阻塞状态),正在执行的进程由于某些事件暂时无法继续执行,便放弃CPU占用转入暂停。阻塞状态的进程也会排入队列中,现代操作系统会根据阻塞原因的不同将处于阻塞状态的进程排入多个队列。导致阻塞的事件有:请求I/O,申请缓冲空间。

  图2.3 iOS进程生命周期

  在iOS的内存管理中包含,内存分配、BSD内存管理、Mach虚拟内存virtual memory,VM是Darwin系统内存管理的核心机制,并且VM系统是Mach中最重要最复杂而且最不好理解的子系统。

  操作系统管理所有的硬件资源,操作系统内核管理最核心的资源CPU和内存。以上阐述了Mach通过进程调度机制管理CPU资源以及VM机制管理内存资源。内核的一个重要内容是管理数据,这些数据包括用户数据和系统数据。

  2.3 Nightly Build

  微信小程序开发工具,选择其中的开发版Nightly Build,日常构建版本,用于尽快修复缺陷和敏捷上线小的特性;开发自测验证,稳定性欠佳,可在Windows 64、Windows 32、macOS进行开发调试。小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。小程序并非凭空冒出来的一个概念。当微信中的WebView逐渐成为移动Web的一个重要入口时,微信就有相关的JS API了。小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。小程序开发框架的核心是一个响应的数据绑定系统[11]。整个小程序框架系统分为两部分:逻辑层(App Service)和视图层(View)。小程序提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。每一个单独的页面基本上由4种文件构成,即wxml、wxss、js和json[2]。

  图2.4小程序的通信模型

  2.4墨刀

  墨刀作为一款专业、可靠、简洁、易懂的在线原型设计与协作平台。拥有原型编辑、交互制作、团队协同、连接分享、设计标注功能。通过墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理。

  2.5 WebStorm

  WebStorm是jetbrains公司旗下一款JavaScript开发工具。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。功能包括:

  JavaScript

  ·基于DOM,特定浏览器完成

  ·编码导航和用法查询

  ·支持ECMAScript

  ·支持CoffeeScript

  ·支持结点

  ·JavaScript重构

  ·JavaScript单元测试

  ·代码检测和快速修复

  ·JSLint/JSHint

  ·基于Mozilla的JavaScript调试器

  其他用途

  ·批量代码分析

  ·编码语言混合或内混

  ·拼写检查器

  ·重复代码检测器

  编辑语言

  ·支持HTML5

  ·css/js

  ·检验和快速修复

  ·Zen编码

  ·显示内容

  ·显示应用的风格

  便捷的环境

  ·HTML5样本文件和其他Web应用程序模板

  ·FTP和远程文件同步

  ·集成了版本控制系统

  ·本地记录

  其中优势功能如下:

  智能的代码补全

  支持不同浏览器的提示,还包括所有用户自定义的函数(项目中)

  代码补全包含了所有流行的库,比如:JQuery,YUI,Dojo,Prototype,Mootools and Bindows。

  代码格式化

  代码不仅可以格式化,而且所有规则都可以自己来定义

  Html智能提示

  联想查询

  只需要按着Ctrl键点击函数或者变量等,就能直接跳转到定义;可以全项目查找函数或者变量,还可以查找使用并高亮。

  代码重构

  这个操作有些像Resharper,熟悉Resharper的用户应该上手很快,支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。

  代码检查和快速修复

  可以快速找到代码中的错误或者需要优化的地方,并给出修改意见,快速修复。

  代码调试

  支持代码调试,界面和IDEA相似,非常方便。

  代码结构浏览

  可以快速浏览和定位

  代码折叠

  功能虽小,不过胜在方便高效

  包裹或者去掉外围代码

  自动提示包裹或者去掉外围代码,一键搞定

  智能的编辑器,充分利用现代JavaScript生态系统的强大功能,享受智能代码补全、动态错误检测,强大的JavaScript、TypeScript导航和重构,样式表语言,以及所有最流行的框架。

  调试器,在IDE中轻松调试客户端和Node.js应用–在源码中放置断点,探索调用堆栈和变量,设置监视,以及使用交互式控制台。

  无缝工具集成,充分利用与IDE深度集成的Linter、生成工具、测试运行器、REST客户端和其他工具。所需终端,也已集成在IDE的工具窗口中。

  单元测试,在WebStorm中使用Karma、Mocha、Protractor和Jest运行调试和测试。立即在编辑器中或在方便的树形视图中查看测试状态,可以从树形视图中快速跳到测试。

  2.6 Bmob

  国内首家专注于移动应用Serverless云服务的平台,Bmob后端云让移动开发更简单,全方位一体化的后端服务平台。使用Bomb几乎能免去所有服务器端编码工作量。

  轻松搭建应用数据库,支持可视化操作,提供可视化的云端数据表设计界面,轻松建库建表。支持10种不同数据类型存储:如字符串,整型,数组等。支持各种文件上传和存储,CDN加速更快更稳定,文件服务可以存储图片、视频、音频、文档等信息。通过提供的API接口和多语言SDK,为用户提供快速上传、安全可靠的数据存储服务。配合CDN加速服务提高文件访问的响应速度与可用性,实现用户全站加速更快捷。可在线编写和调试代码,让逻辑实现更加灵活容易,在开发者管理后台创建云函数,通过编写JavaScript或者Java代码,并部署到Bmob后端云的平台上,可轻松实现业务的需求。使用云函数代码片段,更新维护变得更加便捷。定时任务,以一定间隔自动完成指定动作,定时任务就相当一个定时器,以一定的间隔时间完成指定的任务处理。配合云函数,能实现更多更复杂的工作。自定义应用站点,打造属于自己的应用宣传网站。在这里可以自定义域名地址、选择网站页面模版、添加应用描述、上传最新安装包等,此外还有详细的页面数据分析报告,使推广更吸引流量。与微信的合作上,Bmob有专属的配置窗口。在Bmob后端云有个微信小程序帐号服务配置,需要准确填写小程序的AppID和AppSecret[12]。

  针对移动应用开发的特性,Bmob还提供了主动推送服务。可以让移动开发者将信息从服务器直接推送到应用程序中,从而实现软件的主动更新、信息通知等服务。Bmob云存储服务平台除在服务器部署上的安全处理之外,采用了多租户的虚拟隔离模式,即任何一个开发者的流量变化或者数据变化,均不会对其他开发者的应用带来影响。Bmob为小程序开发提供一体化的后端云服务,大幅度提高开发效率,减少研发时间和成本,使后台开发工作变得更加简单[2]。

  2.7 Git版本控制

  Git是一个开源的分布式版本控制系统,可以有效、高速地处理不同规模的项目版本管理。Git是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。Git易于学习,占地面积小,具有闪电般的快速性能,Git的优势大部分操作尽可能添加数据而不是删除或修改数据、分支操作非常快捷流畅、与Linux命令全面兼容。它具有Subversion,CVS,Perforce和ClearCase之类的SCM工具,具有廉价的本地分支,方便的暂存区域和多个工作流等功能。

  2.8本章小结

  本章主要介绍了小程序会用到的操作系统、开发工具以及版本控制系统。主要阐释了Android、iOS操作系统的发展由来和主要功能,原型设计平台,以及开发小程序用到的前端开发工具的优点和后端云服务,和最后的Git版本控制系统。

  3需求分析

  需求分析也称为软件需求分析、系统需求分析或需求分析工程,是开发人员经过深入细致的调研和分析,准确理解用户和项目的功能、性能、可靠性等具体要求,将用户非形式的需求表述转化为完整的需求定义,从而确定系统必须做什么的过程。

  需求分析是软件计划阶段的重要活动,也是软件生存周期中的一个重要环节,该阶段分析系统在功能上需要“实现什么”。此外,软件的一些非功能性需求(如软件性能、可靠性、响应时间、可扩展性等),软件设计的约束条件,运行时与其他软件的关系等也是软件需求分析的目标。

  3.1可行性分析

  可行性研究的主要目的是用极少的代价在最短的时间决定被开发的软件是否能开发成功。

  3.1.1技术可行性分析。

  从问题定义规格说明书提出的系统功能、性能以及实际系统的各种约束来分析,确定当前的技术及条件是否能实现整个系统。低频、非刚需、轻量级、功能单一,且不需要调动太多系统级能力的应用似乎更适合做微信小程序[6]。

  微信发展到现在Android、iOS已经很好的适配,在这个平台开发推出小程序,避免了适配的问题,在微信官方提供的小程序开发工具和文档说明,以及webstorm开发者工具、Bmob后端云服务的支持下,在小程序的开发技术上是支持的。

  3.1.2运行可行性分析。

  微信提供多种开发版本工具并不断更新,同时提供文档支撑,微信小程序开发者社区讨论解决问题,Android、iOS与微信已经适配良好,webstorm、Bmob也已经非常的成熟,可以为小程序的前端开发、后端云服务提供稳定的支持。

  3.2功能需求分析

  小程序设计开发一款基于微信的旅游分享和购物的平台。微信小程序目前提供的API可分为八大类:网络API、多媒体API、文件API、数据存储API、位置API、设备API、界面API、开放接口,这些API可以实现各种各样复杂的原声功能[7]。

  图3.1小程序用例图

  3.2.1前端和后端功能图

  用户从进入小程序开始,可以进行的浏览图片、短视频,发布视频,商品购买,和个人信息管理等一系列操作。

  图3.2用户功能图

  展示出用户分享、商品列表、我的三大功能模块。延伸出来的需求小程序将着力完成,也是本平台的主要功能。

  小程序以旅行分享和购物为主,按照项目主要有以下功能分块:

  (1)分享模块

  (2)列表模块

  (3)我的模块

  图3.3后端功能图

  3.2.2分享模块

  分享模块主要分为图片界面、短视频界面两大部分。图片界面有轮播图、最新最热和发布自己的视频,发布视频同时包括标题和内容介绍。短视频界面则含有点赞、评论、转发的功能提供给用户。

  3.2.3列表模块

  列表模块对商品进行分类,用户点击感兴趣类别,可获得相关商品的图片展示、名称、价格。在我的中授权登录后,可直接点击购买商品。

  3.2.4我的模块

  点击我的模块,授权微信登录,依次出现微信的用户头像、用户名称基本信息。微信小程序借用API函数算法在微信平台上线,利用微信的用户群,直接达到不用下载无需注册直接使用的效果[4]。我的钱包有固定充值额和手动充值额两种充值选择。我的订单分为暂无订单、我的订单两种,我的订单展开有商品的购买时间、商品名称、商品图片、商品价格。我的喜欢会出现用户在点赞的短视频,同时附有相关的标题、介绍、视频内容。我的消息分为未读和已读,未读消息有红点提示、用户头像、用户名称、消息标题展示,已读有用户头像、用户名称、消息标题,点击消息标题可以看到消息的内容和消息时间。我的发布为分享模块中图片界面里用户发布的视频展示,暂无发布和我的发布两种展示,我的发布包含标题、视频、内容、删除功能。联系我们为各种社交联系方式的展示。设置中可以增删收货地址。

  3.3本章小结

  第三章主要介绍了软件需求分析,在功能性需求上从用户角度,分享模块、列表模块、我的模块三部分的功能需求进行详细的阐述。非功能性需求则从可行性方面,主要对技术可行性、运行可行性方面进行分析。

  4系统设计

  本章承接第三章的小程序设计的具体功能性需求,设计出符合实际的设计分析,以小程序前台的搭建,和后端云服务的数据库设计。主要对分享模块、列表模块、我的模块做主要设计展示。

  4.1小程序总体设计

  小程序的结构由两部分组成,主体部分+各个页面。其中主体部分用于核心的配置,各个页面主要用于不同业务。小程序页面设计基本上也是遵循MVC结构进行构建。主体部分主要由3个文件构成

  (1)app.js:小程序逻辑,初始化APP

  (2)app.json:小程序配置,比如导航、窗口、页面http请求跳转等

  (3)app.wxss:公共样式配置

  各个页面部分由4个文件构成

  (1)js:页面逻辑,相当于控制层(C);也包括部分的数据(M)

  (2)wxml:页面结构展示,相当于视图层(V)

  (3)wxss:页面样式表,纯前端,用于辅助wxml展示

  (4)json:页面配置,配置一些页面展示的数据,充当部分的模型(M)

  小程序采用Bmob云端数据库提供服务,Bmob在软件架构层面提供了传输层面、应用层次、表层次、ACL(Access Control List:访问控制列表)、角色管理(Role)、发布层次等不同粒度的权限控制的方式,确保用户数据的安全。作为一个可以开发云存储的移动应用软件,给应用软件快速添加一个安全灵活的后台管理系统,方便浏览终端保存的各种信息。

  图4.1我的功能顺序图

  图4.2小程序的双线程模型

  4.2小程序总体架构设计

  图4.3系统框架图

  4.3功能设计

  4.3.1分享功能设计

  分享模块的功能主要分为图片分享界面和短视频分享界面,图片分享界面功能主要为轮播图,用户发布视频并包含标题和内容介绍,最新、最热图片分类。短视频分享界面功能有对已分享的短视频进行点赞、评论、转发操作。

  在分享功能中,除了主观性发布视频和对视频进行操作外,是不需要登录授权,游客身份即可使用。

  图4.4分享功能流程图

  User有objectId、username、password、score、status、logo、role、userID、sex、email等属性,同时提供add、update、delete、query的调用方法。

  图4.5用户类图

  Picture接口定义了title、userId、banner、top、status、tap_count属性,调用addPicture、deletePicture、queryPicture方法,实现图片的最新最热排序,以及浏览量的显示。

  Video接口定义了introduce、productions、调用了Picture中的title属性,使视频对应在图片里。

  图4.6图片类图图4.7视频类图

  4.3.2商品列表设计

  在图4.2中,商品列表是三大功能模块之一,用户在进入小程序后可直接选择商品浏览,对不同分类的商品的品名、图片、价格进行挑选,如果需要购买,则要在我的中通过微信授权,实现点击直接购买的清爽操作。没有购买需求可以直接退出。订单管理需要到我的模块里我的订单进行查询,商品列表主要提供商品的浏览和购买。

  图4.8浏览商品流程图

  Commodity包括有objectId、type、title、price、icon等关键属性,并有它们的addCommodity、deleteCommodity、queryCommodity方法。

  图4.9商品类图

  4.3.3我的模块设计

  我的模块对整个小程序的功能起到归纳总结作用,例如图片中发布视频、短视频中的点赞,商品列表的订单信息都可以从我的模块找到关联信息,同时还新增的功能显示,用户头像和名称是微信的信息。我的钱包用于商品列表的购买商品,并且有固定充值和灵活充值两种选择。我的消息用于接收和发送,已读未读分开管理,并有小红点提示。联系我们则会显示各种途经的联系方式。设置可以增加和删除收货地址。

  4.4数据库设计

  采用Bmob云端数据库,为移动应用提供了一个完整的后端解决方案,Bmob提供轻量级的SDK开发包,让开发者以最小的配置和最简单的方式使用Bmob平台提供的服务,进而完全消除开发者编写服务器代码以及维护服务器的操作。

  4.4.1 Bmob云数据库之短视频设计

  用户进入小程序后,在首页分享界面中不同分类的图片,点击进入后会有对应类别的视频及介绍,用户可以对视频进行点赞、评论、转发的操作。点赞表中objectIdString、videoPointer、titlePointer、introductPointer、productionsPointer等属性,其中objectIdString属性为序列号,随机生成。titlePointer为视频标题,introductPointer为视频介绍,productionsPointer为视频链接。评论表中fromUserPointer<_User>表示对应<_User>表中用户的发出的评论。

  图4.10短视频E-R图

  表4.1点赞表

  objectIdString videoPointer titlePointer introductPointer productionsPointer

  6f0f56f614 cn5Cbbbn吴冠中拉手手null

  e2e16963d0 eba23eb4ae来看天空高空云层null

  c762642373 4e64484e45 3.28居家抗疫null

  86877bb654 Fpev1001 11.29山谷草原null

  表4.2评论表

  objectIdString messageString fromUserPointer<_User>

  d2640185b2 1886年可口可乐af60e028fa

  e067f74cb3第三方对方打af60e028fa

  4340c01a8a在哪个省?af60e028fa

  cdb2b456a3天气不错,来看天空啊af60e028fa

  bc41af424a吴冠中诞辰100周年af60e028fa

  4.4.2 Bmob云数据库之商品列表设计

  商品表用于展示商品的信息,如随机生成的objectIdString、typePointer<gift_type>、titleString、priceNumber、iconString,其中typePointer<gift_type>代表商品的类型。

  图4.12商品E-R图

  表4.3商品表

  objectIdString typePointer<gift_type>titleString priceNumber iconString

  FSx0888S kLsv777B书刊2 null

  f1ql555Y rlWC999F小吃3 null

  ce51e7b9d2 u8ERFFFU探险5 null

  50ObBBBQ adCo333E衣服6 null

  X2FrHHHO qPtDBBBY视频1 null

  4.4.3 Bmob数据库之充值设计

  我的功能里充值功能分为两部分,一为手动充值,二是固定额充值,objectIdString、usernameString、passwordString、scoreNumber、logoString属性,其中objectIdString为自动生成,scoreNumber为用户的账户余额。

  图4.13我的充值功能E-R图

  表4.4用户充值表

  objectIdString usernameString passwordString scoreNumber logoString

  PcptAAAG晶晶******null null

  UG8s000X crystal******null null

  YNMP111G admin******null null

  af60e028fa张晶******null null

  4.5本章小结

  第四章中前文介绍小程序的关键性文件负责的功能,小程序的总体设计和架构,根据用户使用需求设计出不同功能,绘出图表详细研究需要实现的功能。对小程序使用的Bmob数据库,模拟出用户会涉及到的图表,构建较为完善的数据库设计。

  5具体实现及系统测试

  5.1分享模块

  进入小程序为如图5.1分享模块界面,依次为小程序名称、轮播图、最新、最热模块,下面是详细分类,详细分类含有名称、时间、发布者、浏览人次,点击图片右侧倒三角可进入相关视频界面。点击右下方加号可以上传个人视频分享。

  图5.1分享模块

  图5.2最新模块图5.3最热模块

  (1)短视频功能

  点击图片可进入对应短视频类别,下图就是自然类视频的点击效果,首先出现的是类别名,然后框内是对应类别的视频介绍。继续下滑出现视频和点赞、评论、分享的功能。

  滑动屏幕出现对应短视频,用户头像、用户名称,点赞、评论、转发,以及短视频名字。本页面包含许多同类视频,用户可不断下滑,进行浏览。如果需要退出,点击屏幕左上角的箭头即可退出到主界面。

  图5.4短视频介绍图5.6短视频点赞后界面图5.5短视频点赞前界面图5.7评论功能

  图5.8转发功能图5.9发布视频功能

  (2)发布功能

  在主界面的最新最热分类下,图片右下角加号为发布按钮,点击即可选择需要发布的视频,并对视频进行标题命名、内容介绍。用户发布视频需要授权微信登录,此功能将在我的模块进行阐述。

  5.2购物模块

  小程序用户进行微信授权后,可在商品列表分类中选择感兴趣的分类,进入并选择商品购买。

  这里我们选择电子视频类,点击进入后,对应目录里是视频名和对应的产品价格也就是积分。在购买方式上,这个小程序区分其他购买方式上为,点击直接购买,购买过程清爽、快捷。为用户提供一个符合小程序简单快捷体验。

  图5.10商品列表图5.11商品明细--视频

  5.3我的模块

  在我的模块中,用户进入这里首先需要微信授权,同时这也是微信小程序的优点之一。点击授权直接涵盖注册、登录功能,给用户的使用体验更加便捷,过程也更为清爽。

  用户需要首先点击我的,然后会出现图5.7授权界面2,点击允许,则授权成功,直接登录小程序,进入我的模块开始个人信息查询操作。

  图5.12授权界面1图5.13授权界面2

  授权成功后,会出现我的模块的信息与功能目录,依次排列为信息为小程序名称、用户头像、用户名称。功能目录为我的钱包、我的喜欢、我的消息、我的订单、我的发布、联系我们、设置这七项功能。

  我的钱包分为固定充值额、手动充值额两类,满足不同需求,用户充值完成后,可直接在商品列表内选择购买。

  我的喜欢为短视频界面点赞视频,会直接出现在我的喜欢功能键中,等同于收藏功能。

  我的消息为小程序站内消息的互通,分为未读和已读两种显示,未读会在右上角出现小红点,已读则是出现该消息用户的头像、名称、消息标题,点击会进入消息内容和时间的显示。

  我的订单则为用户在商品列表内点击购买的商品显示,会出现商品的购买时间、商品名、商品图片、商品价格,以及删除订单的操作。

  我的发布为用户使用自己账号发布的视频显示,分为暂无发布、我的发布两种,若用户已发布则显示有视频名称、视频、视频介绍,以及删除该短视频的操作。

  联系我们为小程序的各种渠道的联系方式,和社交平台的展示。

  设置里可以增加用户的地址,以便用来收取商品列表下单的实物商品。

  图5.14我的目录图5.15我的钱包

  图5.16我的喜欢图5.17我的消息

  图5.18我的订单图5.19我的发布

  图5.20联系我们图5.21设置

  5.4小程序系统测试

  系统测试是将经过集成测试的软件,作为计算机系统的一个部分,与系统中其他部分结合起来,在实际运行环境下对计算机系统进行的一系列严格有效地测试,以发现软件潜在的问题,保证系统的正常运行。

  (1)分享模块测试

  分享模块测试,主要测试其图片展示,短视频播放是否流畅,用户发布视频功能。测试用例如下表:

  表5.1分享测试表

  项目内容

  测试用例编号T-01

  测试用例名称分享测试

  目的测试分享模块图片、短视频、发布视频功能是否流畅

  测试用例级别功能性测试

  测试流程1、进入小程序查看图片显示

  2、点击图片查看短视频播放

  3、退出短视频

  4、点击图片中发布视频按键

  5、选择需要发布的视频和名称介绍

  6、确认发布

  预期结果1、图片显示出错

  2、图片正常显示

  3、短视频播放出错

  4、短视频正常播放

  5、发布视频出错

  6、发布视频成功

  结论通过

  表5.2短视频测试表

  项目内容

  测试用例编号T-02

  测试用例名称短视频测试

  目的测试短视频点赞、评论、转发功能是否流畅

  测试用例级别功能性测试

  测试流程1、进入小程序查看图片显示

  2、点击图片查看短视频播放

  3、点击点赞

  4、点击评论

  5、点击转发

  6、退出短视频

  预期结果1、图片显示出错

  2、图片正常显示

  3、短视频播放出错

  4、短视频正常播放

  5、点赞成功

  6、评论成功

  7、转发成功

  结论通过

  (2)商品列表测试

  商品列表测试目的主要为商品分类、商品能否正常显示与购买,测试用例如下表所示:

  表5.3商品展示测试用例表

  项目内容

  测试用例编号T-03

  测试用例名称商品展示

  目的测试商品分类与商品显示能否正常进行

  测试用例级别功能性测试

  测试流程1、进入商品列表

  2、查看商品分类图

  3、查看商品明细图

  4、点击左上角返回商品分类主界面

  预期结果1、显示正常

  2、点击跳转正常

  3、返回主界面成功

  结论通过

  表5.4商品购买测试用例表

  项目内容

  测试用例编号T-04

  测试用例名称商品购买

  目的测试商品分类与购买能否正常进行

  测试用例级别功能性测试

  测试流程1、进入商品列表

  2、查看商品分类图

  3、查看商品明细图

  4、点击购买商品

  5、点击左上角返回商品分类主界面

  预期结果1、显示正常

  2、点击跳转正常

  3、购买成功

  4、返回主界面成功

  结论通过

  (3)我的测试

  我的测试在本系统中起到总揽全局的作用,起到呼应效果的功能如下,用户可以通过我的钱包功能充值,然后在商品列表进行购买。我的喜欢对应分享模块用户点赞的短视频并显示。我的订单为用户在商品列表中购买的消费记录。我的发布功能在分享模块出现,并在这里罗列出来。

  我的测试用例如下图所示:

  表5.5我的钱包与订单测试用例表

  项目内容

  测试用例编号T-05

  测试用例名称我的钱包与订单

  目的测试我的钱包与订单功能是否正常运行

  测试用例级别功能性测试

  测试流程1、点击我的钱包进行充值

  2、选择固定额度充值

  3、选择自定义额度充值

  4、点击我的订单查看购买商品信息

  预期结果1、固定额度充值成功

  2、固定额度充值失败

  3、自定义额度充值成功

  4、自定义额度充值失败

  5、暂无订单

  6、订单详情显示

  结论通过

  表5.6我的喜欢测试用例表

  项目内容

  测试用例编号T-06

  测试用例名称我的喜欢

  目的测试我的喜欢功能是否正常运行

  测试用例级别功能性测试

  测试流程1、微信授权登录

  2、点击我的喜欢查看喜欢的短视频

  预期结果1、授权登录成功

  2、授权登录失败

  3、暂无喜欢视频

  4、喜欢视频的显示

  结论通过

  表5.7我的消息测试用例表

  项目内容

  测试用例编号T-07

  测试用例名称我的消息

  目的测试我的消息功能是否正常运行

  测试用例级别功能性测试

  测试流程1、微信授权登录

  2、点击我的消息查看未读消息

  3、点击我的消息查看已读消息

  预期结果1、登录成功

  2、登录失败

  3、未读消息成功接收

  4、未读消息接收失败

  5、已读消息查看成功

  6、已读消息查看失败

  结论通过

  表5.8我的发布测试用例表

  项目内容

  测试用例编号T-08

  测试用例名称我的发布

  目的测试我的发布功能是否正常运行

  测试用例级别功能性测试

  测试流程1、微信授权登录

  2、点击我的发布

  3、查看发布的视频

  预期结果1、登录成功

  2、登录失败

  3、暂无发布视频

  4、发布视频显示

  结论通过

  表5.9我的联系测试用例表

  项目内容

  测试用例编号T-09

  测试用例名称我的联系

  目的测试我的联系功能是否正常运行

  测试用例级别功能性测试

  测试流程1、微信授权登录

  2、点击我的联系

  3、查看联系信息

  预期结果1、登录成功

  2、登录失败

  3、联系信息显示成功

  4、联系信息显示失败

  结论通过

  表5.10我的设置测试用例表

  项目内容

  测试用例编号T-10

  测试用例名称我的设置

  目的测试我的设置功能是否正常运行

  测试用例级别功能性测试

  测试流程1、微信授权登录

  2、点击进入设置增加收货地址

  3、增加用户收货地址

  预期结果1、登录成功

  2、登录失败

  3、成功进入设置

  4、进入设置失败

  5、增加收货地址成功

  6、增加收货地址失败

  结论通过