微信小程序开发案例:字体、文本样式与图片声音设置及思考题

2025-06-12
来源:万象资讯

2 案例-第一个微信小程序

3 案例-字体样式的设置

4 案例-文本样式设置

5 案例-图片与声音

【思考题】

(1)不注册小程序账号是否也可以开发微信小程序?

(2)微信小程序页面是由哪几个文件构成的?

(3)在哪些网站可以方便地查到文本的属性?

【参考书目及其他电子资源】

《微信小程序开发案例教程》一书,由杜春涛和付瑞平共同编著,并由我国的中国铁道出版社出版发行。

2、 (微信小程序开发官方文档)

3、 (HTML、CSS、等知识参考此网站)

《微信小程序开发从零开始》,一书由周文洁精心编写,并由清华大学出版社于2019年1月正式出版。

第二章 小程序编程基础

【教学目的与要求】

精心打造了14个教学案例,这些案例详细阐述了小程序开发所需掌握的HTML、CSS等核心知识,从而为学习者构建了坚实的开发基础。

【重点和难点】

HTML、CSS和中与微信小程序相关的基础知识。

【思政育人目标】

深刻领会并积极实践我国领导人提出的新时代中国特色社会主义思想以及社会主义核心价值观,确立正确的世界观、人生观和价值观,高扬主旋律,广泛传播积极向上的正能量。

增强对祖国的热爱之情,继承和发扬中华民族的优良文化传统,倡导以爱国为主旨的民族精神,以及以创新改革为灵魂的时代精神。

加强信念的坚定,培育对共产主义的宏伟愿景和中国特色社会主义的集体理想,决心承担起民族复兴的历史使命。

积极接受并认可新的发展观念,确立科学化的社会进步和人生成长的理念,深入理解和把握“创新、协调、绿色、开放、共享”这五大核心的发展思想。

培育专业的职业素养,强化职业道德观念,提升专业伦理意识,增强科学探索精神,以及锻造精益求精的工匠品质。

加强法治观念,提升法治观念、规则观念、程序观念、平等观念、权利观念以及法治思维方式,并坚守法治的信念。

【课程学习目标】

理解小程序开发的基本原理,涵盖HTML、CSS等核心内容,从而为后续的小程序开发工作打下坚实的基础。

【教学内容】

第一节 盒模型与页面布局

1 案例-盒模型

2 案例-flex页面布局

3 案例-导航与布局

4 案例-页面布局

5 案例-摄氏温度转华氏温度

第二节 流程控制结构和函数

1 案例-条件结构和数学函数

2 案例-学生成绩计算器

3 案例-循环求和计算器

4 案例-随机数求和

5 案例-计时器

6 案例-自动随机变化的三色旗

【思考题】

(1)盒模型中的内容超出模型尺寸时,需如何处理?

(2)盒模型的背景包括的范围吗?

(3)如何利用属性实现组件的水平居中对齐?

(4)如何求取100~200之间所有奇数或偶数的平方和?

(5)要产生100~200之间的随机整数,应该如何实现?

【参考书目及其他电子资源】

1、《微信小程序开发案例教程》,杜春涛, 付瑞平编著,中国铁道出版社出版

2、 (微信小程序开发官方文档)

3、 (HTML、CSS、等知识参考此网站)

4、《微信小程序开发零基础入门》,周文洁编著,清华大学出版社(2019.1)

第三章 小程序框架

【教学目的与要求】

精心打造了十个实例,用以展示小程序的核心结构、运行流程、数据与事件关联、模块化设计、条件式显示、列表数据展示、模板应用以及文件引用等方面的内容。

【重点和难点】

小程序的核心构成包括架构设计、数据处理与事件关联、条件式显示、列表数据展示、模板应用以及相关文件的引用。

【思政育人目标】

1、理解和践行国家领导人新时代中国特色社会主义思想和社会主义核心价值观,树立正确的世界观、人生观、价值观,弘扬主旋律,传播正能量。

2、强化爱国主义情怀,传承中华优秀传统文化,弘扬以爱国主义为核心的民族精神和以改革创新为核心的时代精神。

3、强化理想信念,树立共产主义远大理想和中国特色社会主义共同理想,立志肩负起民族复兴的时代重任。

4、认同新发展理念,树立科学的社会发展观和人生发展观,理解掌握“创新、协调、绿色、开放、共享”的五大发展理念。

5、培植专业职业素养,加强职业道德、专业伦理、科学精神和工匠精神教育。

6、强化法治理念,增强法治意识、规则意识、程序意识、平等意识、权利意识、法治思维,坚定法治信念。

【课程学习目标】

 微信小程序字体样式设置 _小程序开发字体居中_微信小程序开发案例教程

熟悉小程序的框架结构、运行流程、数据处理与事件关联、模块化设计、条件性展示、列表数据展示、模板运用以及文件引用等方面的知识。

【教学内容】

第一节 小程序基本架构

1 案例-小程序的基本架构

2 案例-小程序的执行顺序

3 案例-数据及事件绑定

4 案例-变量和函数的作用域及模块化

5 案例-条件渲染

第二节 渲染与引用

1 案例-成绩等级计算器

2 案例-列表渲染

3 案例-九九乘法表

4 案例-模板的定义及引用

5 案例-利用引用文件

【思考题】

一个小程序的页面通常由哪些文件组成?在这些文件里,哪些是不可或缺的,哪些是可以被移除的?

监听小程序初始化时触发的回调函数具体是哪一个?这个回调函数又是作为哪个函数的哪个参数来使用的呢?

如何确定用于初始化绑定数据的对象?又是通过哪个具体函数来对绑定数据进行调整?是否所有绑定数据都必须进行初始化处理?

(4)利用列表渲染对象时,和item分别表示什么?

(5)如何打印右上角、左上角和左下角三角形的九九乘法表?

在参考文件模板的基础上,是否能够借鉴文件中的其他部分内容?

【参考书目及其他电子资源】

1、《微信小程序开发案例教程》,杜春涛, 付瑞平编著,中国铁道出版社出版

2、 (微信小程序开发官方文档)

3、 (HTML、CSS、等知识参考此网站)

4、《微信小程序开发零基础入门》,周文洁编著,清华大学出版社(2019.1)

第四章 小程序组件

【教学目的与要求】

精心打造了十个实例,详细展示了小程序中各类组件的丰富功能及其应用技巧。其中涉及的组件范畴广泛,涵盖了视图容器、基本内容展示、表单交互、导航引导、多媒体处理、地图嵌入以及画布绘制等多个方面。

【重点和难点】

视图容器、基础内容、表单组件、导航组件、媒体组件。

【思政育人目标】

1、理解和践行国家领导人新时代中国特色社会主义思想和社会主义核心价值观,树立正确的世界观、人生观、价值观,弘扬主旋律,传播正能量。

2、强化爱国主义情怀,传承中华优秀传统文化,弘扬以爱国主义为核心的民族精神和以改革创新为核心的时代精神。

3、强化理想信念,树立共产主义远大理想和中国特色社会主义共同理想,立志肩负起民族复兴的时代重任。

4、认同新发展理念,树立科学的社会发展观和人生发展观,理解掌握“创新、协调、绿色、开放、共享”的五大发展理念。

5、培植专业职业素养,加强职业道德、专业伦理、科学精神和工匠精神教育。

6、强化法治理念,增强法治意识、规则意识、程序意识、平等意识、权利意识、法治思维,坚定法治信念。

【课程学习目标】

熟练了解小程序中各类组件的功能及其操作技巧。这些组件涵盖了视图容器、基本内容展示、表单输入、导航引导、多媒体展示、地图嵌入以及画布绘制等多个方面。

【教学内容】

第一节 小程序组件-1

1 案例-货币兑换

2 案例-三角形面积计算器

3 案例-设置字体样式和大小

4 案例-滑动条和颜色

5 案例-轮播图和开关选择器

第二节 小程序组件-2

1 案例-个人信息填写

2 案例-图片显示模式

3 案例-音频演示

4 案例-视频演示

5 案例-考试场次选择

【思考题】

在获取form组件内多个子组件的值时,应该如何取得这些子组件的数据呢?

(2)案例中text字符串数组中存放的值是什么?

(3)利用传统方法,如何通过组件动态改变颜色?

(4)哪几种图片显示模式能保持图片的纵横比?

(5)不使用组件,能否采用其他方法创建音频上下文?

本案例中生成随机色彩的方式与“自动随机变换的三色旗”里采用的色彩生成方式存在哪些不同之处?

【参考书目及其他电子资源】

1、《微信小程序开发案例教程》,杜春涛, 付瑞平编著,中国铁道出版社出版

2、 (微信小程序开发官方文档)

3、 (HTML、CSS、等知识参考此网站)

4、《微信小程序开发零基础入门》,周文洁编著,清华大学出版社(2019.1)

第五章 小程序API

【教学目的与要求】

微信小程序开发案例教程 _ 微信小程序字体样式设置 _小程序开发字体居中

精心打造了20个实例,用以展示小程序API函数的丰富功能和具体应用技巧。这些API函数涵盖了从基础系统信息、定时器,到路由、界面操作,再到数据缓存、媒体处理、定位服务,以及画布绘制和文件操作等多个方面。

【重点和难点】

在应用中,我们广泛运用了多种API函数,这些函数涵盖了从基础系统信息、定时器功能,到网络路由、用户界面操作,以及数据缓存管理和多媒体处理等多个方面。

【思政育人目标】

1、理解和践行国家领导人新时代中国特色社会主义思想和社会主义核心价值观,树立正确的世界观、人生观、价值观,弘扬主旋律,传播正能量。

2、强化爱国主义情怀,传承中华优秀传统文化,弘扬以爱国主义为核心的民族精神和以改革创新为核心的时代精神。

3、强化理想信念,树立共产主义远大理想和中国特色社会主义共同理想,立志肩负起民族复兴的时代重任。

4、认同新发展理念,树立科学的社会发展观和人生发展观,理解掌握“创新、协调、绿色、开放、共享”的五大发展理念。

5、培植专业职业素养,加强职业道德、专业伦理、科学精神和工匠精神教育。

6、强化法治理念,增强法治意识、规则意识、程序意识、平等意识、权利意识、法治思维,坚定法治信念。

【课程学习目标】

熟练了解并运用小程序中常见的API函数及其操作技巧。这些API函数涵盖了基础层面,如系统信息、定时器功能、路由跳转、界面交互、数据存储、媒体处理、地理位置服务、画布操作以及文件管理等各个方面。

【教学内容】

第一节 小程序API-1

1 案例-变脸游戏

2 案例-阶乘计算器

3 案例-基本绘图

4 案例-参数绘图

5 案例-改变图形

第二节 小程序API-2

1 案例-绘制正弦曲线

2 案例-自由绘图

3 案例-动画

4 案例-照相和摄像

5 案例-位置和地图

第三节 小程序API-3

1 案例-文件操作

2 案例-数据缓存

3 案例-网络状态

4 案例-传感器

5 案例-扫码与打电话

第四节 小程序API-4

1 案例-屏幕亮度、剪贴板和手机振动

2 案例-设备系统信息

3 案例-导航栏

4 案例-标签栏

5 案例-操作菜单

【思考题】

若将自定义的全局函数定义嵌入至Page()函数内部,需对函数的定义及调用过程做出相应的调整和更新。首先,需在Page()函数的内部声明该全局函数,并确保其定义符合局部函数的规范。其次,在调用该函数时,应直接在Page()函数的上下文中进行引用,无需使用全局作用域的调用方式。

(2)draw()函数和()函数有什么区别?

参数绘图与常规绘图有何不同?请以实例阐述参数绘图在现实生活中的具体应用效果。

(4)如何绘制一条余弦曲线?如何绘制其他任意类型的曲线?

(5)利用组件的data-*属性传递参数有什么好处?

在构建动画实例的过程中,若调整了诸如速度、方向以及持续时间等关键参数,动画的表现形式会有何等变化?

【参考书目及其他电子资源】

1、《微信小程序开发案例教程》,杜春涛, 付瑞平编著,中国铁道出版社出版

2、 (微信小程序开发官方文档)

3、 (HTML、CSS、等知识参考此网站)

4、《微信小程序开发零基础入门》,周文洁编著,清华大学出版社(2019.1)

第二部分 实验大纲

实验项目一  初识微信小程序

【实验目的】

熟悉如何注册小程序账号,浏览小程序内容,调整小程序的相关资料,获取并安装小程序的开发工具,以及学会如何新建并启动小程序的操作流程。

【实验学时】1

【设备套数】100

【每组人数】1

【实验类型】验证性实验

【实验要求】

了解如何注册小程序账户,学会浏览小程序,熟悉如何编辑小程序资料,以及学会下载并部署小程序开发工具。

【思政育人目标】

纸上得来终觉浅,绝知此事要躬行。

【实验过程】

分享