小程序功能表单讲课教案

第9章莫凡商城支付功能及订单详情页设计9.5 项目实战：任务8—实现我的订单功能1．任务目标通过实现我的订单功能，来巩固订单列表动态渲染、订单状态页签切换的知识。

莫凡商城我的订单列表包含“待付款”列表、“待收货”列表、“已完成”列表和空列表，如图所示。

“待付款”列表“待收货”列表“已完成”列表空列表2．任务实施下面我们一起来实现莫凡商城我的订单功能。

（1）在app.json文件里添加我的订单页面路径“pages/myOrder/myOrder”。

（2）在myOrder.wxml页面文件里进行订单列表布局设计，示例代码如下。

<view class="content"><view class="type"><view class="{{currentT ab==0?'select':'default'}}" data-current="0" data-status="1" bindtap="switchNav">待付款</view><view class="{{currentT ab==1?'select':'default'}}" data-current="1" data-status="3" bindtap="switchNav">待收货</view><view class="{{currentT ab==2?'select':'default'}}" data-current="2" data-status="4" bindtap="switchNav">已完成</view></view><view class="items"><view class="hr"></view><swiper current="{{currentTab}}" style="height:1000px;"><swiper-item><block wx:for="{{orders}}"><view class="goods"><view class="title">莫凡商城</view><view class="line"></view><view class="good" bindtap="toPay" id="{{item.id}}"><view class="pic"><image src="{{item.listPic}}"></image></view><view class="goodInfo"><view class="name">{{item.goodsName}}</view><view class="price"><text class="count">共{{item.num}}件商品</text> ￥{{item.payAmount}}</view></view></view><view class="line"></view><view class="btn"><text bindtap="toPay" id="{{item.id}}">去支付</text><text bindtap="deleteOrder" id="{{item.id}}" data-status="1">删除订单</text></view><view class="line10"></view><view class="hr"></view></view></block><block wx:if="{{orders.length==0}}"><view class="gyg"><view><image src="/pages/images/icon/default.png"></image></view><view class="gygbtn" bindtap="toList">逛一逛</view></view></block></swiper-item><swiper-item><block wx:for="{{orders}}"><view class="goods" ><view class="title">莫凡商城</view><view class="line"></view><view class="good" bindtap="toBuy" id="{{item.goodsId}}"><view class="pic"><image src="{{item.listPic}}"></image></view><view class="goodInfo"><view class="name">{{item.goodsName}}</view><view class="price"><text class="count">共{{item.num}}件商品</text> ￥{{item.payAmount}}</view></view></view><view class="line"></view><view class="btn"><text bindtap="toBuy" id="{{item.goodsId}}">再次购买</text><text bindtap="deleteOrder" id="{{item.id}}" data-status="3">删除订单</text> </view><view class="line10"></view><view class="hr"></view></view></block><block wx:if="{{orders.length==0}}"><view class="gyg"><view><image src="/pages/images/icon/default.png"></image></view><view class="gygbtn" bindtap="toList">逛一逛</view></view></block></swiper-item><swiper-item><block wx:for="{{orders}}"><view class="goods"><view class="title">莫凡商城</view><view class="line"></view><view class="good" bindtap="toBuy" id="{{item.goodsId}}"><view class="pic"><image src="{{item.listPic}}"></image></view><view class="goodInfo"><view class="name">{{item.goodsName}}</view><view class="price"><text class="count">共{{item.num}}件商品</text> ￥{{item.payAmount}}</view></view></view><view class="line"></view><view class="btn"><text bindtap="toBuy" id="{{item.goodsId}}">再次购买</text><text bindtap="deleteOrder" id="{{item.id}}" data-status="4">删除订单</text> </view><view class="line10"></view><view class="hr"></view></view></block><block wx:if="{{orders.length==0}}"><view class="gyg"><view><image src="/pages/images/icon/default.png"></image></view><view class="gygbtn" bindtap="toList">逛一逛</view></view></block></swiper-item></swiper></view></view>（3）在myOrder.wxss样式文件里进行订单列表样式渲染，示例代码如下。

第3章莫凡商城小程序的项目结构示例代码如下。

<!--index.wxml--><view> {{ message }} </view>//index.jsPage({data: {message: '你好, 微信小程序'}})3.3.3 组件属性动态绑定数据组件属性动态绑定数据，是将*.js文件data对象里的数据绑定到小程序的组件上，示例代码如下。

<!--index.wxml--><view id="{{id}}"> </view>//index.jsPage({data: {id: 0}})3.3.4 控制属性动态绑定数据控制属性动态绑定数据是通过条件判断if语句来控制的，如果满足条件判断，则执行该语句，否则不执行，示例代码如下。

<!--index.wxml--><view wx:if="{{flag}}"> </view>//index.jsPage({data: {flag: true}})3.3.5 关键字动态绑定数据关键字动态绑定数据用于将组件的一些关键字绑定数据，如复选框组件，checked关键字如果等于true，则代表选中复选框，等于false则代表不选中复选框，示例代码如下。

<checkbox checked="{{false}}"> </checkbox>不要直接写checked="false"，否则其计算结果是一个字符串，转换成boolean类型后代表真值。

3.3.6 运算可以在{{}}内进行简单的运算，小程序支持以下几种方式的运算。

（1）三元运算，示例代码如下。

<view hidden="{{flag ? true : false}}"> Hidden </view>（2）数学运算，示例代码如下。

表单自动生成课程设计一、课程目标知识目标：1. 学生能理解表单自动生成的概念及其在信息技术中的应用。

2. 学生能够掌握利用公式和函数进行表单数据自动计算的方法。

3. 学生能够描述至少三种不同的表单自动生成工具或软件，并了解它们的基本功能。

技能目标：1. 学生能够运用所学知识，设计并实现一个简单的表单自动生成系统。

2. 学生能够使用相关工具或软件，完成表单数据的自动填充和计算。

3. 学生通过实践操作，提高问题解决能力和团队协作能力。

情感态度价值观目标：1. 学生培养对信息技术的兴趣，激发创新意识和探索精神。

2. 学生在学习过程中，树立正确的信息伦理观念，尊重和保护个人隐私。

3. 学生通过课程学习，认识到信息技术在现实生活中的重要作用，增强社会责任感。

课程性质：本课程为信息技术课程，以实践操作为主，结合理论讲解。

学生特点：学生为初中生，具备一定的信息技术基础，对新鲜事物充满好奇，喜欢动手实践。

教学要求：教师应注重理论与实践相结合，关注个体差异，激发学生的学习兴趣，培养学生的实际操作能力和创新思维。

教学过程中，注重引导学生将所学知识应用于实际生活，提高课程学习的实用价值。

通过课程目标的分解，使学生在学习过程中取得具体的学习成果，为后续教学设计和评估提供依据。

二、教学内容本课程教学内容主要包括以下三个方面：1. 表单自动生成基础知识：- 表单自动生成的概念及其应用场景- 常见表单元素及其功能- 表单数据收集与处理的基本方法2. 表单自动生成工具与软件：- 介绍至少三种表单自动生成工具或软件（如：问卷星、金数据等）- 分析这些工具或软件的特点、功能和使用方法- 比较不同工具或软件的优缺点，为实际应用选择合适的工具3. 表单自动生成实践操作：- 设计一个简单的表单自动生成系统，涵盖数据收集、处理和输出等环节- 应用公式和函数进行表单数据自动计算- 团队合作，完成一个具有实际应用价值的表单自动生成项目教学大纲安排：1. 知识准备：1课时，讲解表单自动生成基础知识，引导学生了解课程背景和目标。

第一章微信小程序入门任务1.1 微信小程序概述一、小程序简介现在，生活中随处都应用到微信小程序。

打开不同的微信小程序，如图1.1所示，点击右上角“…”可以进行转发、添加到我的小程序、取消等。

点击右上角“⊙”，则可以关闭微信小程序。

只要通过扫一扫或搜一搜，或者附近的小程序，你就可以看到5公里内所有的小程序。

同时，小程序完全不需要下载安装，也不需要卸载，更不会占用手机内存。

微信小程序也被简称为小程序，其英文名称是Mini Program。

它是一种存在于微信内部的轻量级应用程序。

微信研发团队在其官方网站上有一段关于微信小程序的介绍:“小程序是一种新的开放四、小程序的发展前景在未来的发展中，小程序将会更加方便、快捷，注册申请的渠道也更加快捷、方便，与此同时，还会进一步加强第三方平台的合作，如果能够开放第三方开发平台，那么它将为小程序的开发提供更大的后方支援。

并且随着小程序的日臻完善，小程序的开发者将能够获得更大的权限支持，由此可见，小程序在未来的发展空间中是相当巨大的，并且对于企业进行小程序制作的优势也将会进一步凸显出来。

小程序传统产业的代表，如图所示。

小程序可以使企业和用户更好地交流，也能够实现用户更好的转化，所以对企业来说小程序可以带来可观的利润和流量。

随着微信开放的功能的不断增多，那么一些小程序也会不断地完善自己，开放一些功能且不断得到匹配，这样也就提供了更多的接口能力，从而能够方便开发者进行深度地挖掘。

相信未来小程序也将具备更多的功能，那么企业所能实现的功能也会随着增加，这对于其未来发展有着至关重要的作用，同时也能推动微信的发展。

小程序互联网公司的代表，如图所示。

小程序将会与其他行业有更为友好的链接，小程序的发展是在微信的用户发展基础上而发展的，这样才能够用微信更好地结合，从而可以实现更多的功能。

因此，小程序在未来不仅方便企业与用户，也会方便企业与企业之间、用户与用户之间的交流。

微信小程序商城课程设计一、课程目标知识目标：1. 学生能理解微信小程序的基本概念，掌握商城类小程序的结构和功能模块；2. 学生能了解并运用网络通信、数据存储等基础知识，实现商品展示、购物车、订单管理等核心功能；3. 学生掌握微信小程序开发工具的使用，了解小程序的发布流程。

技能目标：1. 学生能运用HTML、CSS、JavaScript等编程语言，独立完成微信小程序商城的前端开发；2. 学生能运用微信小程序官方提供的API，实现后端功能，如数据交互、用户登录等；3. 学生具备团队协作能力，能与他人共同完成一个完整的微信小程序商城项目。

情感态度价值观目标：1. 学生通过学习，增强对编程和计算机科学的兴趣，提高创新意识和实践能力；2. 学生在项目实践中，培养解决问题的能力，增强自信心和成就感；3. 学生学会关注社会热点，了解电子商务的发展趋势，提升对网络营销的认识。

本课程针对高年级学生，结合学科特点和教学要求，旨在培养学生具备实际项目开发能力，提升编程技能和团队协作水平。

课程目标具体、可衡量，有助于学生和教师明确课程预期成果，并为后续的教学设计和评估提供依据。

二、教学内容1. 微信小程序基础知识：介绍微信小程序的概念、发展历程、特点及应用场景，使学生了解小程序在移动互联网领域的地位和作用。

教材章节：《微信小程序开发》第1章2. 微信小程序开发工具：讲解微信开发者工具的安装、使用方法，指导学生进行小程序项目的创建、调试和预览。

教材章节：《微信小程序开发》第2章3. 前端技术：教授HTML、CSS、JavaScript基础知识，重点讲解微信小程序的WXML、WXSS、JavaScript语法和组件。

教材章节：《微信小程序开发》第3-5章4. 后端技术：介绍微信小程序官方提供的API，如数据存储、网络通信、用户登录等，使学生掌握小程序后端功能实现方法。

教材章节：《微信小程序开发》第6-7章5. 商城功能模块：分析商城类小程序的需求，讲解商品展示、购物车、订单管理等核心功能的实现方法。

第1章认识微信小程序教学过程1.1微信小程序介绍1.1.1初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。

（1）在微信中的“发现”界面，可以找到小程序的入口，如图所示。

微信小程序入口（2）在微信主界面下拉，会看到用过的微信小程序。

（3）给好友或者在群里分享小程序。

小程序的界面和使用方法和App类似，下图所示是几个已发布的常用小程序界面。

常用微信小程序界面1.1.2微信小程序的功能（1）分享页功能。

（2）分享对话功能。

（3）线下扫码进入微信小程序功能。

（4）挂起状态功能。

（5）消息通知功能。

（6）实时音视频录制播放功能。

（7）硬件连接功能。

（8）小游戏功能。

（9）公众号关联功能。

（10）搜索查找功能。

（11）识别二维码功能。

1.1.3微信小程序的使用场景在发布小程序的时候，要选择服务类目。

通过这些服务类目，我们能知道小程序的使用场景。

服务类目分为个人服务类目和企业服务类目。

个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。

1.2微信小程序开发准备1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。

另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。

1.2.2开发准备Step1：在“微信公众平台”注册微信开发者账号。

单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。

在微信公众平台中，选择“小程序”→“小程序开发文档”，可以打开帮助文档界面，如图所示。

开发文档帮助文档在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。

第6章莫凡商城的注册、登录功能6.6 项目实战：任务3—实现登录功能1．任务目标通过实现莫凡商城的登录功能，学会登录功能要应用到的组件和API接口的使用方法，并能举一反三，实现其他类似的登录功能。

莫凡商城登录功能提供两种登录方式：账号密码登录和手机快捷登录。

通过页签的切换，可以选择使用哪种方式进行登录，如图所示。

账号密码登录手机快捷登录2．任务实施下面我们一起来实现莫凡商城登录功能。

（1）在app.json文件里添加注册页面路径“pages/login/login”。

（2）在login.json文件里配置导航标题，示例代码如下。

{"navigationBarTitleT ext": "登录"}（3）在login.wxml页面文件里进行登录表单布局，需要使用view容器组件、form表单组件、swiper滑块视图容器组件和button按钮组件，示例代码如下。

<form bindsubmit="formSubmit" bindreset="formReset"><view class="content"><view class="loginTitle"><view class="{{currentT ab==0?'select':'default'}}" data-current="0" bindtap="switchNav">账号密码登录</view><view class="{{currentT ab==1?'select':'default'}}" data-current="1" bindtap="switchNav">手机快捷登录</view></view><view class="hr"></view><swiper current="{{currentT ab}}"style="height:{{winHeight}}px"><swiper-item><view class="accountType"><view class="account"><view class="ac">账号</view><view class="ipt"><input name="loginName" focus="false" placeholder="请输入用户名" class= "placeholder-style" value='{{form_info}}'/></view></view><view class="hr"></view><view class="account"><view class="ac">密码</view><view class="ipt"><input name="loginPassword" type="text" placeholder="请输入密码" class= "placeholder-style" value='{{form_info}}'/></view></view><view class="hr"></view><view class="login"><button form-type="submit">登录</button><view class="fp" bindtap='toRegister'>没有账号？注册</view><view class="tip">{{tip}}</view></view></view></swiper-item><swiper-item><view class="mobileType"><view class="account"><view class="ac">手机号</view><view class="ipt"><input name="mobile" type="text" placeholder="仅支持中国大陆手机号" class= "placeholder-style" value='{{form_info}}' bindinput='getMobile'/><button class="btn" bindtap="getcode" wx:if="{{flag==true}}">{{yzmvalue}}</button><button class="btn" wx:else>{{timevalue}}s</button></view></view><view class="hr"></view><view class="account"><view class="ac">验证码</view><view class="ipt"><input name="verifyCode" type="text" placeholder="请输入验证码" class= "placeholder-style" value='{{verifyCode}}'/></view></view><view class="hr"></view><view class="login"><button form-type="submit">登录</button><view class="fp" bindtap='toRegister'>没有账号？注册</view><view class="tip">{{tip}}</view></view></view></swiper-item></swiper></view>（4）在login.wxss样式文件里对登录表单布局进行样式渲染，示例代码如下。

课程设计微信小程序一、课程目标知识目标：1. 学生能理解微信小程序的基本概念、功能特点及其在生活中的应用。

2. 学生能掌握微信小程序的开发流程，了解前端和后端的基本技术。

3. 学生能运用所学的编程知识，设计并实现一个简单的微信小程序。

技能目标：1. 学生具备使用微信开发者工具进行小程序开发的能力。

2. 学生能够运用编程语言（如JavaScript、WXML、WXSS等）进行小程序的前端设计。

3. 学生能够使用微信小程序API进行数据交互，实现前后端的数据连接。

情感态度价值观目标：1. 学生培养对编程的兴趣，增强对信息技术的热爱和求知欲。

2. 学生通过小组合作，培养团队协作精神和沟通能力。

3. 学生认识到科技对社会发展的作用，激发创新精神，提高社会责任感。

课程性质：本课程为信息技术学科，结合当前热门的微信小程序，旨在培养学生的编程兴趣，提高实践能力。

学生特点：六年级学生具备一定的计算机操作能力，对新事物充满好奇，喜欢挑战性任务。

教学要求：课程要求学生在掌握基础知识的同时，注重实践操作，通过小组合作完成一个小程序的设计与实现。

教学过程中，教师需关注学生的个体差异，提供有针对性的指导。

二、教学内容1. 微信小程序概述- 了解微信小程序的发展历程、应用场景和优势特点。

- 学习微信小程序的架构和开发环境。

2. 微信小程序开发基础- 掌握WXML、WXSS、JavaScript等编程语言的基本语法和应用。

- 学习小程序的组件、API的使用方法。

3. 微信小程序开发流程- 了解小程序的注册、配置和发布流程。

- 学习使用微信开发者工具进行小程序的调试、预览和发布。

4. 小程序项目实践- 分析项目需求，进行功能设计。

- 分组合作，进行前端和后端开发。

- 完成小程序的测试、优化和发布。

5. 教学内容的安排和进度- 微信小程序概述（1课时）- 微信小程序开发基础（4课时）- 微信小程序开发流程（2课时）- 小程序项目实践（5课时）教材章节关联：本教学内容与教材中“第三章 网页设计与制作”和“第四章 程序设计基础”相关，通过学习，学生可以掌握微信小程序的基本知识和开发技能。

第3章微信小程序概述任务3.17 小程序include引用文件
图3.41 利用include引用文件运行效果
四、任务实现
1.添加header.wxml文件并编写该文件中的代码
该文件用来显示一个页面的头部内容。

在该文件中添加如下代码，并利用header样式进行布局，header 样式在index.wxss中进行定义。

2.添加footer.wxml文件并编写该文件中的代码
该文件用来显示一个页面的尾部内容。

在该文件中添加如下代码，并使用footer样式布局，该样式在index.wxss中进行定义。

3.编写index.wxss文件代码
文件中定义了在header.wxml中使用的样式.header和在footer.wxml中使用的样式.footer。

header 样式采用了flex布局，布局方向flex-direction为row,水平对齐方式justify-content为均匀分布space-evenly。

4.编写index.wxml文件代码
文件头部利用include的src属性引用了header.wxml文件，文件尾部引用了footer.wxml文件，从而使index.wxml文件的头部和尾部分别显示了header.wxml和footer.wxml文件中的内容和样式。