下载文档原格式
第7章综合案例：仿糗事百科微信小程序教学过程7.1需求描述仿糗事百科微信小程序主要完成以下功能。
（1）实现顶部页签菜单左右滑动效果，如图所示。
顶部页签（2）实现顶部页签菜单切换效果，页签菜单选中时字体加粗，同时对应的内容也相应变化。
专享界面视频界面（3）实现专享界面糗事列表设计，包括发布人头像、发布人昵称、发布的段子等信息，以列表的形式展现出来。
（4）实现视频列表页设计，使视频可以进行播放与暂停。
（5）实现分享功能，可以将当前界面分享给好友。
分享页面7.2设计思路及相关知识点7.2.1设计思路（1）实现顶部页签滑动效果，需要借助于scroll-view可滚动视图区域组件，设置scroll-x="true"属性，允许顶部页签在水平方向上左右滑动；（2）页签菜单切换，内容也会随着进行切换，需要使用swiper滑块视图容器组件，根据current 当前页面索引值来决定显示哪个面板；（3）设计糗事列表，首先设计一条内容，然后复制这条内容的布局，在这个基础上进行修改；（4）设计视频列表，需要使用video视频组件，每个视频组件都有唯一的id；设计幻灯片轮播效果，准备好幻灯片需要轮播的图片；（5）分享功能，需要在Page中定义onShareAppMessage函数，设置该页面的分享信息。
7.2.2相关知识点（1）在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、image图片组件、swiper滑块视图容器组件、scroll-view可滚动视图区域组件、video视频组件等组件的使用；（2）界面样式设计中，需要使用wxss样式进行界面的美化和渲染；（3）页签菜单切换的时候，需要获得该页签所对应的id，绑定菜单切换事件；（4）设计页面分享时，需要使用onShareAppMessage这个API接口，来进行分享；（5）动态获取糗事列表信息，需要使用wx.request请求获得。
中文摘要近几年软件开发都不断往小程序发展，人们日益增长的美好生活需求与对手机APP应用方面的需求不断增长，微信小程序因其开发难度低，所占内存少，开发规模小，开发门槛低，日益成为今日互联网APP软件开发的主流，软件测试方向也渐渐往微信小程序伸展。
本课题主要内容是以微信小程序测试的设计与分析为主，将仿网易严选商城（带后台管理系统）这一小程序进行测试的设计作为实例，进行相应的测试计划以及分析，结合不同的测试工具为辅，设计一份较为完整的，具有针对性的微信小程序测试的方法，并对该测试方法进行实施以及分析。
将测试的计划和方法贯彻于整个测试流程，侧重于对其测试方法作不一样的侧重点安排以及分析，并对此与一般的软件测试方法与测试计划进行比较，关注它的不同点。
关键词：微信小程序测试方法测试计划AbstractSoftware development are constantly to wechat mini programme in recent years,people’s growing demand for better life and a growing demand for mobile phone APPlication,wechat mini programme beause of its low development level,take up less money and development of small scale,low threshold of development has increasingly become the mainstream of today’s Internet APP software development,software testing direction slowly toward wechat mini programmes.This topic mainly content to wechat mini programme testing design and analysis is given priority to,in imitation of wangyiyanxuan mall(with background management system)test design as the instance,this program to write the corresponding test plan and analysis,combined with different test tools is complementary,write a relatively complete targeted for wechat mini programme test oriented analysis method to plan and implement,to carry out in the whole testing process plan and arrangement.Focus on the arrangement and analysis of its test methods and focuses,and compare it with the general software test methods and test plans which focusing on its differences.Key words: wechat mini programme testing method testing plan目录第一章绪论 (4)1.1课题研究背景 (4)1.2课题研究目的与意义 (4)1.3国内外研究现状 (4)1.4本课题研究 (5)1.5本章小结 (5)第二章小程序内部架构与测试环境部署 (5)2.1小程序的内部分解与认识 (5)2.1.1小程序的内部架构研究 (5)2.1.2小程序的内部结构研究 (7)2.2微信小程序测试环境部署 (8)2.2.1获取测试权限 (8)2.2.2构建测试环境 (10)2.3本章小结 (11)第三章基于微信小程序的测试需求分析与测试计划 (11)3.1小程序测试策略 (11)3.1.1测试策略分析 (12)3.1.2微信小程序测试版本分析 (14)3.2小程序测试进度计划 (14)3.3小程序测试方法分析 (17)3.3.1功能测试 (17)3.3.2用户界面测试 (17)3.3.3权限测试 (17)3.3.4兼容性测试 (18)3.3.5性能测试 (18)3.3.6网络测试 (19)3.4本章小结 (19)第四章基于微信小程序的测试设计与分析 (19)4.1测试用例设计与分析 (19)4.1.1功能测试用例分析 (19)4.1.2性能测试用例分析 (21)4.1.3兼容性测试用例分析 (22)4.1.4用户界面测试用例分析 (23)4.1.5权限测试用例分析 (24)4.1.6网络测试用例分析 (25)4.2本章小结 (25)第五章基于微信小程序的测试实施与分析 (25)5.1测试实施 (25)5.1.1功能测试 (26)5.1.2性能测试 (28)5.1.3兼容性测试 (31)5.1.4用户界面测试 (32)5.1.5用户权限测试 (33)5.1.6网络测试 (33)5.2测试结果分析 (34)5.2.1Bug报告结果分析 (34)5.2.2测试缺陷分析 (35)5.3本章小结 (35)第六章总结与展望 (36)6.1总结 (36)6.2后续研究展望 (36)6.3本章小结 (36)参考文献 (36)图表目录图 1小程序框架图 (6)图 2基本的小程序内部结构 (7)图 3框架程序的主体部分 (8)图 4框架页面的组成文件 (8)图 5登陆微信公众平台 (9)图 6微信公众平台用户身份授权 (9)图 7 添加开发者权限 (10)图 8下载微信开发者工具 (10)图 9导入前台代码 (11)图 10导入后台代码 (11)图 11 小程序关键测试点 (12)图 12性能测试参数值位置 (14)图 13首页功能测试用例 (19)图 14购物车功能测试用例 (20)图 15分类功能测试用例 (20)图 16导航栏页面功能测试 (21)图 17测试用例 (21)图 18兼容性测试用例 (22)图 19用户界面测试用例 (23)图 20权限测试用例 (24)图 21网络测试用例 (25)图 22进入调试和设置显示性能窗口 (29)图 23性能窗口直接调出 (29)图 24添加小程序的测试事务 (30)图 25根据链接连接小程序 (30)图 26设置基本的并发用户和压力测试持续的时间 (30)图 27启动测试任务，选择所需要的资源 (31)图 28基本的性能指标 (31)图 29资源使用变化 (31)图 30响应的时延数据报告 (31)图 31测试报告分析 (34)图 32 小程序和APP的不同点 (35)表 1总体测试进度安排 (14)表 2功能测试进度安排 (15)表 3用户界面测试工作进度安排 (15)表 4权限测试工作进度安排 (15)表 5 兼容性测试进度安排 (16)表 6性能测试工作进度安排 (16)表 7网络测试进度安排 (16)表 8功能测试计划 (17)表 9用户界面测试计划 (17)表 10权限测试计划 (17)表 11兼容性测试计划 (18)表 12性能测试计划 (18)表 13网络测试计划 (19)表 14 首页功能测试结果 (26)表 15领红包功能测试结果 (26)表 16分类功能测试结果 (26)表 17购物车功能测试结果 (27)表 18个人功能测试结果 (27)表 19搜索功能测试结果 (28)表 20兼容性测试结果 (31)表 21界面测试结果 (32)表 22用户权限测试结果 (33)表 23网络测试结果 (33)表 24 Bug报告 (34)第一章绪论1.1课题研究背景近几年软件开发都不断往小程序发展，如今也成为了各大平台战略布局的竞争手段。
小程序操作流程图的制作方法在开发小程序过程中，操作流程图是一种非常有效的工具，可以帮助开发者更好地理解和设计小程序的功能流程。
本文将介绍小程序操作流程图的制作方法，希望能为开发者提供一些帮助。
1. 准备工作在开始制作小程序操作流程图之前，需要明确以下几个要点：•主题: 确定流程图的主题，例如登录流程、购物流程等。
•流程步骤: 确定流程图中的每个步骤，并按照顺序排列。
•符号: 选择使用的符号，例如开始/结束符号、判断符号、连接线等。
可以根据需要使用不同颜色来表示不同的功能模块。
2. 使用工具制作小程序操作流程图可以使用多种工具，如Microsoft Visio、Lucidchart和draw.io等。
这些工具都提供了丰富的符号库和绘图工具，方便绘制流程图。
以下是使用draw.io为例的流程图制作方法：2.1 安装draw.io首先，需要访问draw.io的官方网站，然后根据网站提示进行下载和安装。
安装完成后，可以打开draw.io开始制作流程图。
2.2 绘制流程图打开draw.io后，可以看到一个空白画布。
可以从左侧的“流程图”部分选择需要的符号，例如开始符号、结束符号和判断符号等。
将这些符号拖动到画布上，按照流程步骤的顺序排列。
在连接符号之间，可以使用连接线将它们连接起来。
可以使用“直线”工具或“曲线”工具绘制连接线，并使用箭头来表示流程的方向。
2.3 添加文本和描述在绘制流程图的过程中，可以为每个符号添加文本和描述，以便更清晰地表达流程步骤。
可以双击符号或者通过右键菜单选择“编辑文本”来添加文本。
2.4 美化流程图绘制完成后，可以对流程图进行美化和调整，使其更加清晰和易读。
可以调整符号的大小和位置，修改文本的字体和颜色等。
还可以使用不同的线条和填充颜色来区分不同模块。
3. 导出流程图完成流程图的制作后，可以导出为常见的图片格式，如PNG、JPEG等，以便在文档、PPT或网页中使用。
draw.io提供了“导出”功能，允许将流程图导出为图片文件。
![微信小程序培训课完整版PPT讲稿思维导图知识点归纳总结[PPT白板课件]](https://img.taocdn.com/s1/m/dc68eaa4910ef12d2bf9e740.png)
第1章认识微信小程序教学过程1.1微信小程序介绍1.1.1初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。
（1）在微信中的“发现”界面，可以找到小程序的入口，如图所示。
微信小程序入口（2）在微信主界面下拉，会看到用过的微信小程序。
（3）给好友或者在群里分享小程序。
小程序的界面和使用方法和App类似，下图所示是几个已发布的常用小程序界面。
常用微信小程序界面1.1.2微信小程序的功能（1）分享页功能。
（2）分享对话功能。
（3）线下扫码进入微信小程序功能。
（4）挂起状态功能。
（5）消息通知功能。
（6）实时音视频录制播放功能。
（7）硬件连接功能。
（8）小游戏功能。
（9）公众号关联功能。
（10）搜索查找功能。
（11）识别二维码功能。
1.1.3微信小程序的使用场景在发布小程序的时候，要选择服务类目。
通过这些服务类目，我们能知道小程序的使用场景。
服务类目分为个人服务类目和企业服务类目。
个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。
1.2微信小程序开发准备1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。
另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。
1.2.2开发准备Step1：在“微信公众平台”注册微信开发者账号。
单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。
在微信公众平台中，选择“小程序”→“小程序开发文档”，可以打开帮助文档界面，如图所示。
开发文档帮助文档在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。
代码制作微信小程序怎么弄出来微信小程序是一种轻量级的应用程序，可以在微信中直接使用，为用户提供了便捷的服务和体验。
如果你对编程和开发感兴趣，那么制作一个微信小程序可能是一个不错的选择。
下面将介绍如何通过代码来制作一个简单的微信小程序。
准备工作在制作微信小程序之前，首先需要准备好以下工作：1.微信开发者工具：下载并安装微信开发者工具，这是开发微信小程序的必备工具。
2.微信公众平台账号：注册一个微信公众平台账号，用于发布和管理小程序。
创建小程序步骤一：新建项目在微信开发者工具中点击新建项目，填写小程序名称、AppID等信息，选择一个合适的开发模板。
步骤二：编辑代码微信小程序的代码主要由Json、Wxml、Wxss和JavaScript四部分组成。
在微信开发者工具中，可以编辑这些代码文件来实现小程序的各种功能。
步骤三：预览和调试在开发者工具中点击预览按钮，可以在模拟器中查看小程序的效果，并进行调试修改。
开发小程序功能在创建好小程序的基本结构后，可以通过以下方式为小程序添加功能：1.界面设计：编辑Wxml和Wxss文件，设计小程序的界面布局和样式。
2.交互逻辑：使用JavaScript编写小程序的交互逻辑，实现页面之间的跳转和数据交互。
3.接口调用：通过调用微信提供的接口，实现小程序与微信平台的交互，如获取用户信息、上传图片等功能。
调试和发布在开发过程中，可以通过微信开发者工具进行实时调试和预览小程序的效果。
当小程序开发完成后，可以通过微信公众平台将小程序提交审核并发布上线，供用户使用。
总结通过以上步骤，我们可以初步了解如何通过代码制作微信小程序。
制作小程序需要一定的编程知识和经验，但随着实践的积累和技能的提升，你将能够制作出更加丰富和有趣的微信小程序。
希望以上内容对你在制作微信小程序的过程中有所帮助。
6天课程第一天：1、认识微信小程序基本操作2、微信小程序的基本框架3、小程序样式基础结果：(1)Hello world!(2)猫眼电影底部标签导航第二天：1、如何绑定数据2、如何进行条件渲染3、如何定义和使用模板4、脚本语言：类似javascript结果：仿香哈菜谱微信小程序第三天：组件1、视图容器组件2、基本内容组件3、表单组件4、导航组件结果：表单登录注册功能第四天：必须备API1、请求服务数据的API：连接后台的servlet2、数据缓存API3、交互反馈API案例：仿豆瓣电影微信小程序第五天：登录API第六天：综合案例：仿智行火车票12306的微信小程序第一天内容：帐号设置注意事项：不能将项目类型设置为游戏类，AppID一、开发工具之调试区组成（1）Console:显示错误信息；系统提示信息；显示console.log(‘’)输出的内容。
（2）Source：显示js文件中的代码；进行代码的调试功能（3）NetWork:显示被加载的资源，包括图片等（4）AppData：显示当前页面，js文件中,data里定义成员变量的详细信息（5）Storage:显示当前已存在的缓存数据（6）Wxml:显示的是当前页面的代码二、程序框架（1）框架页面文件：.wxml --->网页文件，相当于html文件.wxss ----> 相当于css文件.js ---->相当于javascript文件.json ----->用于存储json数据微信小程序与HTML最大的不同是，没有DOM操作。
也就没有document.getElementById操作。
bindtap---->相当于click事件,指向触发时需要调用的函数wx.redirectTo({url: '../index/index',})进行页面的跳转！所有的事件都是异步。
离开当前小程序，打开了其他的应用程序，五分钟之后，系统会将小程序从内存中清除。
