微信小程序开发图解案例教程电子教案 第4章 用微信小程序组件构建UI界面

PAGE2PAGE第1章微信小程序组件构建UI课程名称微信小程序开发图解案例教程项目名称用微信小程序组件构建UI任务名称用微信小程序组件构建UI课时4项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．掌握视图容器组件的使用方法。2．掌握基础内容组件的使用方法。3．掌握表单组件的使用方法。4．掌握导航组件的使用方法。5．掌握媒体组件的使用方法。能力目标1．能使用微信小程序组件进行页面布局。2．能使用微信小程序组件实现登录注册表单功能。素质目标1．培养自主学习和终身学习的能力。2．培养勇于探索未知领域的能力。教学内容1.任务描述本章将系统讲解微信小程序框架提供的五类UI组件——视图容器组件、基础内容组件、表单组件、导航组件和媒体组件，帮助学生理解组件的概念与使用方式，掌握利用组件构建微信小程序用户界面的方法，为后续开发复杂页面奠定基础。2.任务展示与实现（1）演示view组件、scroll-view组件、swiper组件的页面布局效果。（2）演示表单登录注册微信小程序的完整开发流程，包括登录页面、手机快速注册页面和企业用户注册页面的设计与实现。（3）学生动手操作：独立完成表单登录注册微信小程序的核心页面开发。3.教师讲解本任务涉及的知识点（1）视图容器组件的四种类型（view、scroll-view、swiper、movable-view）及其属性和使用场景。（2）基础内容组件的三种类型（icon、text、progress）及其属性配置。（3）表单组件的十种类型（button、checkbox、radio、input、textarea、label、picker、slider、switch、form）及其属性与事件绑定。（4）导航组件的五种跳转方式（navigator组件、wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack）及导航栏设置。（5）媒体组件的三种类型（image、video、camera）及其属性与使用方法。4.任务小结总结五类UI组件的分类与核心功能，回顾scroll-view的纵向与横向滚动实现、swiper的海报轮播与页签切换、表单组件的综合运用、导航组件的四种跳转方式及image组件的缩放与裁剪模式，强调组件化开发在微信小程序中的重要性。教学重点1.视图容器组件（scroll-view、swiper）的使用方法。2.表单组件（button、input、checkbox、radio、picker、form）的属性与事件绑定。3.导航组件的四种跳转方式及其适用场景。教学难点区分并正确使用navigator组件的四种open-type跳转方式（navigate、redirect、switchTab、reLaunch），理解其对应的页面栈变化机制及适用场景。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.简述swiper组件的常用属性及其在实现海报轮播效果时的配置方法。2.简述form组件的工作原理，说明如何通过bindsubmit事件获取表单中各组件的值。3.拓展练习：在表单登录注册微信小程序的基础上，为登录页面添加“找回密码”页面的跳转功能，使用navigator组件实现保留当前页跳转，并在新页面中设计手机号验证的输入框布局。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章将系统讲解微信小程序框架提供的五类UI组件，如同积木可以用来搭建各种建筑一样，UI组件是构建微信小程序用户界面的基本单元。掌握这些组件的使用方法，学生将能够独立完成微信小程序页面的布局与交互设计。【目的】使学生明确本章的学习目标，理解组件化开发的理念，掌握视图容器组件、基础内容组件、表单组件、导航组件和媒体组件的核心属性与使用方法，能够灵活组合各类组件构建功能丰富的微信小程序页面。一、视图容器组件讲解view组件的基本用法及其四个属性（hover-stop-propagation、hover-class、hover-start-time、hover-stay-time），演示使用flex布局实现水平方向和垂直方向的view排列效果。讲解scroll-view组件的纵向滚动和横向滚动实现方式，强调使用scroll-y和scroll-x属性分别控制滚动方向，介绍bindscrolltoupper、bindscrolltolower、bindscroll等事件及scroll-into-view和scroll-top属性的使用。讲解swiper组件的两种典型应用场景——海报轮播效果和页签切换效果，重点说明indicator-dots（指示点）、autoplay（自动播放）、interval（切换间隔）、duration（动画时长）、circular（衔接滑动）等属性的配置。讲解movable-view组件的使用方式，必须先定义movable-area可移动区域再定义movable-view子节点，以及direction、inertia、out-of-bounds、x、y等属性的作用。二、基础内容组件讲解icon组件的三种使用方式——绘制不同尺寸的图标（通过size属性）、绘制不同类型的图标（通过type属性设置success、info、warn、waiting、cancel、download、search、clear等类型）、绘制不同颜色的图标（通过color属性），演示各种图标效果。讲解text组件对转义符“\”的支持，包括换行“\n”和空格“\t”的使用。讲解progress组件的属性，包括percent（百分比）、show-info（显示百分比）、stroke-width（线条宽度）、color（颜色）、active（动画效果）等，演示不同样式的进度条效果。三、表单组件讲解button组件的三种类型（primary基本类型、default默认类型、warn警告类型）和两种大小（default和mini），以及disabled、loading、plain等属性，重点说明open-type属性的多种开放能力（contact客服、share转发、getPhoneNumber获取手机号、getUserInfo获取用户信息等）。讲解checkbox多项选择器和radio单项选择器的使用方法，通过checkbox-group和radio-group容器组件的bindchange事件获取选中项的value。讲解input单行输入框和textarea多行输入框的属性，包括type类型、password密码类型、placeholder占位符、maxlength最大长度、bindinput输入事件等。讲解label组件改进表单可用性的两种方式（不定义for属性时触发第一个组件事件，定义for属性时触发对应id组件事件）。讲解picker组件的六种滚动选择器（普通选择器mode=selector、时间选择器mode=time、日期选择器mode=date、多列选择器mode=multiSelector、省市区选择器mode=region、嵌入页面滚动选择器picker-view）及其各自属性。讲解slider滑动选择器的min、max、step、show-value等属性。讲解switch开关选择器的checked、type（switch/checkbox）、color等属性。讲解form表单的bindsubmit提交事件和bindreset重置事件，以及各表单组件通过name属性提交数据给JS处理的机制。四、导航组件与媒体组件讲解navigator组件的四种跳转方式——保留当前页跳转（open-type="navigate"）、关闭当前页跳转（open-type="redirect"）、跳转到tabBar页面（open-type="switchTab"）、关闭所有页面跳转（open-type="reLaunch"），以及对应的wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch、wx.navigateBackAPI的使用方法。讲解image组件的5种缩放模式（scaleToFill、aspectFit、aspectFill、widthFix、heightFix）和9种裁剪模式（top、bottom、center、left、right、topleft、topright、bottomleft、bottomright），以及lazy-load懒加载和show-menu-by-longpress长按菜单功能。讲解video组件的播放控制属性（controls、autoplay、loop、muted、danmu-btn、enable-danmu等）和bindplay、bindpause、bindended等事件。讲解camera组件的mode属性（normal相机模式、scanCode扫码模式）和device-position前置后置设置，以及拍照和扫码功能的实现方法【任务一】视图容器组件练习1.教师演示：创建Component项目，使用view组件配合flex布局实现水平和垂直排列效果，使用scroll-view组件实现纵向滚动和横向滚动（仿今日头条频道列表），使用swiper组件实现海报轮播效果（设置indicator-dots、autoplay、interval等属性）。2.学生动手：独立完成上述组件的页面布局，修改swiper组件的轮播图片和切换间隔，观察效果变化。【任务二】开发表单登录注册微信小程序1.教师指导：带领学生逐步完成登录页面设计（使用input组件设计账号密码输入框，通过bindinput事件控制“登录”按钮的disabled状态，使用navigator组件跳转到手机快速注册页面和企业用户注册页面，使用image组件添加微信QQ第三方登录图标），手机快速注册页面设计（设计手机号输入框和“同意注册协议”单选按钮，通过bindblur事件控制“下一步”按钮状态），企业用户注册页面设计（使用form组件包裹6个表单项——用户名、密码、企业全称、联系人姓名、手机号、短信验证码，使用switch组件控制密码显示，通过bindsubmit事件将表单数据提交到JS并保存到缓存中）。2.学生动手：独立完成三个页面的完整开发，在模拟器中测试登录按钮状态切换、页面跳转、表单提交等功能，使用“预览”功能在手机上体验实际效果。【课堂总结】1.回顾五类UI组件的分类：视图容器组件（view、scroll-view、swiper、movable-view）、基础内容组件（icon、text、progress）、表单组件（button、checkbox、radio、input、textarea、label、picker、slider、switch、form）、导航组件（navigator及相关API）、媒体组件（image、video、camera）。2.总结scroll-view组件实现纵向和横向滚动的关键属性配置，swiper组件实现海报轮播和页签切换的典型应用方式。3.梳理表单组件的数据提交流程——各组件通过name属性标识数据，form组件通过bindsubmit事件获取所有数据，but