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

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

学习目标延迟符010203了解如何布局界面掌握小程序的项目结构掌握小程序的逻辑层方法及组件学习目标通过keepFit健身主界面模块实现，了解微信小程序如何布局实现界面的美观和整齐，学习微信小程序的项目结构及基本配置，对小程序的生命周期有所了解，掌握使用小程序创建页面时所需要的方法和组件，具有使用微信小程序相关组件实现健身主页面的能力。04具有实现主界面的能力企业级卓越人才培养（信息类专业集群）02学习路径延迟符

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

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

情境导入我知模块是KeepFit健身项目的主界面。因此，其美观程度非常重要，简洁美观的界面将会给用户视觉上带来一定的冲击。研发团队决定把轮播图放在页面最开始的部分，优美的图片和动态的轮播效果可以很大程度上吸引用户的眼球。本项目主要通过keepFit健身主界面来学习微信小程序的结构与配置。企业级卓越人才培养（信息类专业集群）延迟符

功能描述情境入01使用pages进行页面的配置01020304使用tabBar进行选项卡页面的配置使用view组件进行数据的展示使用swiper组件进行轮播图的制作企业级卓越人才培养（信息类专业集群）延迟符

基本框架企业级卓越人才培养（信息类专业集群）延迟符04任务技能任务技能微信小程序项目结构微信小程序配置小程序生命周期逻辑层方法

任务技能延迟符企业级卓越人才培养（信息类专业集群）视图展示组件pages1untils2app.js、app.json、app.wxss3pages主要存放小程序的页面文件，其包含多个文件夹，每个文件夹为一个页面，包含四个文件，其中.js是事件交互文件，.json为配置文件，.wxml是界面文件，用于处理界面的相关事件，.wxss为界面美化文件。Utils是存放公用js文件的文件夹，可以存放我们定义的一些对事件处理的公共方法，能够在任何界面的js文件中被使用

。微信小程序项目结构延迟符app.js是脚本文件，小程序的逻辑文件，能够对一些生命周期函数方法进行处理app.json是项目中的公共配置文件，例如配置导航条样式，底部tab菜单等app.wxss是公共样式文件，包含全局的界面美化代码。企业级卓越人才培养（信息类专业集群）建设制造强国12全局配置是针对整个项目进行的配置，可以被本程序所有页面引用。进行全局配置，需要用到项目中的app.json文件，它决定着页面文件的路径、窗口表现、设置网络超时时间、设置选项卡页面等。页面配置是通过配置Pages里面文件夹中的.json文件实现的，其目的是实现对应页面中的样式。页面配置相对全局配置来说更加容易，主要是因为页面所对应的.json文件只能配置app.json文件中对应的window项。微信小程序配置延迟符全局配置页面配置企业级卓越人才培养（信息类专业集群）小程序生命周期延迟符企业级卓越人才培养（信息类专业集群）生命周期指从项目的创建、开始、暂停、唤起、停止和卸载的过程。小程序的生命有分两方面，分别是应用生命周期和页面生命周期小程序生命周期12App()函数是用来注册一个小程序的且必须写在app.js中，这个方法相当于提供了一个小程序的实例，开发者可以在每个页面自己文件夹中的.js文件里通过getApp()调用这个实例，其中的参数如下表所示：Page()是用来注册单个页面的，要写在每个页面的.js文件中，其方法中的参数与App()中的参数类似。

逻辑层方法延迟符App()方法注册程序Page()方法注册页面企业级卓越人才培养（信息类专业集群）属性描述onLaunch当小程序初始化完成时会触发onLaunch方法onShow小程序启动或从后台进入前台显示，会触发onShow方法onHide小程序从前台进入后台，会触发onHide方法

onError小程序发生脚本错误或者api调用失败时，会触发onError方法其他开发者可自行添加view1scroll-view2swiper3View是视图容器组件，用来盛放展示数据的容器，可以将数据呈现给用户。view标签成对出现使用，可以在标签中放入其他组件，也可以使用在其他组件中，使用简单，没有固定结构。scroll-view是滚动视图组件，分为水平滚动和垂直滚动，可以更多的展示数据，并节约页面的空间。视图展示组件延迟符swiper是轮播图组件，它是由多个容器组成，每个容器之间可以滑动切换，其代码结构由轮播图容器（<swiper>标签）和轮播图组件（<swiper-item>标签）组成。企业级卓越人才培养（信息类专业集群）05任务实施延迟符输入标题输入标题输入标题第一步：在app.json文件中进行页面和选项卡配置。第二步：使用<swiper>标签添加轮播图并设置样式第三步：使用<view>标签对下方列表进行制作并设置对应样式第四步：为训练专区和音乐专区添加跳转事件点击输入说明文字点击输入说明文字点击输入说明文字

任务实施延迟符企业级卓越人才培养（信息类专业集群）06任务总结延迟符任务技能任务实施任务总结任务描述本任务通过学习KeepFit健身主界面，了解微信小程序如何布局实现界面的美观和整齐，掌握小程序的项目结构和对小程序的生命周期有深入的了解，掌握小程序的逻辑层方法和视图展示的组件，并通过所学知识，制作出KeepFit健身主界面和相关网站的轮播图。

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