2025.1.9琶洲展馆微信公开课教育专场笔记《民办一贯制学校微信小程序课程的实践与探索》。

我们的学校设有小学、初中和高中三个学部。学校不仅重视学生的学业成绩，还特别注重培养学生解决实际问题的能力。作为民办学校，我们深知肩负着教育改革创新排头兵的责任。因此，“信息先试，率先创新”已写入学校的办学理念。

在微信小程序课程方面，小学低龄段主要开展创意设计课程；小学高龄段则通过兴趣课的形式，面向少部分学生开课；初中学段以常规课的形式面向全体学生开课。下面介绍一下授课规模。

初一年级有三个校区，共570人；初二年级有360人。此外，还有小学兴趣课的几十名同学参与。目前，小程序课程的覆盖人数已接近千人。

高中学段则采用竞赛课的形式，让学生针对微信小程序全球创新编程挑战赛开展以赛促学活动。好，这是我最近一个学期学生作品的发布情况。

目前，作品发布率已达63.8%。我预计寒假这个数据还会上升，因为学生们对小程序兴趣浓厚，不少学生都产出了多个作品。

这里展示的是基础类作品。对于十一二岁的孩子而言，能将想法变为现实，相当不错。这些作品大家或许并不陌生，不妨简单体验一下。还有进阶类作品。同学们开始尝试解决生活学习中遇到的实际问题。

在学生创作这两批小程序的过程中，我没有代劳写一行代码，全靠他们自己完成。遇到困难时，我会引导他们与AI对话，逐步完成作品。

我们的小程序课程总体框架严格遵循新课程标准。

我们将小程序课程对标互联网应用与创新，毕竟小程序本身就是极具前沿性的互联网应用与创新成果。

在学习小程序编程的过程中，我们发现，小程序的基本知识、编程过程、发布环节以及业务创意设计，能够极为完整地呈现重庆大学出版社初中信息科技七年级上下册各个知识单元的内容，我们只需对思路进行重构。

我们会分阶段、分步骤地将教材内容呈现在课堂上。这是课程初步计划，毕竟万事开头难，我也做了诸多探索。

小程序编程有个显著特点，几乎全是代码，这无形之中增加了入门难度。

经过多次尝试与反复迭代，我制定了开篇课时规划，可供大家参考，后续大家可自由发挥。下面我分享一下具体做法。

首先，我会降低学生对难度的预期，绝口不提HTML、CSS+JavaScript 等专业语言，只告诉学生微信开发工具与图形化编程极为相似。 我们进行了简单的总结。图形化编程主要涉及角色造型和逻辑代码。

同样，微信小程序编程也是如此。微信WXML文件相当于一个舞台，可以在上面放置许多角色和组件。

微信WXSS文件则是造型管理器，可用于调整其外观表现形式，如好不好看、大小等，都由WXSS控制。

而微信JS文件就是逻辑代码，就像图形化编程中，学生熟悉的“碰到边缘就反弹”这类逻辑，在微信小程序中就用JS文件来实现。

对于涉及的另一个JSON文件，我统一给学生提出要求，让大家暂时先不要动。

首先给同学们植入一个基本概念，即微信开发工具和图形化编程本质上没有区别，以此降低同学们对难度的预期。

接下来，我要兑现这个说法。具体怎么做呢在教学生使用微信开发工具的第一节课上，我在微信WXML文件中创建了非常容易理解的图层组件，让同学们创建几个。

然后，在WXSS文件中，对图层的背景颜色、字体大小等进行简单调整。我们通过实际行动完成了两件事。其一，学会了微信开发者工具的基本使用方法；其二，将老师之前提到的想法付诸实践。微信开发工具其实与通讯录十分接近，并不复杂。这样，我们就完成了第一步。

接下来是第二步，我们还需要呈现JS文件的作用，此时，我们选用了一个入门案例，希望它简单有趣且能让学生有代入感。最近我发现网上有个“点击后功德加1”的热点，于是让学生用小程序制作一个电子捕鱼的完整图文攻略。

学生刚开始接触代码编程会遇到一些困难，比如很多同学可能对输入法的控制不太熟练。在这种情况下，我有一个小体会：用图文攻略指导学生操作，他们更容易照着完成。如果使用视频教学，可能会出现学生眼睛学会了，但动手操作时却做不出来的问题。所以，很多时候我们会采用图文攻略的形式进行教学。而后这个程序，其实一节课几乎能保证100%的学生都能做出这个效果。我们会调整微信SS的样式，以及JS文件中的按钮，完整地呈现给学生。这个程序只有一二十行代码，学生能很快找到成就感。

同学们想法天马行空，提到“点击功德加1”，通过简单修改就能让功德一次加999等，加得更快，他们很喜欢玩。

当然，仅讲到这里还不够，我们要将其与课标内容相结合。我们会教学生解析代码，落实课标。以微信文件里的代码为例，解读小程序代码，进而探讨数据如何传输、如何在浏览器中呈现。

如此，就能将课标中的数据传输、呈现以及数据编码等内容展开讲解。在这个过程中，我认为同学们的核心素养主要体现在信息获取意识上。 同时，我认为非常重要的一点是，学生们起初看到电子木鱼这个事情并参与制作，但只是“外行看热闹”。此时，我们需要解析代码，向学生讲解每一行代码的具体作用，让他们从“外行”升级为“内行”，看到其中的门道。

所以，在电子木鱼制作完成后，我们一定要教学生解读代码。入门之后，我们将进入进阶课程的学习。

此时，我们要考虑解决实际问题。学校现有的课程安排中，艺术课和体育课属于选修课，而传统的课程安排方式较为落后。以往是学生找老师报名，老师统计后进行分配，这可能导致热门课程无法以公平、公正、公开的方式分配。比如击剑、射击、滑板等课程，学生们很喜欢，却常常供不应求。

如何解决这一问题呢？我们采用项目式情景教学，让学生开发一个抢课系统，以此作为进阶学习的内容。我们引导学生以项目式开发的思路思考，首先会遇到一个问题：既然要做抢课系统，谁能选课呢？自然是学生。那么，如何鉴别学生身份呢？毫无疑问，要用到账号和密码。由此，我们得出一个需求——制作一个登录页面。

在制作登录页面时，最基本的要求是排版和美化。学生在这个过程中，将学习使用微信开发者工具里的具体编程组件，以及进行基本样式的设置。 在这个过程中，学生因为要进行美化，所以会寻找资源。我们可以从这个角度展开教学。

互联网上的资源搜索引擎以及图片的使用都有规范，不能随意使用图片。大家可能都了解一些社会热点问题，有些企业就因版权问题产生过纠纷。此时，我们可以引导学生，让他们在实践中体现信息社会责任这一核心素养，学会尊重和保护知识产权。

完成基本界面后，下一步需求是实现登录功能。这一过程中有个重要转变：以往学生学习编程，无论是C、C++还是 Python，编写程序时往往无需过多考虑交互性，因为程序的使用者通常只有他们自己。

但现在开发小程序，就必须思考：用户是谁？不再是自己，而是要让作品具备良好的交互性。这就涉及到提示信息。左边的第一个视频是我们设计的，希望同学们能够参考。提示信息能让我们知晓每一步操作的情况，并获得反馈，从而提升程序的交互性。

此时，我们会引入信息安全的内容。不恰当的提示信息可能会导致敏感数据泄露。比如，一开始随意输入一个账号，系统提示账号不存在；当第二次输入“A”时，系统提示密码错误。这其实反映出一个问题，即管理员账号猜对了，这种不恰当的提示信息会造成敏感数据泄露。

我在此埋下伏笔，让学生了解这一情况。后续，我们会围绕隐私、信息安全展开讲解，毕竟账号密码就如同身份证信息，这是课标中明确的知识点。同时，我们还可以在此处讲解设置密码的四个技巧。

账号登录完成后，会出现一个问题：我们是以什么身份登录的？是管理员还是普通用户？若是以管理员身份登录，就会涉及选课数据、课程添加等问题，该如何向学生展示这些数据呢？在小程序编程技能方面，表单数据、缓存读写、循环渲染等内容都会在此处得到练习。 当学生完成这一步后，小程序基本就可以作为学生作品发布了。

学生作品发布后，我们会进一步和学生解读什么是小程序、什么是网站，以及小程序和网站之间的相关性和区别。我们将通过网页发布，结合域名、IP、互联网协议以及分层结构网络原理等内容，顺藤摸瓜般地展开讲解。

因为这些知识点之间的过渡十分自然，关联性很强。

同时，基于我信息安全相关的专业背景，我还将课标的教学提示展示了出来。为此，我为学生搭建了一个网页服务器靶场，让学生能亲身体验在网络安全过程中如何强化互联网安全意识，为学生提供了一个实操环境。

前面我们提到过不恰当的数据可能会暴露敏感信息，网站发布后，可能会面临安全问题，比如网站后台可能会遭到爆破攻击。此外，我们还需要进行密码存储。那么这个时候，自然会涉及云开发，我们会用到云函数，调用API。此时，我们可以拿出教材中云计算的相关内容，为同学们详细讲解。前面提到信息安全时埋下了伏笔，账号的敏感信息可能会暴露。这时，我们可以通过云数据库存储，对密码进行哈希加密后再存储。密码比对等操作，都可以在这个板块全面展开。

这是我的教学案例的两个版本。

第一个版本，所有数据都存储在本地缓存。大家扫码进入后，能看到我提供的账号和密码，不同身份登录会有不同效果。

教学进行到这里，对部分有能力或特别感兴趣的学生来说，他们可能有机会将自己的想法，通过我带领他们完成的这个过程进行演示。

若要继续完善课堂，将设计转化为可用产品，该怎么做呢？这就要用到后端云开发，让学生借助小程序平台，将自己的想法从教育版转化为现实。 正式发布，这个地方我当然还没有正式发布，只是做了一个教育版，用到了云开发，所有数据都存储在数据库里。

当完成这一步教学，学生体验到小程序编程发布的基本过程后，我们还会开展一个“以赛促学，用小程序改变世界”的活动。这时，同学们可能需要完整地与AI对话，运用所学编程知识制作一个小程序。

在这个过程中，我们着重强调在互联网中创新。不用说，作为一个项目式活动，这对我们整个核心素养体系非常有帮助。

接下来，我想跟大家分享一下关于小程序和人工智能的结合使用情况，在基础部分，我们实际上没有使用人工智能，就像刚才看到的案例那样，老师直接教学生怎么做。

在进阶部分，当讲到登录，不同身份登录后会有不同界面，我们开始讲解登录原理、进行数据组织和本地缓存时，老师会示范如何与AI对话。 老师会进行示范，教学生如何将AI给出的代码运用到课堂和项目中。在学生进行程序设计时，他们将能够完全自主地完成相关内容。

在使用AI时，我们需要有自己的思考。就像我刚才提到的，对于小程序编程，我们期望达到怎样的最佳状态呢？那就是让学生以项目经理的角色，去架构一个程序，清楚地知道事情该如何做好，然后让AI协助完成。

老师前期授课、学生掌握了一定小程序知识的基础上，老师已经带领学生完成了从0到1的构建。

若按照传统方式，学生可能会一步一步从2、3、4这样循序渐进地推进。但有了AI，我们可以从1直接跳到10。我们希望借助AI的力量，起到促进作用。

这里我要明确的是，AI是一种工具，具有促进作用。但我们必须强调，学生要夯实自身学习，比如掌握基本的小程序编程知识、学科知识以及信息基本素养等。

当学生自身实力强大后，我们的目标是不依赖AI。有AI时，我们能做得更快；没有AI，我们可能会慢一些、做得少一些，但可以逐步提升。我们既不依赖AI，也不迷信AI。截至目前，对于AI课程，作为教育从业者，我们仍需思考AI提供的内容是否真的毫无问题。

我们应保持审慎的态度，虽然不迷信AI，但要有鉴别AI结果的能力，也不必在AI上过度纠结。当AI无法解决某个问题时，我们能否尝试其他方法呢？这是我们的一个想法。

此前，我在课堂上使用AI进行了诸多尝试，但都会遇到一些问题。比如，有些AI平台需要用手机号登录，这显然不适合我们的学生；还有些AI平台虽无需手机号登录，但账号密码对于忘性较大的初中生来说是个难题。每节课都有好几名学生忘记账号密码，即便我在电脑里为他们备份了账号和密码，他们还是会忘，每节课查找账号密码都会耗费一些时间，这让我的体验很不好。

好在开发者工具中自带了AI助手，免去了登录环节，这对提升我的课堂效率很有帮助。去年12月，AI生成小程序的功能一上线，我就第一时间给学生更新并体验了。我们发现一个显著特点：和各种AI对话时，只有我们小程序自带的AI助手能给出反馈。

很多时候，向AI发布指令后，它会不由分说地给出一大堆代码，未必理解我们的真实意图。而我们的AI编程助手，会反馈它对需求的理解。

于是，我和它进行多轮对话，修正需求，AI生成的代码质量也显著提高。我觉得大家可以试用一下，这一点非常不错。

简单总结一下，用小程序开展常规课程教学时，我们的策略是以微信小程序作为贯穿七年级上下两册教材活动的线索，将小程序编程作为线索，实际围绕国家教材展开教学。以项目式驱动，以创意作品为导向，通过练习和比赛促进学习。 我们希望学生完成作品后，能参加小程序全球编程创新挑战赛。

我们的方法是，先将小程序融入H网站的单元，以此切入互联网应用与创新板块，再分阶段推进。这样有助于学生学习初中信息科技教材上相关单元的知识。

实际上，小程序不仅适用于互联网应用创新板块，在教材和课程标准里互联网与物联网的实践探索方面也大有用武之地。它易于请求网络，用户界面出色，设计高度自定义，无需下载APP就能跨平台快速推广，非常适合互联网板块。

开展物联网教学时，很多互联网平台的控制APP功能受限，而小程序能打破限制。比如我制作的八年级物联网教学教具，通过硬件模块和小程序控制端，能改变风扇转速。这是我的经验。 这是我的小程序二维码。受条件限制，今天我没能把硬件带过来。

我想给大家提供一种思路，小程序的发展空间很大。

在刚才的分享中，我提到了课程标准里的几个核心板块，比如互联网应用创新、人工智能，还有课本里的互联网内容，其实都可以和微信小程序关联起来。

我相信，微信小程序教育平台与信息科技课程的契合点也在于此。我希望能和大家共同探讨、共同进步，为教学带来更多新技能。