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

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

学习目标延迟符010203了解小程序界面的设计思想掌握小程序的注册流程掌握开发者工具的使用学习目标通过实现KeepKit健身我行模块的制作，了解使用小程序制作我行模块的流程及开发思路，学习小程序中表单相关组件、掌握小程序地理位置的获取和使用，详细了解Canvas在小程序中的使用，具有使用小程序表单制作出相关的界面的能力。04具有使用软件创建项目的能力企业级卓越人才培养（信息类专业集群）02学习路径延迟符

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

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

情境导入我行模块主要是班级授课，同一个班健身用户的年龄和健身程度大致相同，并且人数固定，教练同时对整个班进行同样内容的教学。在这里，用户可根据找班级和班级大厅区域查找适合自己的班级，也可在找教练区域查找自己喜欢的教练并选择其班级，然后通过点击报名，支付一定的报名费即可进入班级。本项目主要通过KeepFit健身我行模块来学习微信小程序的表单组件与地理位置。企业级卓越人才培养（信息类专业集群）延迟符

功能描述情境入01使用rpx单位进行长度的设置01020304使用picker组件实现选择器效果使用text组件进行文本内容的展示使用canvas组件进行绘图企业级卓越人才培养（信息类专业集群）延迟符

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

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

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

基本框架企业级卓越人才培养（信息类专业集群）延迟符04任务技能任务技能表单组件地理位置Canvas使用

任务技能延迟符企业级卓越人才培养（信息类专业集群）picker1picker-view2picker是指在微信小程序中从底部弹起的滚动选择器，主要用来在页面中添加一列或多列选择列表的组件，根据picker标签中的mode属性可划分为：普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器picker-view是嵌入页面的滚动选择器组件，用于在页面中添加一个已经被展示出来的、可以直接被滚动选择的选择器。表单组件延迟符企业级卓越人才培养（信息类专业集群）slider3switch4slider组件用来在视图中添加滑动选择器，滑动选择器好比一个可以控制前后滑动的进度条，相当于HTML5中range输入类型的input标签。slider组件中有很多属性，其中min、max和step设置选择器的范围及步长switch组件用来在视图中添加开关或者复选框，当type属性的值为switch时添加开关，为checkbox时添加复选框。开关和复选框的颜色以及默认状态可以通过color属性和checked属性进行控制表单组件延迟符企业级卓越人才培养（信息类专业集群）map1地图定位2map组件是一个容器组件，可以把位置信息在地图上标准并在屏幕展示，在小程序中使用map组件只需要填入属性以及对应的属性值就可以实现地图的展示。map组件有多种属性来进行地图的展示，其中，markers的标记点可以在地图上进行位置的提醒小程序可以使用进行位置信息获取、位置选择等功能的接口来获取位置并把信息展示在地图上，在开发过程中如果使用到地图定位一般采用地图定位接口和map组件相结合的方法地理位置延迟符企业级卓越人才培养（信息类专业集群）Canvas使用

Canvas使用延迟符企业级卓越人才培养（信息类专业集群）Canvas是一个矩形区域的画布组件，是一个容器，提供了一个空白的区域，小程序中可以通过Canvas提供的API进行图形绘制、图形动画效果制作及展示。Canvas组件有多种属性来定义画布，包括唯一标识canvas-id触摸开始bindtouchstart、触摸移动bindtouchmove等05任务实施延迟符输入标题第一步：使用swiper组件添加轮播图第二步：在.js文件的data中对轮播图数据进行添加并通过定义对应class设置其大小第三步：使用<view>标签添加下面的找班级、班级大厅、找教练部分第四步：定义对应class设置图片、文字的大小及位置并使用bindtap绑定页面跳转点击输入说明文字

任务实施延迟符企业级卓越人才培养（信息类专业集群）输入标题第一步：使用swiper组件添加轮播图第二步：设置轮播图容器及里面图片的大小第三步：使用wx:for对下面的列表内容（view标签包裹的标题部分和scroll-view标签包裹的图片部分）进行添加第四步：设置文字、箭头、图片的位置以及图片容器的white-space（内容不换行）点击输入说明文字

任务实施延迟符企业级卓越人才培养（信息类专业集群）输入标题第一步：使用view组件添加对应的图片及文字内容第二步：使用wx:for对容器view组件进行列表渲染，并在.js文件的data中添加相应数据第三步：设置图片容器的多边形样式第四步：通过定义文字部分的overflow及white-space样式来设置文字部分超出部分隐藏以及内容不折叠点击输入说明文字

任务实施延迟符企业级卓越人才培养（信息类专业集群）输入标题第一步：使用view组件及image组件对页面中的信息进行添加第二步：在.js文件的data中添加相应的班级信息、开班时间、结束时间、班级简介等数据第三步：设置图片及文字内容的位置和大小点击输入说明文字

任务实施延迟符企业级卓越人才培养（信息类专业集群）06任务总结延迟符任务技能任务实施任务总结任务描述本任务通过学习KeepKit健身我行模块，能够对小程序的开发流程有进一步的了解，能够通过所学的表单组件、地理位置的获取等制作成用户登录后显示用户所在的位置，同时能够根据所学内容在设计及制作方面更上一层楼。

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