2
scroll-view是滚动视图组件，分为水平滚动和垂直滚动， 可以更多的展示数据，并节约页面的空间。
swiper是轮播图组件，它是由多个容器组成，每个容器之间可以滑动切换， 其代码结构由轮播图容器（< swiper >标签）和轮播图组件（< swiperitem >标签）组成。
05 任务实施
任务实施
微信小程序配置
企业级卓越人才培养（信息类专业集群）
全局配置是针对整个项目进行的配置，可以被本程序所有页面引用。进
行全局配置，需要用到项目中的app.json文件，它决定着页面文件的路
建径设、制窗口表现、设置网络超时时间、设置选项卡页面等。 造强国
全局配置
1
页面配置
2
页面配置是通过配置Pages里面文件夹中的.json文件实现的，其目的是 实现对应页面中的样式。页面配置相对全局配置来说更加容易，主要是 因为页面所对应的.json文件只能配置app.json文件中对应的window项。
企业级卓越人才培养（信息类专业集群）
输入标题
点击输入说明文字
输入标题
点击输入说明文字
第一步：在app.json文件中进行页面和选项卡配置。 第二步：使用<swiper>标签添加轮播图并设置样式 第三步：使用<view>标签对下方列表进行制作并设置对应样式 第四步：为训练专区和音乐专区添加跳转事件
输入标题
微信小程序项目结构 微信小程序配置 小程序生命周期 逻辑层方法 视图展示组件
微信小程序项目结构
企业级卓越人才培养（信息类专业集群）
pages
pages主要存放小程序的页面文件，其包含多个文件夹，每个文件夹为 一个页面，包含四个文件，其中.js是事件交互文件，.json为配置文 件，.wxml是界面文件，用于处理界面的相关事件，.wxss为界面美化 文件。
企业级卓越人才培养（信息类专业集群）
view
1
swiper
3
View 是 视 图 容 器 组 件 ， 用 来 盛 放 展 示 数 据 的 容 器 ， 可 以 将 数 据 呈 现 给 用 户 。 view标签成对出现使用，可以在标签中放入其他组件，也可以使用在其他组件 中，使用简单，没有固定结构。
scrollview
小程序生命周期
企业级卓越人才培养（信息类专业集群）
生命周期指从项目的创建、开始、暂停、唤起、停止和卸载的过程。 小程序的生命有分两方面，分别是应用生命周期和页面生命周期
小程序生 命周期
逻辑层方法
企业级卓越人才培养（信息类专业集群）
App()函数是用来注册一个小程序的且必须写在app.js中，这个方法相当
谢观赏
PPT模板下载：/moban/ 节日PPT模板：/jieri/ PPT背景图片：/beijing/ 优秀PPT下载：/xiazai/ Word教程： /word/ 资料下载：/ziliao/ 范文下载：/fanwen/ 教案下载：/jiaoan/
1
app.js、 app.json、 app.wxss
3
untils
2
Utils是存放公用js文件的文件夹，可以存放我们定 义的一些对事件处理的公共方法，能够在任何界面 的js文件中被使用 。
app.js是脚本文件，小程序的逻辑文件，能够对一些生命周期函数方法进行处理 app.json是项目中的公共配置文件，例如配置导航条样式，底部tab菜单等 app.wxss是公共样式文件，包含全局的界面美化代码。
小程序从前台进入后台，会触发onHide方法 小程序发生脚本错误或者api调用失败时，会触发 onError方法 开发者可自行添加
App()方法 注册程序
1
Page()方法 注册页面
2
Page()是用来注册单个页面的，要写在每个页面的.js文件中，其方法中的 参数与App()中的参数类似。
视图展示组件
我知模块是KeepFit健身项目的主界面。因此，其美观程度非常重要，简洁 美观的界面将会给用户视觉上带来一定的冲击。研发团队决定把轮播图放在页面 最开始的部分，优美的图片和动态的轮播效果可以很大程度上吸引用户的眼球。 本项目主要通过keepFit健身主界面来学习微信小程序的结构与配置。
功能描述
01
点击输入说明文字
06 任务总结
任务总结
任务技能 任务描述
任务实施
企业级卓越人才培养（信息类专业集群）
任务总结
本任务通过学习KeepFit健身主界面，了解微信小程序如何布局实现界面的美观和整齐，掌握小程序的 项目结构和对小程序的生命周期有深入的了解，掌握小程序的逻辑层方法和视图展示的组件，并通过所学 知识，制作出KeepFit健身主界面和相关网站的轮播图。
04
了解如何布局界面
02
掌握小程序的项目结构
03
掌握小程序的逻辑层方法及组件
具有实现主界面的能力
02 学习路径
学习路径
企业级卓越人才培养（信息类专业集群）
03 任务描述
任务描述
1 2 3
企业级卓越人才培养（信息类专业集群）
情景导入 功能描述 基本框架
情境导入
企业级卓越人才培养（信息类专业集群）
企业级卓越人才培养（信息类专业集群）
01 学习目标 02 学习路径 03 任务描述
04 任务技能 05 任务实施 06 任务总结
01 学习目标
学习目标
学习 目标
企业级卓越人才培养（信息类专业集群）
01
通 过 keepFit 健 身 主 界 面 模 块 实 现，了解微信小程序如何布局实 现界面的美观和整齐，学习微信 小程序的项目结构及基本配置， 对小程序的生命周期有所了解， 掌握使用小程序创建页面时所需 要的方法和组件，具有使用微信 小程序相关组件实现健身主页面 的能力。
于提供了一个小程序的实例，开发者可以在每个页面自己文件夹中的.js
文件里通过getApp()调用这个实例，其中的参数如下表所示：
属性
描述
onLaunch onShow
onHide onError
其他
当小程序初始化完成时会 触发onLaunch方法
小程序启动或从后台进入前台显示，会触发 onShow方法
01 情02境入
使用pages进行页面的配置 使用tabBar进行选项卡页面的配置
03
使用view组件进行数据的展示
04
使用swiper组件进行轮播图的制作
企业级卓越人才培养（信息类专业集群）
基本框架
企业级卓越人才培养（信息类专业集群）
04 任务技能
任务技能
任务 技能
企业级卓越人才培养（信息类专业集群）