《微信小程序项目实战》课件-CORE04

keepFit健身音乐专区模块延迟符项目四企业级卓越人才培养（信息类专业集群）目录01学习目标02学习路径03任务描述04任务技能05任务实施06任务总结01学习目标延迟符

学习目标010203了解小程序媒体组件应用范围掌握小程序页面渲染的方式掌握小程序媒体组件学习目标通过实现keepFit健身音乐模块，了解微信小程序媒体组件在音乐专区模块的应用，学习小程序中页面渲染、引入其他样式文件、媒体组件及相关的页面事件的相关知识，掌握小程序中媒体组件的具体应用，具有使用本项目所学知识制作出相关的媒体组件界面。在任务实现过程中：04具有制作出音频、视频界面的能力企业级卓越人才培养（信息类专业集群）02学习路径

学习路径企业级卓越人才培养（信息类专业集群）03任务描述

任务描述企业级卓越人才培养（信息类专业集群）1功能描述2基本框架3情景导入

情境导入常听音乐可以使人消除工作紧张、减轻生活压力，Pierre觉得这也是一种不错的休息放松方式，因此，经团队讨论，为keepFit健身添加了音乐专区。在这里，用户可以选择适合自己健身项目的音乐，一边听音乐，一边做练习。当练习完毕后，也可选择舒缓的音乐进行身心放松。本项目主要通过keepFit健身音乐专区来学习微信小程序的页面渲染与媒体组件。企业级卓越人才培养（信息类专业集群）

功能描述情境入01使用wx:for进行数据的遍历01020304使用audio组件实现音频的播放使用image组件进行图片的展示使用import与include进行模板的引入企业级卓越人才培养（信息类专业集群）

基本框架企业级卓越人才培养（信息类专业集群）

基本框架企业级卓越人才培养（信息类专业集群）04任务技能任务技能页面渲染页面文件引用媒体组件页面事件

任务技能企业级卓越人才培养（信息类专业集群）列表渲染1条件渲染2在组件上可以使用wx:for控制属性对列表进行渲染，wx:for有两种使用方式，分别是：直接使用通过wx:for-item指定数组当前元素的变量名，wx:for-index指定数组当前下标的变量名在微信小程序中使用wx:if来决定是否渲染某个组件，若要渲染多个组件，可以使用一个标签将这些组件包裹起来并在这个标签上使用wx:if，双大括号中的值为true时表示组件会被渲染，反之则不会。页面渲染企业级卓越人才培养（信息类专业集群）wx:key是用来指定列表中项目的唯一的标识符的，也就是说添加了wx:key属性的列表项会保持自身的特征和状态而不受项目位置变动的影响。wx:key的值以两种形式提供，分别是：字符串*this页面文件引用企业级卓越人才培养（信息类专业集群）建设制造强国12模板相当于一段自己定义的代码片段。定义模板的方法是用template标签将代码片段包裹起来，并在template标签上添加name属性。使用方法是写一个template标签并添加is属性，is属性的值为相对应的模板的name的值import的作用是用来在当前文件调用目标文件的模板include的作用是在当前文件引用目标文件模板之外的内容模板import与include媒体组件延迟符企业级卓越人才培养（信息类专业集群）image1audio2video3image组件用来加载（本地、网络）图片，操作图片并进行展示。image不同于HTML中的img标签，它是对标签，成对出现使用。image组件有多种属性对图片进行操作和展示，其中常通过设置mode属性对图片进行剪裁和缩放audio组件主要用于音频文件的操作，比如播放、暂停等，它是一个对标签，成对出现video组件用来控制视频文件的播放暂停，与HTML中的video元素大体相同，却比HTML中的video元素的属性多出不少，比如增加弹幕列表、触发事件等。12事件由触发这个事件的节点向该节点的父级节点进行传递，从里到外，直到到达该节点的最外层节点结束。冒泡事件有多种事件类型，包括tap、touchmove等，通过“bind”或“catch”与事件类型相结合可以实现元素的事件绑定捕获事件与冒泡事件的事件类型大致相同，捕获事件执行时，只执行当前事件的函数，当前事件以外的不进行执行。页面事件冒泡事件企业级卓越人才培养（信息类专业集群）捕获事件05任务实施输入标题第一步：通过定义class的filter来添加高斯模糊背景图第二步：添加播放页面和列表页面，并设置相应样式第三步：为列表的每一项添加对应的音乐播放事件第四步：添加列表显示与隐藏按钮、播放按钮、上/下一首按钮的点击事件以及音乐播放进度条的滑动事件点击输入说明文字

任务实施企业级卓越人才培养（信息类专业集群）06任务总结任务技能任务实施任务总结任务描述本任务通过学习keepFit健身音乐模块，对微信小程序的媒体组件、页面渲染、如何引入其他样式文件及小程序相关的页面事件具有初步了解，能够通过所学的媒体组件的基本使用及相关的事件作出keepFit健身音乐模块。

任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT教程：/powerpoint/Word教程：/word/Exce