微信小程序开发图解案例教程第8章 综合案例：仿中国婚博会微信小程序
《微信小程序开发》第7章教案
第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请求获得。
微信小程序基础ppt课件
色彩搭配与字体选择建议
色彩搭配
色彩搭配应和谐、自然，避免过于刺 眼或混乱的颜色组合。
字体选择
字体选择应清晰易读，避免使用过于 花哨或难以阅读的字体。同时，应根 据内容选择合适的字体大小和样式， 以增强可读性和易用性。
05
微信小程序功能实现 方法与技巧
页面跳转逻辑实现方法介绍
页面路径规划
页面参数传递
基础内容包括文本、图片、图标 等，用于展示基本信息
导航包括navigator和tabBar，用 于页面跳转和底部导航栏
小程序页面由多个组件组成，包 括视图容器、基础内容、导航、 表单、底部tab等
表单包括button、form、input 等，用于收集用户输入和提交数 据
小程序数据绑定与事件处理机制
数据读取方式
使用wx.getStorage、wx.getStorageSync等方法读取存储的数据 。
数据同步问题
注意数据同步问题，确保在多设备或不同环境下数据01
了解微信小程序自定义组件开发流程，包括注册、使用、样式
、事件等。
自定义组件使用场景
02
一致性
设计风格和元素应保持一 致，避免给用户带来混乱 和困惑。
用户体验
设计应注重用户体验，提 供良好的交互和反馈，使 用户能够轻松完成任务。
界面布局与排版技巧分享
布局合理
界面布局应合理，使用户 能够快速找到所需信息。
排版清晰
文字、图片等元素应排版 清晰，避免拥挤和重叠。
图标与文字
图标与文字应清晰易懂， 避免使用过于复杂或难以 理解的图标。
跨平台使用：微信小程序可以在微信平台上使用，也可 以在其他平台上使用。
特点
占用存储空间小：无需下载可快速使用，减少用户手机 存储空间的占用。
小程序开发师的培训ppt主题与课程 (2)
未来，小程序有望成为移动互联网的重要入口，对传统APP形成一定 的替代效应。
小程序的应用场景与优势
总结词：应用领域、竞争优势
小程序在应用场景中具有便捷性、低成本、易于推广等 优势，能够提高用户体验和降低运营成本。
小程序未来发展趋势分析
总结词
分析未来小程序的发展方向和趋势，包括用户体验、功能创新和商业应用等。
详细描述
探讨小程序在用户体验、功能创新和商业应用等方面的未来发展趋势，如AI技术 的融合、虚拟现实与增强现实的应用等。
小程序开发师的未来职业发展路径
总结词
为小程序开发师提供职业发展建议和 方向，包括技术进阶、项目管理、创 业等。
详细描述
为小程序开发师提供职业发展建议， 如技术进阶、项目管理、创业等方面 的指导和建议，帮助他们更好地规划 自己的职业发展路径。
THANKS。
03
小程序采用前端开发技术，如HTML5、CSS3和JavaScript等，可以 快速开发并发布上线。
04
小程序具有丰富的API接口和组件，可以实现多种功能，如支付、位 置、用户信息等。
小程序的发展历程与趋势
01 02 03 04
总结词：发展历程、未来趋势
小程序自2017年上线以来，经历了快速的发展，用户规模和活跃度 不断攀升。
小程序开发师的培训PPT大纲
汇报人：可编辑 2023-12-26
目录
• 小程序开发概述 • 小程序开发基础 • 小程序实战开发 • 小程序优化与发布 • 小程序前沿技术与发展趋势
01
小程序开发概述
小程序的定义与特点
基于微信小程序的测试设计与分析
中文摘要近几年软件开发都不断往小程序发展，人们日益增长的美好生活需求与对手机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教程
5
1．App.js小程序逻辑 App.js文件用来定义全局数据和 函数的使用，它可以指定微信小程序 的生命周期函数。生命周期函数可以 理解为微信小程序自己定义的函数， 如onLaunch（监听小程序初始化）、 onShow（监听小程序显示）、onHide （监听小程序隐藏）等，在不同阶段、 不同场景可以使用不同的生命周期函 数。此外，App.js中还可以定义一些全 局的函数和数据，其他页面引用App.js 文件后就可以直接使用全局函数和数 据，如图所示。
2.1.1
框架全局文件
第2章 微信小程序框架分析
6
2．App.json小程序公共设置 App.json文件可以对5个功能进 行设置：
01
OPTION OPTION
配置页面路径
02 配置窗口表现 03 配置标签导航 04
配置网络超时
OPTION
OPTION
OPTION
05 配置debug模式
第1章 认识微信小程序
18
2.光标相关快捷键
Ctrl+End：移动到文件结尾 Ctrl+Home：移动到文件开头 Ctrl+i：选中当前行
3.界面相关快捷键
Ctrl + \：隐藏侧边栏 Ctrl + m：打开或者隐藏模拟器
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标
部的高度为200px。
微信小程序
开发图解案例教程
T h a n k
y o u ！
第2章
微信小程序框架分析
微信小程序开发图解案例教程（附精讲视频）
目录
contents
1. 微信小程序目录结构介绍
微信小程序培训课完整版PPT讲稿思维导图知识点归纳总结[PPT白板课件]
![微信小程序培训课完整版PPT讲稿思维导图知识点归纳总结[PPT白板课件]](https://img.taocdn.com/s3/m/dc68eaa4910ef12d2bf9e740.png)
样式表属性
布局：clear、float、clip、overflow、overflow-x、overflow-y、display、visibility 定位：position、z-index、top、right、bottom、left 边界：margin、margin-top、mairgin-right、margin-bottom、margin-left 补白：padding、padding-left、padding-right、padding-bottom、padding-left 尺寸：height、max-height、min-height、width、max-width、min-width 背景：background、background-color、background-image、background-repeat 轮廓：outline、outline-color、outline-style、outline-width 列表：list-style、list-style-image、list-style-position、list-style-type 表格：border-collapse、border-spacing 文本：text-indent、text-align、direction、word-wrap、text-jusitify 字体：font、color、font-family、font-size、font-style、font-weight、line-height、letterspacing、word-spacing 滚动条:scrollbar-3dlight-color、scrollbar-shadow-color、scrollbar-base-color、 scrollbar-face-color、scrollbar-track-color
微信小程序开发图解案例教程 第7章 综合案例：仿糗事百科微信小程序
第7章 综合案例：仿糗事百科微信小程序
需求描述 ■ 设计思路及相关知识点 ■ 准备工作 ■ 设计流程 ■ 小结 ■
在糗事百科中可以查看他人发布的糗事并 与网友分享自己亲身经历或听说到的各类生活 糗事，如图7.1、图7.2所示。
图7.1
专享
图7.2
视频
7.1
需求描述
仿糗事百科微信小程序主要完成以下功能。 （1）实现顶部页签菜单左右滑动效果，如图7.3所示。
（3）添加页签菜单单击绑定事件SWITCHNAV，动态地给CURRENTTAB和FLAG 变量赋值。 这样单击不同页签，页签就会呈现为选中效果，如图7.10所示。
图7.10
页签菜单选中效果
（4）页签菜单进行切换时，对应的内容也随着进行切换，切换设计需 要使用SWIPER滑块视图容器组件。进入到PAGES/INDEX/INDEX.WXML文 件里，使用SWIPER进行页签内容布局。 这样单击页签菜单时，不仅菜单标题呈现为选中状态，而且页签 内容也会随着变化，实现了页签菜单和页签内容的联动效果。
这样就可以实现顶部页签左右滑动效果，如图7.9所示。
图7.9
顶部菜单内容
7.4.2 顶部页签菜单切换效果设计
顶部页签菜单可以进行左右切换，但是还没有实现页签菜单切换效果， 单击不同的页签，页签需要呈现为选中状态，同时页签对应的内容也要随 着进行切换。 （1）在页签里设计两种样式，一种是SELECT样式，选中时字体加粗；另 一种是NORMAL样式，字体不加粗。绑定单击事件SWITCHNAV。 （2）进入到PAGES/INDEX/INDEX.JS文件里，定义两个变量：CURRENTTAB 为当前页签的索引值，FLAG变量用来控制样式选择，如果FLAG等于页签对 应的ID，则呈现为选中状态。使用SELECT这个样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8.3 准备工作
（1）我们首先需要准备一个APPID，如果没有APPID也没有关系，只不 过不能在手机上进行项目的预览，但是在开发工具上开发是没有任何问 题的。 （2）底部标签导航，需要有选中图标和默认图标，放置在IMAGES/BAR 文件夹下，如图8.10所示。
图0 底部标签导航图标
（3）需要准备海报轮播的图片，放置在IMAGES/HAIBAO文件夹下，如 图8.11所示。
（3）在WINDOW数组里配置窗口导航背景颜色为红色（#D73E3E）， 导航栏文字为中国婚博会，字体颜色为白色。 （4）在TABBAR对象里配置底部标签导航背景色为灰色（#F3F1EF）， 文字默认颜色为灰色，选中时为红色（#D73E3E），在LIST数组里配 置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。 这样就完成了仿中国婚博会微信小程序的底部标签导航配置，单击 不同的导航，可以切换显示不同的页面，同时导航图标和导航文字 会呈现为选中状态。
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第8章 综合案例：仿中国婚博会微信小程序
需求描述 ■ 设计思路及相关知识点 ■ 准备工作 ■ 设计流程 ■ 小结 ■
参加婚博会需要使用中国婚博会APP进 行索要门票、领签到礼等环节。
由于中国婚博会APP软件使用频率不是 很高，因此完全可以做一个中国婚博会微信 小程序，需要的时候搜索出来使用，它的主 要界面如图8.1～图8.4所示。
（4）在设计全部分类导航的时候，有3块区域内容：玩转婚博会、 特色分类、我的婚博会。由于这3个区域布局方式一样，可以先设 计出一个区域，其余的两个区域直接复制使用即可； （5）现金券界面设计难点在于下拉菜单筛选条件设计，需要把筛 选条件置于页面顶层，在样式里设置Z-INDEX:999就可以将其置于 最顶层； （6）婚博会索票界面是常规的表单界面，需要把表单数据提交给 后台，保存到本地里。
图8.5 首页设计
图8.6 全部分类界面
（3）在现金券界面里，将各个商户的现金券以列表的形式展现出来， 提供全部、默认下拉菜单效果显示，如图8.7所示。
（4）在婚博会界面里，提供索票的界面，填写个人相关信息，可以 进行索票，如图8.8所示。
图8.7 现金券界面
图8.8 免费索票
（5）在填写表单选择获知渠道时， 以弹出窗口的形式提供单选列表， 供用户选择获知婚博会渠道的情况， 如图8.9所示。
图8.9 获知渠道
8.2 设计思路及相关知识点
8.2.1 设计思路
（1）设计底部标签导航时，准备好底部标签导航的图标，并建立 5个相应的页面；设置默认时图片和选中时图片，标签名称采用两 种颜色，红色为选中颜色，灰色为默认颜色； （2）设计幻灯片轮播效果时，准备好幻灯片需要轮播的图片； （3）设计宫格导航的时候，先把宫格导航的图标和导航名称存放 在JS后台里，然后动态循环展现出宫格导航；
（6）在全部分类界面里，特色分类需要用到的一些图标，放置在 IMAGES/TYPE/TSFL文件夹下，如图8.14所示。
图8.14 特色分类图标
（7）在全部分类界面里，我的婚博会需要用到的一些图标，放置在 IMAGES/TYPE/WDHBH文件夹下，如图8.15所示。
图8.15 我的婚博会图标
（8）在现金券界面里，需要用到的一些 图标，放置在IMAGES/CASH文件夹下，如 图8.16所示。 （9）在婚博会索票界面里，需要用到的 一些图片，放置在IMAGES/MARRY文件夹下。
图8.11 海报轮播图片
（4）在首页设计宫格导航的时候需要用到一些图标，放置在 IMAGES/NAV文件夹下，如图8.12所示。
图8.12 宫格导航图标
（5）在全部分类界面里，玩转婚博会需要用到的一些图标，放置在 IMAGES/TYPE/WZHBH文件夹下，如图8.13所示。
图8.13 玩转婚博会图标
8.2.2 相关知识点
（1）在界面布局的时候，会用到微信小程序的组件，包括VIEW视图容 器组件、IMAGE图片组件、SWIPER滑块视图容器组件、ICON图标组件、 FORM表单组件、RADIO单项选择器组件、CHECKBOX多项选择器组件等组 件的使用； （2）界面样式设计，需要写一些WXSS样式进行界面的美化和渲染； （3）将数据缓存到本地，需要调用WX.SETSTORAGESYNC这个API接口， 进行缓存数据； （4）界面跳转需要使用WX.NAVIGATETO这个API接口，进行界面跳转。
图8.1 首页
图8.2 全部分类
图8.3 现金券
图8.4 婚博会
8.1 需求描述
仿中国婚博会微信小程序需要完成以下主要功能： （1）完成底部标签导航设计、首页海报轮播效果设计和宫格导航 设计，如图8.5所示。 （2）在首页里，单击全部分类宫格导航的时候，会进入到全部分 类导航界面，把婚博会相关内容的导航集成到一个界面里，如图 8.6所示。
标签导航选中时导航图标会变为红色图标，导航文字会变为红 色文字，如图8.17所示。
图8.17 底部标签导航选中效果
（1）新建一个HBH项目的微信小程序，将准备好的底部标签导航图标、 海报轮播图片、宫格导航图标、现金券图标、婚博会索票图片放置在HBH 项目下。
（2）打开APP.JSON配置文件，在PAGES数组里添加5个页面路径"PAGES/ INDEX/INDEX""PAGES/CASH/CASH"“PAGES/MARRY/MARRY” “PAGES/ COMMUNITY/COMMUNITY”“PAGES/ME/ME”，保存后会自动生成相应的页 面文件夹；删除“PAGES/LOGS/LOGS”页面路径以及对应的文件夹。
图8.16 现金券图标
8.4 设计流程
我们首先来设计仿中国婚博会微 信小程序底部标签导航、海报轮播效 果、宫格导航，然后设计全部分类导 航界面，再设计现金券下拉菜单筛选 条件以及现金券列表页，最后设计婚 博会索票界面以及获知渠道弹出层。
8.4.1 底部标签导航设计
仿中国婚博会微信小程序，有5个底部标签导航：首页、现金 券、婚博会、社区、我的。