微信小程序开发图解案例教程电子教案 第3章 微信小程序核心技术

PAGE2PAGE第3章微信小程序核心技术课程名称微信小程序开发图解案例教程项目名称微信小程序核心技术任务名称微信小程序核心技术课时4项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．掌握WXML的使用方法。2．掌握WXSS样式语言的使用方法。3．掌握JS语言的使用方法。4．了解WXS语言的使用方法。能力目标能够独立完成简单的微信小程序的设计和开发工作。素质目标1．培养准确理解他人需求的能力。2．培养获取、处理和传播信息的能力。教学内容1.任务描述本章将系统讲解微信小程序的四项核心技术——WXML、WXSS、JS和WXS，帮助学生全面掌握从页面结构编写到样式渲染再到业务逻辑处理的完整开发技能链，为后续独立开发微信小程序奠定技术基础。2.任务展示与实现（1）演示“天气”微信小程序的数据绑定实现过程。（2）演示仿“香哈菜谱”微信小程序的完整开发流程，包括底部标签导航、宫格导航、列表渲染及模板引用。（3）学生动手操作：独立完成仿“香哈菜谱”微信小程序的核心功能开发。3.教师讲解本任务涉及的知识点（1）WXML的语法规则与核心功能（数据绑定、条件渲染、列表渲染、模板功能、引用功能、事件绑定、数据传递）。（2）WXSS的语法规则、尺寸单位rpx、样式导入、内联样式和选择器。（3）JS语言在微信小程序中的应用，包括数据类型与变量、运算符与控制流、函数与事件处理、异步编程、对象与数组操作、模块化开发及使用限制。（4）WXS语言的两种使用方式、模块化机制、变量与数据类型。4.任务小结总结WXML、WXSS、JS、WXS四项核心技术的定位与作用，回顾数据绑定、条件渲染、列表渲染、模板引用、rpx单位、模块化开发等关键知识点，强调四项技术在微信小程序开发中的协同工作方式。教学重点1.WXML的数据绑定、条件渲染、列表渲染、模板功能及事件绑定。2.WXSS的rpx尺寸单位与样式导入机制。3.JS语言在Page中的数据处理与事件处理。教学难点理解WXS语言与JS语言在微信小程序中的角色分工，掌握在何种场景下选择使用WXS进行数据处理，以及WXS模块化的引用机制。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.简述WXML中数据绑定的实现方式，并举例说明组件属性绑定、控制属性绑定和运算绑定的区别。2.简述WXSS中rpx单位的定义及其与px的换算关系。3.拓展练习：在仿“香哈菜谱”微信小程序的基础上，为香哈头条列表的每个项目添加点击事件，点击后跳转到一个新的详情页面，并在详情页面中显示对应菜谱的标题和图片。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章是微信小程序开发的核心技术章节，将系统讲解WXML、WXSS、JS和WXS四项技术。这四项技术分别对应页面结构、样式渲染、业务逻辑和脚本处理四个开发环节，是微信小程序开发者必须掌握的基本功。【目的】使学生明确本章的学习目标，理解四项核心技术在微信小程序开发中的定位与协作关系，掌握从页面布局编写到业务逻辑处理的完整技能链，为后续独立开发微信小程序做好准备。一、WXML页面结构语言介绍WXML的设计理念及其与HTML的区别，讲解选择WXML的四大原因——定制化需求、轻量级设计、安全性考虑和生态一体化。详细讲解WXML的语法规则（标签必须严格闭合、属性对大小写敏感），以及七项核心功能：数据绑定（组件属性绑定、控制属性绑定、关键字绑定、运算绑定），条件渲染（wx:if、wx:elif、wx:else及blockwx:if的使用），列表渲染（wx:for遍历数组、wx:for-item和wx:for-index自定义变量名、wx:key指定唯一标识符），模板功能（定义模板与使用模板实现代码复用），引用功能（import引用模板与include引用整体文件的区别），事件绑定（bind开头绑定非冒泡事件与catch开头绑定冒泡事件的区别，以及常见事件类型），数据传递（通过data-*属性在事件处理函数中获取传递的数据）。二、WXSS样式语言介绍WXSS的五大特点——轻量级、响应式像素rpx、样式作用域限制、支持组件化开发和动画效果。讲解WXSS的语法规则，包括选择器（标签选择器、类选择器、ID选择器、属性选择器）、样式属性与值、值的单位（px、rpx、%）、样式的继承与层叠。重点讲解rpx尺寸单位的概念（屏幕宽度固定为750rpx），以及在不同设备上的换算关系（如1rpx=0.5px=1物理像素）。介绍使用@import语句导入外联样式表的方法，使用style和class属性控制内联样式的方法，以及WXSS支持的六种选择器。三、JS语言讲解JS在微信小程序中的数据类型与变量（number、string、boolean、null、undefined、object、array，以及var、let、const的区别），运算符与控制流（算术、比较、逻辑运算符，以及if、switch、for、while语句），函数与事件处理（在Page中定义事件处理函数并通过bindtap绑定到组件），异步编程（Promise和async/await的使用方式），对象与数组操作（属性访问、元素访问），以及模块化开发（通过module.exports导出和require导入模块）。同时强调JS在微信小程序中的使用限制，包括不支持DOM操作、无window和document对象、不能使用eval函数、不能直接定义全局变量、页面独立需通过事件和缓存跨页面通信、网络请求必须使用HTTPS等。四、WXS语言讲解WXS的两种使用方式：第一种方式是将WXS代码嵌入WXML文件的<wxs>标签内处理逻辑；第二种方式是将WXS代码作为独立的.wxs文件并通过<wxs>标签引入。介绍WXS的模块化机制（通过module.exports暴露私有变量与函数，通过require引用其他WXS文件模块），以及WXS支持的八种数据类型（number、string、boolean、object、function、array、date、regexp）和变量命名规则。【任务一】开发“天气”微信小程序1.教师演示：创建weather项目，在index.wxml中完成页面布局（当前温度、最低最高温度、天气类型、城市、星期、风向），在index.js的data中提供天气数据，通过双花括号将data数据绑定到页面组件上，在index.wxss中为页面添加样式美化效果。2.学生动手：独立完成上述步骤，修改data中的天气数据观察页面实时变化，体会数据驱动的开发模式。【任务二】开发仿“香哈菜谱”微信小程序1.教师指导：带领学生逐步完成底部标签导航配置（在app.json中添加5个页面路径，配置tabBar属性及list数组），宫格导航布局（在cook.wxml中使用view组件实现四格导航，在cook.wxss中设置flex布局和间距），香哈头条初始化数据（在cook.js中创建initData函数模拟服务器数据，通过setData设值函数将数据赋给array数组），香哈头条列表渲染（在cook.wxml中使用wx:for循环和双花括号绑定数据，在cook.wxss中添加列表样式），模板引用（创建template.wxml文件定义cooks模板，使用import和is属性在cook.wxml中引用模板）。2.学生动手：独立完成仿“香哈菜谱”微信小程序的完整开发，包括配置底部标签导航、设计宫格导航、模拟服务器数据、渲染列表、创建并使用模板，最后在模拟器和真机上预览效果。【课堂总结】1.回顾WXML的七项核心功能：数据绑定、条件渲染、列表渲染、模板功能、引用功能、事件绑定、数据传递，及其在微信小程序页面开发中的应用场景。2.总结WXSS的rpx单位换算规则和样式导入机制，强调全局样式与局部样式的作用范围与覆盖关系。3.梳理JS在微信小程序中的数据处理流程——从data初始化到setData更新再到页面渲染，以及模块化开发的实现方式。4.明确WXS的定位：将部分逻辑从JS文件移到WXML文件中处理，用于在模板中进行数据计算和处理，提