《微信小程序项目实战》课件_CORE03.pptxVIP

keepFit健身训练专区模块项目三企业级卓越人才培养（信息类专业集群）

目录01学习目标02学习路径03任务描述04任务技能05任务实施06任务总结

01学习目标

学习目标010203了解微信小程序制作训练专区的思路掌握小程序数据绑定的流程掌握导航的制作学习目标通过实现KeepFit健身训练专区模块，了解微信小程序将列表和视频完美结合的思路，学习小程序的基本组件、数据绑定、导航等相关知识，掌握数据绑定的流程和应用，具有使用组件和事件实现视频播放和界面跳转的能力。04具有实现视频播放的能力企业级卓越人才培养（信息类专业集群）

02学习路径

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

03任务描述

情境导入在keepFit健身首界面通过点击训练专区，能够跳转到训练专区模块。训练专区主要是为用户提供视频教学的地方，方便用户随时随地进行健身。为了使用户快速找到适合自己健身项目，研发团队设计了导航界面，将每类健身项目通过图片与文字方式用列表的形式展现，且每类健身项目还划分为基础、中级、高级的健身学习模式，并以小节的形式进行视频学习。本项目主要通过keepFit健身训练专区来学习微信小程序的导航与样式。企业级卓越人才培养（信息类专业集群）

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

功能描述情境入01使用小程序图标丰富小程序页用video组件实现视频的播放使用navigator和导航事件进行页面的跳转使用“@import路径;”进行样式的导入企业级卓越人才培养（信息类专业集群）

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

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

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

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

04任务技能

任务技能基础内容组件数据绑定导航样式任务技能企业级卓越人才培养（信息类专业集群）

icon（图标）1text（文本）2progress（进度条）3当开发者想在页面中添加一些小图标时，可通过微信小程序自带的icon组件进行添加。在使用icon图标时可以设置图标的类型、大小和颜色。text组件用于向视图中添加文本，并可使用不同属性实现对文本的控制，包括文字是否允许被选中，是否解码等。基础内容组件progress组件主要是在视图中添加一个进度条，用于显示一项任务的完成进度.在开发过程中进度条可以通过其自身的属性改变自己的样式。企业级卓越人才培养（信息类专业集群）

数据绑定企业级卓越人才培养（信息类专业集群）微信小程序为了减小代码的冗余程度和操作的不便，通过单向数据流的状态模式直接实现了从对象到视图的更新，从而不需要手动管理对象和视图的一致性。数据绑定

建设制造强国12navigator是导航组件，类似于HTML代码中的a标签，用来链接页面并进行页面的跳转。导航navigator导航事件企业级卓越人才培养（信息类专业集群）导航事件的作用跟导航组件相同，都是用来连接界面并进行页面之间的跳转，但导航事件必须写在.js文件中并嵌入在事件函数内被使用。

尺寸单位1导入样式2小程序为了适应前端开发人员，在css尺寸单位的基础上扩充了新的尺寸单位rpx，使用rpx可以进行屏幕宽度的自适应。样式延迟符企业级卓越人才培养（信息类专业集群）微信小程序导入wxss样式文件的方式为通过“@import路径;”在wxss文件中进行导入

选择器3样式要想对元素的样式进行一些修饰，首先需要找到该目标元素，在wxss中，执行这一任务的样式规格部分被称为选择器。与css相比，wxss支持的选择器如下表所示：企业级卓越人才培养（信息类专业集群）选择器描述class类选择器，可以多次使用，使用方法：.class{}idid选择器，不可以重复，使用方法：#id{}element标签选择器，使用方式：标签{}Element，element群组选择器，使用方式：标签,标签{}::after在元素之后插入::before在元素之前插入

05任务实施延迟符

输入标题输入标题输入标题第一步：通过wx:for从js中进行数据的遍历。第二步：对文字和图片内容进行添加第三步：设置文字样式，包括文字内容不换行和超出部分省略第四步：设置图片区域view标签的多边形样式点击输入说明文字点击输入说明文字点击输入说明文字任务实施企业