《微信小程序项目实战》教学课件—02健身主界面模块
微信小程序培训课完整版 ppt课件
1、学习css之前html要熟练，没有墙面（html）的话，我们给墙面怎么刷漆（css装 饰）？对不对？ 2、看视频教程，看书籍，写代码，调试代码，多思考。 3、坚持下去，选择他就要把他学好，不忘初心。
网络在线手册地址：/css/
ppt课件
在这里要感谢微信大神：张小龙。
ppt课件
4
html基础课程
HTML：超文本标记语言 标签：<html></html>闭合标签、<br />自闭标签<img /><hr /> HTML很重要，重要，一定要学好。
HTML标签的熟练使用 如：<div><a><span><b><img><input><table><tr><td><p><ul><ol><li><dl><dt><dd> 等等。
text-indent:24px;
}
也可以这样编写，但是一定要注意结尾有英文的分号.初学者建议采用上面的方式编写
css;
css高级语法 同时定义多个元素多组声明的写法，英文状态下的逗号
p,h1,h2,div,table{
color:red;
font-size:16px;
}
4种css的加载方式 1、行内方式
犀牛课堂小程序培训课
——培训讲师：Tabniu
ppt课件
1
微信小程序开发工具
1、打开浏览器输入 https:///debug/wxadoc/dev/devtools/download.html?t=1475052055364 打开页面 2、查看系统信息 3、选择下载对应的工具 4、安装工具 5、打开工具（需要微信扫描登录） 6、尝试运行微信小程序
《微信小程序开发项目教程》第二章
购买商品功能介绍
任务20——实现订单详情页功能
设计目的： 用户在购买的商品的时候，有时不会立即支付，或者支付后想查看自己的订单信息，订单详情页面就是 必不可少的页面了。
微信小程序开发项目教程
图书分类功能介绍
任务21：实现图书分类功能
设计目的： 手风琴式导航方式是很多商城都会采用的导航方式，对于商品分类过多的商城，这样的设计方便用户查 找商品。
微信小程序开发项目教程
我的模块功能介绍
任务5：实现修改密码功能
设计目的： 通过修改密码功能，我们要学会布局修改密码界面和表单校验的方法。
微信小程序开发项目教程
我的模块功能介绍
任务6：实现意见反馈功能
设计目的： 意见反馈功能用来收集用户对产品使用的意见，我们可以通过收集这些意见或建议来优化App或者小程序。
微信小程序开发项目教程
微信小程序开发项目教程
微信小程序开发项目教程
我的模块功能介绍
任务7：实现清除缓存功能
设计目的： 小程序可以提供清除缓存功能，把缓存到本地的数据清除掉，释放空间。 莫凡商城小程序提供清除缓存功能，可以清理掉缓存在小程序中的数据。
微信小程序开发项目教程
我的模块功能介绍
任务8：实现我的订单功能
设计目的： 商城类App或者小程序都有订单这个概念，订单可以分为待付款订单、待收货订单、已完成订单等不同 类别，每种订单具有不同的操作按钮，这是设计订单列表时要考虑的事情。
微信小程序开发项目教程
我的模块功能介绍
任务3：实现登录功能
设计目的： 账号密码登录和手机快捷登录是现在比较流行的登录设计方式，有很多App或者小程序都会采用这样的设 计方式，在设计其他小程序的时候具有借鉴意义。
微信小程序开发实战(第2版)-教学大纲
《微信小程序开发实战（第2版）》课程教学大纲（课程英文名称）课程编号：学分：学分课时：86课时（其中：讲课55课时上机31课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业一、课程的性质与目标微信小程序是一门面向Web前端开发人员的课程，用于快速掌握微信小程序的开发。
本课程以案例驱动模式，循序渐进地讲解了微信小程序的相关知识，包括微信小程序项目的创建方法、页面组成、发布流程、常用组件、导航栏、标签栏、数据绑定、事件绑定、this 关键字、列表渲染、常用API、Vant Weapp组件库、WeUI组件库、uni-app框架等内容以及两个综合项目。
另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内容。
通过本课程的学习，不仅可以让学生掌握微信小程序的核心知识，还可以培养学生的家国情怀、责任担当、敬业精神等。
二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将微信小程序与项目开发相结合。
按照学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从而培养学生分析问题和解决问题的能力。
课程设计思路：本课程根据知识点难易的先后顺序进行讲解。
采用案例驱动式体例，主要包括“案例分析”“知识储备”“案例实现”等，在每个案例中，先对案例进行需求分析，然后在知识储备中讲解实现这个案例需要使用到的知识，并结合示例代码帮助学生理解，最后通过案例实现达到学以致用的目标。
学完微信小程序的基础知识后，通过两个项目实战将所学内容全部串联起来，培养学生分析和解决问题的能力。
操作系统：Windows 7或更高版本开发工具：微信开发者工具、HBuilder X三、课程的主要内容及基本要求第1章微信小程序入门学习单元微信小程序入门课时6课时学习目标1.了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境2.掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册3.掌握获取微信小程序AppID的方法，能够从微信小程序管理后台获取AppID4.掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装5.掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目6.熟悉微信小程序的项目结构，能够解释每个文件的作用7.熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用8.熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式9.熟悉微信开发者工具的主界面，能够说出工具栏中常用快捷按钮的功能10.掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置11.了解微信小程序开发常用快捷键，能够列举4类常用快捷键12.了解项目成员，能够说出项目成员的组织结构、分工和权限13.掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员14.熟悉微信小程序的版本，能够说明微信小程序的4种版本15.熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤学习内容知识点掌握程度重点难点什么是微信小程序了解微信小程序的特点了解微信小程序的发展前景了解微信小程序的宿主环境了解注册微信小程序开发账号掌握获取微信小程序AppID 掌握√安装微信开发者工具掌握创建微信小程序项目掌握√微信小程序的项目结构熟悉微信小程序的页面组成熟悉微信小程序的通信模型熟悉认识微信开发者工具熟悉微信小程序的项目设置掌握微信小程序开发常用快捷键了解项目成员的组织结构了解项目成员的分工了解项目成员和体验成员的管理了解项目成员的权限了解添加项目成员和体验成员掌握微信小程序的版本熟悉微信小程序的上线流程熟悉第2章微信小程序页面制作学习单元微信小程序页面制作课时10课时学习目标1.了解WXML的概念，能够说出WXML的特点、WXML与HTML的区别2.了解WXSS的概念，能够说出WXSS的特点、WXSS与CSS的区别3.了解组件的概念，能够说出组件的特点及常用的组件4.掌握页面路径的配置方法，能够运用该方法进行页面管理5.掌握view组件的使用方法，能够灵活运用view组件实现页面的布局效果6.掌握image组件的使用方法，能够灵活运用image组件完成图片插入操作7.掌握rpx单位的使用方法，能够灵活运用rpx单位解决屏幕适配的问题8.掌握页面样式的导入方法，能够灵活运用该方法导入公共样式9.掌握swiper和swiper-item组件的使用方法，能够灵活运用swiper和swiper-item组件完成轮播图的制作10.掌握text组件的使用方法，能够灵活运用text组件定义行内文本11.掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局12.掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置13.掌握标签栏的配置方法，能够完成页面标签栏的配置14.掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度15.掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理16.掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作学习内容知识点掌握程度重点难点WXML简介了解WXSS简介了解常用组件了解页面路径配置掌握√view组件掌握√image组件掌握√√rpx单位掌握样式导入掌握【案例2-1】个人信息-准备工作掌握【案例2-1】个人信息-实现“个人信息”微掌握√信小程序的页面结构【案例2-1】个人信息-实现“个人信息”微掌握信小程序的页面样式swiper和swiper-item组件掌握√text组件掌握Flex布局掌握【案例2-2】本地生活-准备工作掌握【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面结构【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面样式导航栏配置掌握标签栏配置掌握vm、vh单位掌握video组件掌握表单组件掌握√【案例2-3】婚礼邀请函-准备工作掌握【案例2-3】婚礼邀请函-项目初始化掌握【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的结构【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的样式【案例2-3】婚礼邀请函-实现“照片”页面掌握的结构【案例2-3】婚礼邀请函-实现“照片”页面掌握的样式【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的结构【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的样式【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的结构【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的样式第3章微信小程序页面交互学习单元微信小程序页面交互课时10课时学习目标1.熟悉Page()函数，能够归纳Page()函数及其各个参数的作用2.掌握数据绑定，能够运用数据绑定实现页面中数据的显示与修改3.掌握事件绑定，能够在组件触发时执行对应的事件处理函数4.熟悉事件对象，能够总结事件对象的属性及其作用5.掌握this关键字的使用，能够运用this关键字访问当前页面中的数据或者函数6.掌握setData()方法的使用，能够完成数据的设置与更改7.掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件8.掌握<block>标签，能够运用<block>标签同时显示或隐藏多个组件9.熟悉hidden属性，能够区分其与wx:if控制属性的区别10.掌握data-*自定义属性，能够完成data-*自定义数据的设置与获取11.掌握模块的使用，能够完成模块的创建和引入12.掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中13.掌握网络请求的实现，能够通过网络请求与服务器进行交互14.掌握提示框的实现，能够在页面中显示消息提示框15.掌握WXS的使用，能够运用WXS处理页面中的数据16.掌握上拉触底的实现，能够运用上拉触底实现数据的动态加载17.掌握下拉刷新的实现，能够运用下拉刷新实现数据的重新加载18.掌握双向数据绑定，能够运用双向绑定实现数据的动态更改学习内容知识点掌握程度重点难点Page()函数熟悉√数据绑定掌握事件绑定掌握√事件对象熟悉this关键字掌握setData()方法掌握√条件渲染掌握√<block>标签掌握hidden属性熟悉【案例3-1】比较数字大小-准备工作掌握【案例3-1】比较数字大小-实现“比较数字大小”微信小程序的页面结构掌握【案例3-1】比较数字大小-获取并保存用户输入的数字掌握【案例3-1】比较数字大小-判断数字大小并显示结果掌握data-*自定义属性掌握模块掌握【案例3-2】计算器-准备工作掌握【案例3-2】计算器-实现“计算器”微信小程序的页面结构掌握【案例3-2】计算器-实现“计算器”微信小程序的页面逻辑掌握【案例3-2】计算器-特殊情况处理掌握√列表渲染掌握√网络请求掌握√提示框掌握WXS 掌握√上拉触底掌握下拉刷新掌握【案例3-3】美食列表-准备工作掌握【案例3-3】美食列表-获取初始数据掌握【案例3-3】美食列表-实现页面渲染掌握【案例3-3】美食列表-处理电话格式掌握【案例3-3】美食列表-实现上拉触底掌握【案例3-3】美食列表-实现下拉刷新掌握双向数据绑定掌握√【案例3-4】调查问卷-准备工作掌握【案例3-4】调查问卷-获取初始数据掌握【案例3-4】调查问卷-实现页面渲染掌握第4章微信小程序常用API（上）学习单元微信小程序常用API（上）课时9课时学习目标1.掌握scroll-view组件，能够运用scroll-view组件完成视图区域的横向滚动或者纵向滚动2.掌握slider组件，能够运用slider组件完成滑动选择器的制作3.掌握<include>标签，能够运用<include>标签引用其他文件中的代码4.掌握背景音频API，能够运用背景音频API实现音频后台播放、音频暂停等功能5.掌握录音API，能够运用录音API实现录音功能6.掌握音频API，能够运用音频API实现音频播放、暂停等功能7.掌握选择媒体API，能够运用wx.chooseMedia()方法选择图片或视频8.掌握图片预览API，能够运用wx.previewImage()方法预览图片9.掌握文件上传API，能够运用wx.uploadFile()方法实现将本地资源上传到服务器中10.掌握文件下载API，能够运用wx.downloadFile()方法实现资源文件的下载11.掌握canvas组件，能够灵活运用canvas组件创建画布12.掌握画布API，能够运用画布API完成图形的绘制学习内容知识点掌握程度重点难点scroll-view组件掌握√slider组件掌握√<include>标签掌握背景音频API 掌握√【案例4-1】音乐播放器-准备工作掌握【案例4-1】音乐播放器-实现“音乐播放器”掌握微信小程序的页面结构【案例4-1】音乐播放器-实现标签页切换掌握【案例4-1】音乐播放器-实现“音乐推荐”标签页掌握【案例4-1】音乐播放器-实现“播放器”标签页掌握【案例4-1】音乐播放器-实现播放器区域掌握【案例4-1】音乐播放器-实现播放进度的控制掌握【案例4-1】音乐播放器-实现“播放列表”标签页掌握录音API 掌握音频API 掌握【案例4-2】录音机-准备工作掌握【案例4-2】录音机-初始化录音功能掌握【案例4-2】录音机-实现“录音机”微信小程序的页面结构掌握【案例4-2】录音机-实现录音功能掌握【案例4-2】录音机-实现播放录音功能掌握√选择媒体API 掌握图片预览API 掌握文件上传API 掌握√文件下载API 掌握√【案例4-3】头像上传下载-准备工作掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面结构掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面逻辑掌握canvas组件掌握画布API 掌握√【案例4-4】模拟时钟-准备工作掌握【案例4-4】模拟时钟-初始化画布掌握【案例4-4】模拟时钟-绘制表盘掌握【案例4-4】模拟时钟-绘制指针掌握【案例4-4】模拟时钟-实现时钟走动效果掌握√第5章微信小程序常用API（下）学习单元微信小程序常用API（下）课时13课时学习目标1.掌握动画API，能够完成动画的制作2.熟悉登录流程时序，能够归纳微信小程序的登录流程3.掌握登录API，能够运用wx.login()方法实现用户登录4.掌握数据缓存API，能够对数据进行存储、获取和移除等操作5.掌握头像昵称填写功能，能够实现头像选择和昵称填写6.掌握腾讯地图SDK，能够实现腾讯地图SDK的接入和使用7.掌握map组件，能够灵活运用map组件实现地图效果8.掌握地图API，能够实现地图中地理位置的获取等功能9.掌握位置API，能够实现获取当前地理位置的功能10.掌握路由API，能够利用路由API实现页面跳转11.掌握WebSocket API，能够成功创建WebSocket连接12.掌握SocketTask，能够使用SocketTask管理WebSocket连接学习内容知识点掌握程度重点难点动画API 掌握√【案例5-1】罗盘动画-准备工作掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面结构掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面逻辑掌握登录流程时序熟悉登录API 掌握√数据缓存API 掌握√头像昵称填写掌握App()函数掌握√【案例5-2】用户登录-准备工作掌握【案例5-2】用户登录-实现用户登录掌握【案例5-2】用户登录-检查用户是否已经登录掌握【案例5-2】用户登录-获取用户的积分掌握【案例5-2】用户登录-获取用户头像和昵称掌握腾讯地图SDK 掌握map组件掌握地图API 掌握√位置API 掌握路由API 掌握√【案例5-3】查看附近美食餐厅-准备工作掌握【案例5-3】查看附近美食餐厅-获取初始数据掌握【案例5-3】查看附近美食餐厅-在页面中显示地图掌握【案例5-3】查看附近美食餐厅-实现跳转到优惠券页面掌握【案例5-3】查看附近美食餐厅-实现查找附近美食餐厅功能掌握WebSocket API 掌握√√SocketTask 掌握√√【案例5-4】在线聊天-准备工作掌握【案例5-4】在线聊天-实现WebSocket连接掌握【案例5-4】在线聊天-实现发送消息功能掌握【案例5-4】在线聊天-实现消息列表展示功能掌握第6章综合项目——“点餐”微信小程序学习单元综合项目——“点餐”微信小程序课时20课时学习目标1.掌握封装网络请求的方法，能够通过封装网络请求简化项目中网络请求的代码2.掌握用户登录的开发，能够独立实现用户登录3.掌握商家首页的开发，能够独立完成商家首页的编写4.掌握菜单列表页的开发，能够独立完成菜单列表页的编写5.掌握购物车的开发，能够独立实现购物车6.掌握订单确认页的开发，能够独立完成订单确认页的编写7.掌握订单详情页的开发，能够独立完成订单详情页的编写8.掌握订单列表页的开发，能够独立完成订单列表页的编写9.掌握消费记录页的开发，能够独立完成消费记录页的编写学习内容知识点掌握程度重点难点【任务6-1】项目开发准备-开发背景了解【任务6-1】项目开发准备-项目模块划分熟悉【任务6-1】项目开发准备-项目初始化掌握【任务6-2】封装网络请求-保存接口地址掌握【任务6-2】封装网络请求-封装网络请求函数掌握√【任务6-2】封装网络请求-请求失败时的处理掌握【任务6-2】封装网络请求-请求成功时的处理掌握【任务6-3】用户登录-判断登录状态掌握√【任务6-3】用户登录-执行登录操作掌握√【任务6-3】用户登录-记住登录状态掌握【任务6-4】商家首页-加载商家首页数据掌握【任务6-4】商家首页-实现商家首页的轮播图区域掌握【任务6-4】商家首页-实现商家首页的中间区域掌握【任务6-4】商家首页-实现商家首页的底部区域掌握【任务6-5】菜单列表页-加载菜单列表页数据掌握【任务6-5】菜单列表页-实现折扣信息区域掌握【任务6-5】菜单列表页-实现菜单列表区域掌握【任务6-5】菜单列表页-实现点击左侧菜单项滚动右侧商品列表掌握√【任务6-5】菜单列表页-实现滚动右侧商品掌握√列表激活左侧菜单项【任务6-6】购物车-实现底部购物车区域掌握【任务6-6】购物车-实现添加商品到购物车掌握√【任务6-6】购物车-实现小球动画效果掌握√【任务6-6】购物车-实现满减优惠信息区域掌握【任务6-6】购物车-实现购物车界面区域掌握【任务6-6】购物车-实现增加和减少商品数掌握量【任务6-6】购物车-实现清空购物车掌握【任务6-7】订单确认页-跳转到订单确认页掌握【任务6-7】订单确认页-加载订单确认页数掌握据【任务6-7】订单确认页-实现页面结构和页掌握面样式【任务6-7】订单确认页-实现订单信息区域掌握【任务6-7】订单确认页-实现备注区域掌握【任务6-7】订单确认页-实现支付区域掌握【任务6-8】订单详情页-加载订单详情页数掌握据【任务6-8】订单详情页-实现取餐信息区域掌握【任务6-8】订单详情页-实现订单详情区域掌握【任务6-8】订单详情页-实现订单信息区域掌握【任务6-9】订单列表页-加载订单列表页数掌握据【任务6-9】订单列表页-实现订单列表页的掌握页面结构【任务6-9】订单列表页-实现订单列表页的掌握页面样式【任务6-9】订单列表页-实现下拉刷新掌握√【任务6-9】订单列表页-实现上拉触底掌握√【任务6-9】订单列表页-跳转到订单详情页掌握【任务6-10】消费记录页-加载消费记录页数掌握据【任务6-10】消费记录页-实现消费记录页的掌握页面结构【任务6-10】消费记录页-实现消费记录页的掌握页面样式【任务6-10】消费记录页-获取头像掌握第7章微信小程序开发进阶学习单元微信小程序开发进阶课时9课时学习目标1.掌握自定义组件的创建方法，能够根据实际需要创建自定义组件2.掌握自定义组件的使用方法，能够使用自定义组件3.掌握使用自定义组件渲染标签栏的方法，能够使用自定义组件渲染标签栏4.掌握Vant Weapp组件库的使用方法，能够使用Vant Weapp组件库快速搭建微信小程序的页面5.掌握WeUI组件库的使用方法，能够使用WeUI组件库快速搭建微信小程序的页面6.掌握navigator组件的使用方法，能够利用navigator组件实现页面跳转7.了解uni-app框架的概念，能够说出使用uni-app框架开发项目的优势8.掌握HBuilder X开发工具的设置，能够完成HBuilder X的基本设置和个性化设置9.掌握uni-app项目的创建方法，能够完成uni-app项目的创建10.熟悉uni-app项目的目录结构，能够解释各个文件和文件夹的作用11.掌握uni-app项目运行至微信小程序的方法，能够将uni-app项目运行至微信小程序12.掌握uni-app项目的全局配置文件，能够对导航栏、底部标签栏、页面的文件路径等进行配置学习内容知识点掌握程度重点难点创建自定义组件掌握√使用自定义组件掌握√使用自定义组件渲染标签栏掌握Vant Weapp组件库掌握【案例7-1】自定义标签栏-准备工作掌握【案例7-1】自定义标签栏-项目初始化掌握【案例7-1】自定义标签栏-定义标签栏数据掌握【案例7-1】自定义标签栏-实现页面布局掌握【案例7-1】自定义标签栏-实现页面逻辑掌握WeUI组件库掌握√navigator组件掌握√√【案例7-2】电影列表-准备工作掌握【案例7-2】电影列表-实现标签栏掌握【案例7-2】电影列表-实现“正在热映”标签页掌握【案例7-2】电影列表-实现“搜索”标签页掌握【案例7-2】电影列表-实现“分类”标签页掌握uni-app框架概述了解HBuilder X开发工具掌握创建uni-app项目掌握uni-app项目的目录结构熟悉将uni-app项目运行至微信小程序掌握√uni-app项目的全局配置文件掌握【案例7-3】待办事项-准备工作掌握【案例7-3】待办事项-实现添加待办事项的掌握功能【案例7-3】待办事项-实现列表区域掌握第8章uni-app项目—— “短视频”微信小程序学习单元uni-app项目—— “短视频”微信小程序课时9课时学习目标1.掌握公共头部的开发，能够独立完成公共头部代码的编写2.掌握导航栏的开发，能够独立完成导航栏代码的编写3.掌握轮播图的开发，能够独立完成轮播图代码的编写4.掌握视频列表的开发，能够独立完成视频列表代码的编写5.掌握视频详情页的开发，能够独立完成视频详情页的编写学习内容知识点掌握程度重点难点【任务8-1】项目开发准备-项目展示掌握【任务8-1】项目开发准备-项目初始化掌握√【任务8-2】公共头部区域-实现公共头部区域的页面结构掌握【任务8-2】公共头部区域-实现公共头部区域的页面样式掌握【任务8-2】公共头部区域-在页面中显示公共头部区域掌握【任务8-3】导航栏区域-加载导航栏数据掌握√【任务8-3】导航栏区域-实现导航栏区域的页面结构掌握【任务8-3】导航栏区域-实现导航栏区域的页面样式掌握【任务8-3】导航栏区域-实现导航栏的切换效果掌握【任务8-4】轮播图区域-加载轮播图数据掌握【任务8-4】轮播图区域-实现轮播图区域的页面结构掌握【任务8-4】轮播图区域-实现轮播图区域的页面样式掌握【任务8-5】视频列表区域-加载视频列表数据掌握【任务8-5】视频列表区域-实现视频列表区域的页面结构掌握【任务8-5】视频列表区域-实现视频列表区域的页面样式掌握【任务8-5】视频列表区域-实现跳转到视频详情页掌握√【任务8-6】视频详情页-实现整体页面结构掌握【任务8-6】视频详情页-实现视频详情区域掌握【任务8-6】视频详情页-实现推荐视频区域掌握【任务8-6】视频详情页-实现评论列表区域掌握四、课时分配五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
《微信小程序项目实战》教学课件项目七KeepFit健身我的模块实现
行业PPT模板：/hangye/ PPT素材下载：/sucai/ PPT图表下载：/tubiao/ PPT教程： /powerpoint/ Excel教程：/excel/ PPT课件下载：/kejian/ 试卷下载：/shiti/ PPT论坛：
任务实施
输入标题
点击输入说明文字
输入标题
点击输入说明文字
输入标题
点击输入说明文字
第一步：使用view标签在页面中添加更换头像部分， 第二步：使用wx:for渲染中间和下边的列表并对其相应样式进行添加 第三步：对列表中的联系我们的项绑定对应的事件并对页面底部的退出账号的按钮进行添加 第四步：使用wx.makePhoneCall()方法对拨打电话的功能进行添加
掌握小程序的数据交互
的数据交互和下拉刷新等最常用
的功能，并能熟练掌握小程序存
储数据的思路及存储流程，具有 03
熟练使用小程序常用功能的能力。
掌握小程序的数据存储
在任务实现过程中：
04 具有熟练使用小程序常用功能的能力
02 学习路径
学习路径
03 任务描述
任务描述
1 2 3
情景导入 功能描述 基本框架
获取信息
网络状态
3
转发信息
5
小程序中可以通过调用wx.getNetworkType(OBJECT)方法获取网络状 态，调用wx.onNetworkStatusChange(CALLBACK)方法监听网络变 化获取网络类型。两个方法共同实现网络状态的获取及监听
登录
4
调用微信登录方法（wx.login(object)）可以获取唯 一标识符以及成功时返回的参数。 当用户一段时间不使用小程序，用户的登录状态可能 失效，小程序提供了（wx.checkSession(object)）方 法用于检测用户的登录状态
《微信小程序项目实战》教学课件—03健身训练专区模块
任务描述
1 2 3
企业级卓越人才培养（信息类专业集群）
情景导入 功能描述 基本框架
功能描述
企业级卓越人才培养（信息类专业集群）
01
01 情02境入
使用小程序图标丰富小程序页面 使用video组件实现视频的播放
03
使用navigator和导航事件进行页面的跳转
04
使用“@import "路径";”进行样式的导入
企业级卓越人才培养（信息类专业集群）
01 学习目标 02 学习路径 03 任务描述
04 任务技能 05 任务实施 06 任务总结
01 学习目标
学习目标
学习 目标
企业级卓越人才培养（信息类专业集群）
01 了解微信小程序制作训练专区的思路
通 过 实 现 KeepFit 健 身 训 练 专 区 模 块，了解微信小程序将列表和视频
企业级卓越人才培养（信息类专业集群）
在keepFit健身首界面通过点击训练专区，能够跳转到训练专区模块。训练专区主要是 为用户提供视频教学的地方，方便用户随时随地进行健身。为了使用户快速找到适合自己健 身项目，研发团队设计了导航界面，将每类健身项目通过图片与文字方式用列表的形式展现， 且每类健身项目还划分为基础、中级、高级的健身学习模式，并以小节的形式进行视频学习。 本项目主要通过keepFit健身训练专区来学习微信小程序的导航与样式。
要想对元素的样式进行一些修饰，首先需要找到该目标元素， 在wxss中，执行这一任务的样式规格部分被称为选择器。与css 相比，wxss支持的选择器如下表所示：
选择器 class
id
element Element，element
::after ::before
《微信小程序开发实战》课程教学大纲
二、课程设计理念与思路
课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的升华与知识层面 的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。 以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发 展所需的能力和终身学习的能力，实现一站式教学理念。
wx.playVoice()
wx.pauseVoice()
wx.uploadFile()
wx.downloadFile() 录音和上传 文件的下载 【案例 8】在线聊天系统 WebSocket 的作用
√
√
√
√
√
√
√
√
√
√
√
√
√
√
√
学时
8
了解 √ √
√ √ √
√
掌握 √ √ √
√ √ √ √ √ √ √
《微信小程序开发实战》
课程教学大纲
（课程英文名称）
课程编号：
学 分：学分 学 时：67 学时 （其中：讲课学时 36 上机学时 31） 先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript 适用专业：信息技术及其计算机相关专业 开课部门：计算机系
一、课程的性质与目标
《微信小程序开发实战》是专注于微信小程序开发的 Web 前端教材，涉及微信小程序 页面组件、应用接口 API、事件机制、登录、获取用户信息、Node.js 搭建服务器、第三方 框架的使用等。通过本课程的学习，学生能够理解微信小程序的实质，掌握微信小程序开发 的基本技能，快速高效的开发微信小程序。
《微信小程序项目实战》教学课件—07健身我的模块实现
获取信息
企业级卓越人才培养（信息类专业集群）
在微信小程序中用户信息指的是进入当前小程序的微信用户的相关信息，包 括用户的昵称、头像及所在地区等。 获取用户信息的方法是在函数中调用wx.getUserInfo(OBJECT)方法，用户 信息可在调用成功后执行的success函数的userInfo参数中获取。
功能描述
企业级卓越人才培养（信息类专业集群）
01
02
03 04
使用wx.getUserInfo(OBJECT)方法进行用户信息的获取 使用page.onShareAppMessage(options)方法实现转发功能 使用wx.startPullDownRefresh()方法实现下拉刷新
基本框架
企业级卓越人才培养（信息类专业集群）
基本框架
企业级卓越人才培养（信息类专业集群）
04 任务技能
任务技能
任务 技能
企业级卓越人才培养（信息类专业集群）
数据交互 下拉刷新 数据存储 获取信息
数据交互
企业级卓越人才培养（信息类专业集群）
数据交互
客户端通过HTTP向服务端发送请求，服务端接收请求并返回数据，客户端根据 返回的数据进行显示。微信小程序中向服务端发送请求需要用到wx.request （object）方法，在使用该方法时需要添加url、data、method等相关的参数
下拉刷新
企业级卓越人才培养（信息类专业集群）
下拉刷新
下拉刷新是通过下拉页面达到重新加载、刷新的效果，在小程序中通常以三
个点的动态效果显示。下拉刷新方法如下表所示
方法 Page.onPullDown 监听下拉刷新
Refresh wx.startPullDown 开始下拉刷新
《微信小程序项目实战》教学课件—01健身登录模块实现
2
步骤二：双击安装包，选择下一步→我接受→安装→完成
微信web开发者工具使用
企业级卓越人才培养（信息类专业集群）
双击桌面上的“微信web开发者工具”→用手机微信扫描二维码，在手
机上点击确认→选择“小程序项目” →点击创建项目，添加AppID、项
建目设名称制和项目目录→选择“创建QuickStart项目”点击确定 造强国
功能描述
企业级卓越人才培养（信息类专业集群）
01
02
03 04
使用微信开发者工具进行小程序项目的创建、 开发 使用input组件进行输入框的制作 使用含参方法返回参数进行值的获取
基本框架
企业级卓越人才培养（信息类专业集群）
04 任务技能
任务技能
任务 技能
企业级卓越人才培养（信息类专业集群）
微信小程序概述 微信小程序注册 微信web开发者工具安装 微信web开发者工具使用
想，学习小程序的相关概念及与 APP的区别，掌握微信小程序的 注册流程和开发者工具的使用，
具有独立注册小程序账号并创建 03
新项目的能力。在任务实现：
掌握小程序的注册流程 掌握开发者工具的使用
04
具有使用软件创建项目的能力
02 学习路径
学习路径
企业级卓越人才培养（信息类专业集群）
03 任务描述
使用开发 者工具创 建项目
1
微信开发者工具分为五部分，分别是菜单栏、工具栏、模拟器、调试器
和编辑器。
微信开发者 工具介绍
2
05 任务实施
任务实施
企业级卓越人才培养（信息类专业集群）
输入标题
点击输入说明文字
输入标题
点击输入说明文字
微信小程序开发实战教程 第2章 基本页面和底部导航
添加编译模式
2.1.2 设置启动页面
13
如图所示，在“启动页面”下拉列 表中选择某个页面，这里选择 “pages/p2/p2”页面
选择启动页面
2.1.2 设置启动页面
如图所示，单击“确定”按钮，完 成设置。
自行观察运行结果，这里为p2页面 的内容，再检查一下app.json文件 的内容，发现项目的启动页面仍然 为p1。
2.2.2 设计底部导航
21
保存文件，底部导航运行结果如图所示。注意， 可观察到底部有2个标签，选中“页面1”标签页， 将显示“p1”对应的内容，选中“页面2”标签 页，将显示“p2”对应的内容，并可观察到图标 的变化。
底部导航运行结果
2.2.2 设计底部导航
22
下面介绍微信开发者工具中集成开发环境（Integrated Development Environment，IDE） 的部分功能，如图所示。自行单击“模拟器”“编辑器”“调试器”按钮可打开或关闭对应 窗口。
新建Page
2.1 基本页面
5
如图所示，在“p1”文件夹下将自动生 成4个文件，分别为 “p1.js”“p1.json”“p1.wxml”“p1 .wxss”。
一个页面的4个文件
2.1.1 创建页面
6
如图所示，在目录树中选中 “p1.wxml”文件，查看其内 容，可以看到文件内容为text 标签中包含的一段纯文本 “pages/p1/p1.wxml”，这 段纯文本默认是文件的路径。
微信小程序开发实战教程（PHP+Laravel+MySQL）
第2章 基本页面和底部导航
学习目标
1 熟练掌握创建新页面的方法 2 熟练编写底部导航代码。 3 理解底部导航各属性的含义。 4 进一步熟悉微信开发者工具界面。
微信小程序入门ppt课件
WXSS
26
1
尺寸单位
设备
rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) 屏幕宽度
iPhone5
1rpx = 0.42px
1px = 2.34rpx
320
iPhone6
1rpx = 0.5px
1px = 2rpx
375
iPhone6 Plus 1rpx = 0.552px
27
2
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联 样式表的相对路径，用;表示语句结束。
28
3
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解 析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 <view style="color:{{color}};" />
0
1
2
3
16
7
View
实现点击效果
hover-class指定按下去的样式类。 当 hover-class="none" 时，没有点击态效果
WXML <view hover-class='hover'>按钮</view>
WXSS
.hover{ background-color: #aaa;
}
178239text\t 空格（ 多个只会显示一个空格） \n 换行
<text>你好！\t七月流火啊！\n我 在下一行</text>
《微信小程序项目实战》教学课件—05健身我行模块
企业级卓越人才培养（信息类专业集群）
基本框架
企业级卓越人才培养（信息类专业集群）
04 任务技能
任务技能
任务 技能
企业级卓越人才培养（信息类专业集群）
表单组件 地理位置 Canvas使用
表单组件
企业级卓越人才培养（信息类专业集群）
picker是指在微信小程序中从底部弹起的滚动选择器，主要用来在页面中添 加一列或多列选择列表的组件，根据picker标签中的mode属性可划分为： 普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器
任务实施
企业级卓越人才培养（信息类专业集群）
输入标题
点击输入说明文字
第一步：使用view组件添加对应的图片及文字内容 第二步：使用wx:for对容器view组件进行列表渲染，并在.js文件的data中添加相应数据 第三步：设置图片容器的多边形样式 第四步：通过定义文字部分的overflow及white-space样式来设置文字部分超出部分隐藏以及内容不折叠
picker
1
pickerview的滚动选择器组件，用于在页面中添加一个已经被展 示出来的、可以直接被滚动选择的选择器。
表单组件
企业级卓越人才培养（信息类专业集群）
slider组件用来在视图中添加滑动选择器，滑动选择器好比一个可以控制前 后滑动的进度条，相当于HTML5中range输入类型的input标签。 slider组件中有很多属性，其中min、max和step设置选择器的范围及步长
企业级卓越人才培养（信息类专业集群）
01 学习目标 02 学习路径 03 任务描述
04 任务技能 05 任务实施 06 任务总结
01 学习目标
学习目标
学习 目标
微信小程序培训课完整版 ppt课件
一条声明：例如 p{color:red;} p { color : red ; } 也可以 多条声明：例如 p{color:red; text-align:center;}多条声明用;隔开,可以写在一行;注意：英文状态下的color:red;
text-align:center;
重点讲解对象的使用(小程序提供的api的属性和方法)
网络在线手册：http://www.w3school.coppmt课.c件n/js 打开参考学习
12
JavaScript基础课程
1、变量 var a; var b,c,d; var d=0; 2、数据类型 字符串，数字，布尔，数组，对象，Null，Undefined 3、对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。 对象有属性和方法 属性是与对象相关的值。 方法是能够在对象上执行的动作。 举例：汽车就是现实生活中的对象。 汽车的属性：
6
css基础课程
css中文名称：层叠样式表 css语法：由两个主要的部分构成：选择器，以及一条或多条声明 选择器：通常是指需要改变样式的html元素 每条声明：由一个属性和一个值组成（如p{color:red;}） p就是一个html元素（标签）一个属性是color（颜色），一个值是red，中间用英文冒 号隔开 : 在值的后面用英文的 分号结束 ;
ppt课件
10
什么是盒子模型？
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子 模式。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
微信小程序知识点实战视频课程课件PPT模板
第2章微信小程序组件知识点
2-7表单组件-button按钮 2-8表单组件-checkbox多选项 目 2-9表单组件-form表单 2-10表单组件-input输入框表单 组件-input输入框
感谢聆听
议看下】
1-4框架-全局配置和 (子)页面配置
1-5数据绑定、如何实 现小程序的变量初始化
1-6列表渲染、如何显 示列表数据
第1章微信小程序框架知识点
1-7条件渲染wx-if 1-8事件bindtap（微信小程序中 的事件） 1-9模板template 1-10两种文件引用方式import和 include
0
2
第2章微信小程序-组件知识点
第2章微信 小程序-组件 知识点
0 1 2-1视图容器-scrollview
0 3 2-3滑块视图容器swiper-广告轮播 图片的制作
0 4 2-4基础内容-图标icon
05
2-5基础内容-text和richtext
0 6 2-6基础内容-进度条progress
微信小程序知识点实战视频课程
演讲人
2 0 2 x - 11 - 11
目录
01. 第1章微信小程序-框架知识点 02. 第2章微信小程序-组件知识点
0
1
第1章微信小程序-框架知识点
第1章微信小程序-框架知识点
1-3微信小程序-如何编 写自己的基础框架
1-2课程概要和演示讲 解
1-1微信小程序入门到课 （全栈课）学习说明【建
小程序开发基础与项目实战PPT模板
1-4第4节小 程序api组 件详解一
1-5第5节 image组件
的使用
1-1第1节课 程简介
1-2第2节下 载微信开发
者工具
1-3第3节小 程序目录结
构
a
1-7第7 节基础内
容组件
d
1-10第 10节条件
渲染Leabharlann 第1章小程序基础b
1-8第8 节常用表
单
c
1-9第9 节wxml 数据绑定
e
1-11第 11节for 循环遍历
f
1-12第 12节绑定
事件
第1章小程序基础
1-13第13节阻止冒泡 1-14第14节小程序全局配置 1-15第15节tabbar导航的使用 1-14第14节小程序全局配置 1-15第15节tabBar导航的使用
第2章项目实践
第2章项目实践
2-1第16节项目简介 2-2第17节布局轮播图 2-3第18节布局完成 2-4第19节调用接口获取轮播图 数据 2-5第20节获取首页广告
感谢聆听
2020
小程序开发基础与项目实战
演讲人 202x-11-11
目录
01. 第1章小程序基础 02. 第2章项目实践
第1章小程序基础
第1章小程序基础
单击此处添加标题
单击此处添加文本具体内容， 简明扼要的阐述您的观点。根 据需要可酌情增减文字，以便 观者准确的理解您传达的思想。
1-6第6节 swiper组件
《微信小程序项目实战》教学课件项目二KeepFit健身主界面模块
app.js是脚本文件，小程序的逻辑文件，能够对一些生命周期函数方法进行处理 app.json是项目中的公共配置文件，例如配置导航条样式，底部tab菜单等 app.wxss是公共样式文件，包含全局的界面美化代码。
微信小程序配置
全局配置是针对整个项目进行的配置，可以被本程序所有页面引用。进
行全局配置，需要用到项目中的app.json文件，它决定着页面文件的路
行业PPT模板：/hangye/ PPT素材下载：/sucai/ PPT图表下载：/tubiao/ PPT教程： /powerpoint/ Excel教程：/excel/ PPT课件下载：/kejian/ 试卷下载：/shiti/ PPT论坛：
开发者可自行添加
App()方法 注册程序
1
Page()方法 注册页面
2
Page()是用来注册单个页面的，要写在每个页面的.js文件中，其方法中的 参数与App()中的参数类似。
视图展示组件
view
1
swiper
3
View 是 视 图 容 器 组 件 ， 用 来 盛 放 展 示 数 据 的 容 器 ， 可 以 将 数 据 呈 现 给 用 户 。 view标签成对出现使用，可以在标签中放入其他组件，也可以使用在其他组件 中，使用简单，没有固定结构。
05 任务实施
任务实施
输入标题
点击输入说明文字
输入标题
点击输入说明文字
第一步：在app.json文件中进行页面和选项卡配置。 第二步：使用<swiper>标签添加轮播图并设置样式 第三步：使用<view>标签对下方列表进行制作并设置对应样式 第四步：为训练专区和音乐专区添
pages
pages主要存放小程序的页面文件，其包含多个文件夹，每个文件夹为 一个页面，包含四个文件，其中.js是事件交互文件，.json为配置文 件，.wxml是界面文件，用于处理界面的相关事件，.wxss为界面美化 文件。
《微信小程序项目实战》教学课件—04健身音乐专区模块
页面文件引用
企业级卓越人才培养（信息类专业集群）
模板相当于一段自己定义的代码片段。 定义模板的方法是用template标签将代码片段包裹起来，并在 template标签上添加name属性。
建 造使 模设 强用 板制 国方 的n法a是m写e的一值个template标签并添加is属性，is属性的值为相对应的
04 任务技能
任务技能
任务 技能
企业级卓越人才培养（信息类专业集群）
页面渲染 页面文件引用 媒体组件 页面事件
页面渲染
企业级卓越人才培养（信息类专业集群）
在组件上可以使用wx:for控制属性对列表进行渲染，wx:for有两种使用 方式，分别是： 直接使用 通过wx:for-item指定数组当前元素的变量名， wx:for-index 指定数组
当前下标的变量名
wx:key 是 用 来 指 定 列 表 中 项 目 的 唯 一 的 标 识 符 的 ， 也 就 是 说 添 加 了 wx:key属性的列表项会保持自身的特征和状态而不受项目位置变动的影响。 wx:key 的值以两种形式提供，分别是： 字符串 *this
列表渲染
1
条件渲染
2
在微信小程序中使用wx:if来决定是否渲染某个组件，若要渲染多个 组件，可以使用一个标签将这些组件包裹起来并在这个标签上使用wx:if， 双大括号中的值为true时表示组件会被渲染，反之则不会。
行业PPT模板：/hangye/ PPT素材下载：/sucai/ PPT图表下载：/tubiao/ PPT教程： /powerpoint/ Excel教程：/excel/ PPT课件下载：/kejian/ 试卷下载：/shiti/ PPT论坛：
功能描述
01
微信小程序开发实战教程
设置项目及含义： 启用自定义处理命令：指定编译前、预览前、上传前需要预处理的命令。 不校验合法域名、web-view（业务域名）、TlS版本以及HTTpS证书：在
真实环境中会对这些信息进行校验。
✎ 1.3 小程序开发体验
5 快捷键
为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：
教育 媒体
房地
交通
产
旅游 电商
✎ 1.1 初识微信小程序
1 什么是微信小程序
微信小程序存在的必要性： 小程序可以完成订票、打车、订餐等服务。 服务号的功能薄弱，而小程序功能强大。 小程序可以被附近用户搜索到。 小程序可以结合公众平台来推广。
✎ 1.1 初识微信小程序
1 什么是微信小程序
✎ 1.1 初识微信小程序
3 微信小程序的特点
微信小程序与原生App、Web App的区别：
对比项
下载 安装
小程序
订阅号和服务号
无需下载，通过 扫码等方式获取
从iOS和Android应用商店中下载
无需安装
安装在手机中占用存储空间
Web App
无需下载通过浏览器进入 无需安装
升级
无需升级
需要升级操作
✎ 1.3 小程序开发体验
2 开发者工具的使用
工具栏提供了一些常用功能的快捷按钮，具体解释如下： 模式切换下拉菜单：用于在小程序模式搜索动态页和插件模式之间切换。 编译下拉菜单：用于切换编译模式，默认为普通编译。 编译：编写小程序的代码后，需要编译才能运行。
✎ 1.3 小程序开发体验
✎ 1.3 小程序开发体验
2 开发者工具的使用
工具栏提供了一些常用功能的快捷按钮，具体解释如下： 个人中心：位于工具栏最左侧第1个按钮，显示当前登录用户头像。 模拟器、编辑器和调试器：用于控制相应工具的显示和隐藏。 云开发：开发者可以使用云开发来开发小程序、小游戏。云开发能力从基
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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 任务技能
任务技能
任务 技能
企业级卓越人才培养（信息类专业集群）