微信小程序开发 5-2 教案-基础内容组件[2页]
微信小程序基础ppt课件
色彩搭配与字体选择建议
色彩搭配
色彩搭配应和谐、自然，避免过于刺 眼或混乱的颜色组合。
字体选择
字体选择应清晰易读，避免使用过于 花哨或难以阅读的字体。同时，应根 据内容选择合适的字体大小和样式， 以增强可读性和易用性。
05
微信小程序功能实现 方法与技巧
页面跳转逻辑实现方法介绍
页面路径规划
页面参数传递
基础内容包括文本、图片、图标 等，用于展示基本信息
导航包括navigator和tabBar，用 于页面跳转和底部导航栏
小程序页面由多个组件组成，包 括视图容器、基础内容、导航、 表单、底部tab等
表单包括button、form、input 等，用于收集用户输入和提交数 据
小程序数据绑定与事件处理机制
数据读取方式
使用wx.getStorage、wx.getStorageSync等方法读取存储的数据 。
数据同步问题
注意数据同步问题，确保在多设备或不同环境下数据01
了解微信小程序自定义组件开发流程，包括注册、使用、样式
、事件等。
自定义组件使用场景
02
一致性
设计风格和元素应保持一 致，避免给用户带来混乱 和困惑。
用户体验
设计应注重用户体验，提 供良好的交互和反馈，使 用户能够轻松完成任务。
界面布局与排版技巧分享
布局合理
界面布局应合理，使用户 能够快速找到所需信息。
排版清晰
文字、图片等元素应排版 清晰，避免拥挤和重叠。
图标与文字
图标与文字应清晰易懂， 避免使用过于复杂或难以 理解的图标。
跨平台使用：微信小程序可以在微信平台上使用，也可 以在其他平台上使用。
特点
占用存储空间小：无需下载可快速使用，减少用户手机 存储空间的占用。
《微信小程序开发》课程教学大纲
【课程内容及学时分布】
教学周
教学内容
学时
（对应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)
《微信小程序开发项目教程》教学教案（1）第1章微信小程序概述（a）“发现”界面（b）主界面下拉窗口（c）分享的小程序微信小程序入口1.1.2 微信小程序的功能（1）分享页功能：用户可以将小程序当前页面分享给好友，如分享北京到上海的火车票列表界面，用户打开时是这个页面的实时数据，而不需要再次启动微信小程序。
（2）分享对话功能：可以将对话分享给好友或者分享到微信群。
（3）线下扫码进入微信小程序功能：提示用户附近有哪些微信小程序可以使用，扫描二维码就可以使用微信小程序。
（4）挂起状态功能：例如，来电话可以先接电话，接完电话后可以继续使用微信小程序进行相关操作。
（5）消息通知功能：商户可以发送消息给接受过服务的用户，用户也可以使用微信小程序的客服功能联系商户。
（6）实时音视频录制播放功能：通过此功能可以随时随地进行直播或者录播。
（7）硬件连接功能：通过使用NFC（Near Field Communication，近距离无线通信）功能，可以把手机变成公交卡、门禁卡等进行便捷使用；通过Wi-Fi连接功能，进行网络连接。
（8）小游戏功能：微信小程序制作的“跳一跳”小游戏，让游戏大门从此打开，让用户知道小程序也可以制作小游戏。
（9）公众号关联功能：微信小程序可与公众号进行关联，公众号可关联不同主体的3个小程序，可关联同一主体的10个小程序，同一个小程序最多可关联3个公众号。
1.1.3 微信小程序的使用场景小程序有哪些适合的使用场景呢？在发布小程序的时候，要选择服务类目，通过这些服务类目，能知道小程序的使用场景。
服务类目分为个人服务类目和企业服务类目。
● 个人服务类目的小程序开发主体为个人，它的服务类目少一些、服务范围小一些，主要包括出行与交通、生活服务、餐饮、旅游、商业服务、快递业与邮政、教育、工具、体育等。
● 企业服务类目的小程序开发主体是企业，它的服务类目多一些、服务范围大一些，主要包括快递业与邮政、教育、医疗、政务民生、金融业、出行与交通、房地产、生活服务、IT科技、餐饮、旅游、时政信息、文娱、工具、电商平台、商家自营、商业服务、公益、社交、体育、汽车等。
小程序制作教学设计方案
一、教学目标1. 知识目标：- 理解小程序的基本概念、特点和应用场景。
- 掌握小程序的基本开发流程和常用技术。
2. 技能目标：- 能够使用微信小程序开发工具进行小程序的基本开发。
- 能够设计和实现一个简单的小程序，包括页面布局、数据交互和功能实现。
3. 情感目标：- 培养学生对编程的兴趣和热情。
- 增强学生的团队协作能力和创新意识。
二、教学内容1. 小程序概述- 小程序的定义、特点和应用场景。
- 小程序的发展历程和行业趋势。
2. 小程序开发环境搭建- 微信小程序开发工具的下载和安装。
- 开发环境的配置和基本操作。
3. 小程序页面开发- 页面布局的基本元素和属性。
- 页面间的跳转和导航。
4. 小程序数据交互- 数据绑定和事件处理。
- 网络请求和数据存储。
5. 小程序功能实现- 常用组件的使用和自定义组件的开发。
- 功能模块的设计和实现。
三、教学方法1. 讲授法：系统讲解小程序的基本概念、开发流程和技术要点。
2. 演示法：通过实际操作演示小程序的开发过程，让学生直观理解。
3. 实践法：引导学生动手实践，逐步完成小程序的开发任务。
4. 小组讨论法：鼓励学生分组讨论，共同解决开发过程中遇到的问题。
四、教学步骤1. 导入：通过案例引入，激发学生学习兴趣，介绍小程序的基本概念和特点。
2. 理论讲解：讲解小程序开发环境搭建、页面开发、数据交互和功能实现等基本知识。
3. 演示操作：教师现场演示小程序的开发过程，包括代码编写、页面布局和功能实现等。
4. 学生实践：学生分组进行小程序开发，教师巡回指导，解答学生在开发过程中遇到的问题。
5. 作品展示与评价：学生展示自己的作品，教师和学生共同评价，总结经验教训。
6. 总结与拓展：回顾本次课程的主要内容，布置课后作业，引导学生进行拓展学习。
五、教学评价1. 过程评价：关注学生在课程中的参与度、实践能力和团队协作能力。
2. 作品评价：评价学生完成的小程序作品的功能性、用户体验和创意性。
《微信小程序开发》第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个菜单，针对不同角色的用户提供了不同内容的帮助文档。
微信小程序实用教程教学大纲
教学大纲1.教学目的本课程可作为计算机科学与技术、软件工程相关本科专业的选修课，也可作为其它本科专业的选修课，或者其它专业低年级研究生的选修课。
亦可供对小程序感兴趣的读者自学使用。
本课程的教学目标是使学生了解小程序设计的总体原则和思路，掌握具体的实践方法，具备小程序开发初步能力，为学生今后从事相关领域的项目开发工作奠定坚实的基础。
具体来讲，本课程涉及的内容包括注册，使用开发者工具进行开发、调试、预览、发布，熟悉小程序架构的层次结构，应用小程序常用组件进行布局和样式设置，掌握小程序网络、媒体、界面等 API 的相关知识点，学习部分优秀的小程序案例。
2.教学要求总体上，本课程的教学应本着理论与实践相结合的原则，深入浅出，突出重点，在教师亲自演示讲解的同时，注意培养学生独立思考和动手能力。
在内容设计上，应以示例入手，逐步推进，详尽讲解教学任务的各个实现细节。
在实施方法上，应采取互动式教学方法，在教师演示教学任务的基础上，督促学生自行运行并分析实现代码。
在教学手段上，应结合板书、多媒体、网络资源等多种传授方法，提高学生兴趣。
在实验教学上，应促进学生对讲授知识的理解，开拓眼界，提升实践能力。
3.教学内容本课程内容共分为十六章，除去第十六章建议学生自学之外，教学内容共十五章。
结合教学经验和实际，给出参考学时如下：（一）准备工作（2学时，含1学时实践课）内容：小程序的特点和适用场景，注册小程序的步骤，小程序管理后台的基本操作，开发者工具的使用方法。
重点：小程序管理后台的基本操作，开发者工具的使用方法。
（二）初识小程序（2学时，含1学时实践课）内容：组成小程序的目录结构和文件，小程序配置文件和页面配置文件的使用方法，新建页面以及设置启动页面的方法，在真机上预览小程序的方法，发布小程序的流程，以及对小程序各阶段版本的管理。
《微信小程序实用教程》教学大纲重点：小程序的目录结构和文件，小程序配置文件和页面配置文件的使用方法，新建页面以及设置启动页面的方法。
《微信小程序企业开发实战》课程教学大纲
《微信小程序企业开发实战》课程教学大纲学分：3学分学时：45学时（其中：讲课学时：30 上机学时：15 ）适用专业：通识选修课、专业拓展课先修课程：计算机基础、计算机网络、HTML5+CSS3+JavaScript一、课程的性质与目标《微信小程序开发实战》是专注于微信小程序开发的Web前端教材，涉及微信小程序框架、文件配置、WXML语法、WXSS布局、WXS语法、页面组件、应用接口API、云开发模式、第三方组件的使用等。
通过本课程的学习，学生能够理解微信小程序的实质，掌握微信小程序开发的基本技能，快速高效的开发微信小程序。
提高学生对计算机科学与技术的兴趣，促进学生能在未来的学习和工作中，使用“计算机思维”来解决实际问题，全面提高学生的综合素质。
二、课程设计理念与思路课程设计理念：高等职业教育不仅注重对专业知识和技能的传授，也注重对学生综合素质的培养，不局限于个人选择的专业，有助于个人潜力能够得到最大限度的发挥。
在全球云计算和移动互联的产业背景下，在高等教育的通识教育中增加有关计算机技术基础知识与能力的课程，有助于非计算机专业大学生综合素质的提高。
课程设计思路：微信小程序企业开发实战作为一门选修课，让学生把一门程序设计语言掌握到实用的程度较有难度。
本课程并非简单介绍微信小程序开发的理论内容，而是将理论讲解与实际操作相结合，其中所涉及的大部分知识点适用于所有编程的基础知识，如变量、运算符、选择语句和标签概念等。
可潜移默化地培养学生程序化、系统化的思维模式，让学生能够使用逻辑思维解决问题。
同时，培养学生的自学能力。
软件技术的发展日新月异，教材不能做到和语言同步，互联网的存在为自学掌握一门技能提供了便捷，可以让学生自己分析问题、动手编程和，在此过程中，学生上网查阅相关资料，能够更新知识，并逐渐具备独立研究的能力。
三、教学条件要求操作系统：Windows 10开发工具：微信开发者工具四、课程的主要内容及基本要求第一章微信小程序简介第二章微信开发者工具第三章微信小程序起步第四章小程序的配置文件第五章 WXML语法基础第六章 WXSS样式处理第七章 WXS语法第八章小程序中的JavaScript第九章微信小程序核心组件第十章微信小程序核心 API第十一章微信小程序开放能力（可选）第十二章微信小程序云开发（可选）第十三章自定义组件与第三方 UI 组件库（可选）第十四章第十五章项目实战：电影之家小程序（可选）项目实战：美妆商城小程序（可选）第十六章五、学时分配注：可选章节未计入合计课时。
微信小程序开发图解案例教程03用微信小程序组件构建UI界面
hover-stay-time number 400
手指松开后点击态保留的时间。单位为ms
在WXML文件里使用view布局可渲染出界面内容，效果如图3.1所示。 具体代码如下（实例位置：源码\第3章\视图容器组件\3-1.wxml）。
3.1.1 view视图容器
1. <view class="section"> 2. <view class="section__title">水平方向布局：</view> 3. <view class="flex-wrp" style="display:flex;flex-direction:row;"> 4. <view class="flex-item bc_green" style="width:100px;height:100px;background- color:green;color:#ffffff;text-align:center;line-
13.
this.setData({ toView: order[i + 1] })
14.
break } }
15. },
16. tapMove: function(e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) }
8. lower: function(e) { console.log(e) },
9. scroll: function(e) { c tap: function(e) {
11. for (var i = 0; i<order.length; ++i) {
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基础内容组件包括icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件。
2、icon图标组件属性
3、text文本组件属性
4、rich-text富文本组件属性
5、progress进度条组件属性
（4）列举4种进度条的情况，包括进度条右侧显示百分比、线条宽度为20px的进度条、自定义颜色的进度条、带有动画效果的进度条。
第5章 小程序组件
任务5.2 基础内容组件
课时内容
基础内容பைடு நூலகம்件
课时
12
教学目标
了解什么是基础内容组件及其作用；
掌握基础内容组件分类；
掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属性与应用方法
教学重难点
掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属性与应用方法的属性与应用方法
教学设计
1.教学思路：介绍什么是基础内容组件及其作用，通过多媒体演示和实机操作讲解微信小程序icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属性与应用方法与实现；通过小程序实战巩固基础知识。
2.教学手段：多媒体+计算机
3.教学资料：教材、多媒体课件
教学内容
本任务主要介绍小程序基础内容组件共有4种:icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属性与应用。本节的学习目标：
(1)了解什么是基础内容组件及其作用；
(2)掌握基础内容组件分类；
(3)掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属性与应用方法
练习