小程序功能表单讲课教案

合集下载

微信小程序开发项目教程(慕课版)教案 (19)[14页]

第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样式文件里进行订单列表样式渲染，示例代码如下。

微信小程序开发项目教程(慕课版)教案 (4)[15页]

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

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

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

<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）数学运算，示例代码如下。

《微信小程序开发》课程教学大纲

情感目标：通过本课程的学习，使学生在掌握小程序项目开发基本流程的同时，了解最新的设计开发模式，项目分工等概念，为学生后期团队合作进行真实项目开发做出很好的铺垫。
【课程内容及学时分布】
教学周
教学内容
学时
（对应36/48/60总学时）
第1周
第1章小程序基础
本章主要学习微信小程序产生的背景、应用前景；了解小程序的定义、特征和“大程序”的含义；熟练掌握微信小程序开发者工具和开发者管理账户的操作；开发第一个微信小程序。
4/4/4
第10-11周
第9章交互接口及开放接口
本章主要学习了解微信小程序常见的交互接口和开放接口；熟练掌握wx.showToast()、wx.showLoading()、wx.showModal()和wx.showActionSheet()四个交互接口的应用；熟练掌握微信登录接口、微信支付接口和模板消息接口、获取用户信息接口、小程序间跳转接口、获取用户收货地址接口和SOTER指纹认证接口等开放接口的应用
2/4/6
第6-7周
第5章Javascript基础
本章主要学习熟练掌握Javascript语法格式；熟练掌握Javascript变量、数据类型、运算符、函数等基本概念；熟练掌握小程序事件函数中this和that的使用；掌握JavaScript在小程序中的交互场景应用。
2/4/5
第7-8周
第6章数据库操作
6/6/6
第13-14周
第11章数码产品类电商小程序项目
本章主要学习综合应用所学知识创建完整的电商小程序项目；熟练掌握与实现页面当中的交互；了解项目开发中的流程步骤。
0/0/4
第14-15周
第12章基于云开发的新闻小程序
本章主要学习综合应用所学知识开发完整新闻小程序项目熟练掌握云开发在项目中的应用了解项目开发中的软件工程方法学

表单自动生成课程设计

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

微信小程序开发 1-1 教案-微信小程序概述[4页]

第一章微信小程序入门任务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初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。

（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个菜单，针对不同角色的用户提供了不同内容的帮助文档。

微信小程序开发项目教程(慕课版)教案 (12)[11页]

第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、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

线下店铺
店铺名称、店铺封面、电话、店铺位置、店铺详情
首页公告
用户通知、开/关
店铺等级
等级添加、删除
商家入驻
商家申请，店铺名称、联系电话、商家信息
自营店铺
店铺名称、联系电话、店铺信息
会员提现
会员提现佣金
用户管理
用户列表
添加用户、删除、重置密码
用户组列表
个人资料
资料修改、账号、手机号码、qq、邮箱
商业分析
商品相册
相册管理、创建相册、上传图片、编辑/删除、相册名称
商品回收站
商品删除、商品恢复
干洗
在线预约
电话、姓名、预约时间
在线展示
展示位置、上传图片、价格
订单分配
添加分配店铺、
利润分配
比例设置、
商家入驻
商家名称、联系电话、商家logo上传、所在区域、商家坐标、商家地址、营业时间、商家实景、商家简介、资质证书
全部订单、待付款、代发货、待收货、已收货、已完成、已关闭、退款中、退款成功
营销
优惠券
优惠券添加、修改/删除/、详情、
满减送
活动信息、优惠设置、活动商品选择、启用/禁用
限时折扣
设置金额、启用/禁用
满额包邮
设置金额、启用/禁用
拼团
开团人数、成团有效时间、规则描述、报名时间、活动时间、店铺参加资质、商品参加资质
订单统计
订单偏号、实付金额、平台获取金额、下单时间、是否结算
售后分析
下单数量、下单金额
账务统计
账户记录
会员统计
会员新增统计走势图
会员管理
会员列表
会员名称、等级、积分、余额、注册/登入时间、状态、操作、导出数据、增加会员
积分明细
会员名称、类别、积分数量、备注、时间
余额明细
会员名称、类别、余额数量、备注、时间
LBS地图导航
附近店铺列表、人气店铺列表、选择区域（省、市）
导航到店铺、电话联系、店铺信息、信息聊天
第三方API接口对接
对接微信商户号
在线支付
微信支付
应用服务
独立域名
小程序功能表单
小程序功能表单
模块
功能
功能说明
备注
订单
订单列表
详情、备注、查看物流、修改价格/运费、
物流公司
添加物流公司、打印模板、运费模板、修改/删除
商家地址
收货地址、收件人、电话、邮编、
自提点管理
自提点添加、自提名称、地址、联系人、联系电话
、修改/删除
订单打印
打印出库单、打印发货单、打印快递单
订单管理
限时秒杀
活动描述、活动时间、报名时间、店铺资质要求、商品资质要求、
红包
红包添加、编辑/删除、启用/禁用
积分兑换
添加兑换商品、编辑兑换商品、删除
活动管理
营销活动列表、可报名活动、我报名参加的活动、全部、进行中、我报名的商品、已结束
预售商品
添加预售商品，预售金额，尾款金额、预售时间
大转盘
新建大转盘、名称、开始时间、结束时间、参加会员等级、消耗积分、参与次数、选择奖品、奖品数量、中奖概率、编辑、删除
会员等级
等级名称、升级条件、通用权益、折扣权益
会员提现
会员账号、手机号、提现流水号、提现银行、提现账户、账户姓名、提现金额、提现日期、状态、操作
积分管理
积分使用状态
佘额管理
余额使用状态
粉丝列表
粉丝头像、粉丝名称、地址、关注状态、关注时间、备注
预存款
会员预存购买记录
会员卡
会员名称、卡编号、办卡费、余额、积分、有效时间/办卡时间、状态、操作
储值卡
会员充值金额、充值记录、充值优惠
积分中心
积分信息
积分余额、积分记录、
热门礼品
积分商品
代金券
现金券
接囗设罝
对接网站、总平台
权限设置
管理员权限管理分权
操作日志
系统操作记录
清理瑷存
清除内存不需要的文件
帐号同步
账号可在pc端登入
会员协议
会员遵守商城规则
消息通知
交易提醒、活动通知、付款通知、
Seo设置
标题附加字、商城关键词、关键词描述、其他页头信息
店铺收入
提现、订单记录、提现记录、账号记录、营业额、待结算、已提现
销售概况
30天销售金额、下单人数、下单量、平均价格、下单商品数、平均客单价
商品分析
商品下单量排名、下单数量、下单金额
运营报告
下单金额统计表、下单量统计表
销售排行
商品销售排行榜
推广员排行
会员推广排行
店铺统计
店铺名称、营业额、入账总额、总收益、提现总额、当前余额、平台提成比率、平台收益、收益详情
商品
商品列表
商品上下架、排序、编辑、删除
商品发布
商品标题、价格、轮播图、详情页、
商品分类
分类添加、删除、排序
商品品牌
品牌添加、删除
商品标签
添加标签、删除
商品规格
添加规格、规格名称、规格属性、修改/删除、
供应商
添加供应商、供应商名称、姓名、电话、地址
商品品类
商、评价信息、评价时间
店铺
投投诉管理
举报人、举报类型、举报主题、举报时间、处理结果、操作、店铺名称、商品名称
店铺设置
店铺logo、店铺名称、店铺类型、店铺等级
店铺信息
电话、qq、营业时间、商家地址、SEO关键词、人气数、
促销版块
促销名称、选择商品、分类
广广告管理
广告位、类型、尺寸、增加广告位
导航管理
导航名称、链接地址所在位置