《（本科）第3单元-微信小程序的JS文件ppt课件.ppt》由会员分享，可在线阅读，更多相关《（本科）第3单元-微信小程序的JS文件ppt课件.ppt（76页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：第3单元-微信小程序的JS文件教学资源可联系作者：实现技能目标实现技能目标：掌握JS变量定义掌握日期变量应用掌握数值型变量的运算学会If条件渲染学会列表渲染数组变量应用循环语句和if语句应用 前面学习了微信小程序项目的创建，知道了微信小程序每个页面文件一般由4个文件构成，这4文件的主文件名相同，以4种不同扩展名来区分，例如index.js、index.wxml、index.wxss、index.json。 .js文件就是微信小程序开发中的JS文件。在.js文件中开发者使用 JavaScript (简称JS)来开发业务逻辑以及调用小程序的 API 来完成业务需求。但是，严格的意义上来
2、说，小程序中 JavaScript 的与网页浏览器中的 JavaScript是不全相同的。要全面掌握小程序开发，类似于学习其他编程语言一样，必须掌握JS语言知识包括：多种类型变量的定义、语句语法、if条件语句、for循环语句等，还有许多其他常用语法、函数调用与定义等。 网页编程常见是采用HTML+CSS+JS的组合，其中HTML是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。WXML文件后缀名是 .wxml，语句在语法上同 HTML 非常相似。 WXML（We
3、iXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 在WXML文件应用数据绑定、列表渲染、条件渲染等可以高效地实现数据效果的呈现。 创建一个微信小程序，完成以下功能：设置项目标题为“变量的定义与更改”;定义变量a；在把变量a的值显示在页面上；在index.wxml创建控钮，点击按钮时，实现更改变量值的功能，如图3-1-1所示。步骤1、新建一个项目，删除index.js、index.wxml、index.wxss文件内的所有代码，打开app.json，设置项目标题为“变量的定义与更改”，如图3-1-1所示。图3-1-1步骤2、打开i
4、ndex.js，定义变量x的值,初始化x的值为45，如图3-1-2所示。图3-1-2图3-1-3步骤3、打开index.wxml，使用x把变量x的值显示在页面的组件中,如图3-1-3所示。步骤4、打开index.wxss，设置“.result”的样式属性,如图3-1-4所示。图3-1-4步骤5、打开index.js，定义函数add(),实现x变量增加1的功能，如图3-1-5所示图3-1-5步骤6、打开index.wxml，创建button组件，绑定add事件,即关联js文件中的函数add()，如图3-1-6所示。图3-1-6步骤7、在模拟器中，点击button按钮，数字实现增加1,如图3-1-
5、7所示。图3-1-71微信小程序中经常需要用到this.setData()，实现把变量值渲染到视图层。2setData函数主要用于将逻辑层数据发送到视图层，同时对应的改变的值。3setData函数的参数Object 以 key:value 的形式表示，将this.data中的 key 对应的值改变成 value。1、参照案例，增加按钮，实现点击按钮时变量减少1的功能，如图3-1-8所示。图3-1-8步骤1、增加按钮，绑定事件decr，如图3-1-9所示。图3-1-9步骤2、在js文件中创建decr()函数，实现变量减1的功能，如图3-1-10所示。图3-1-10步骤3、设置button的样式属
6、性，如图3-1-11所示。图3-1-112、参照案例，增加按钮，实现点击按钮时显示两个变量运算结果的功能，如图3-1-12所示。提示步骤：步骤1、定义变量y和s，如图3-1-12所示。图3-1-12步骤2、在页面上增加按钮,绑定函数sum,增加view组件，显示变量s，如图3-1-9所示。图3-1-13步骤3、创建函数sum()，实现变量x与变量y相加，把结果赋值给变量s的功能，如图3-1-14图所示。图3-1-14步骤4、在模拟器中，点击“求和”按钮，查看执行效果，如图3-1-15所示。图3-1-15任务任务2 日期变量日期变量【任务描述】 实现获取系统日期的功能设计。要求点击按钮时，能获取
7、系统当前日期，如图3-2-1所示。图3-2-1【任务实现】步骤1、新建小程序项目，打开index.js文件，创建run()函数，实现获取系统日期的功能，如图3-2-2所示。图3-2-2步骤2、打开index.wxml文件，创建button组件，绑定run事件；创建view组件，显示变量time的值，如图3-2-3所示。图3-2-31小程序 Date.parse()获取时间戳。2通过js读取目前日期、时间等信息。【拓展训练】 1、参照案例，完成获取系统日期，显示中文日期、以及星期几的功能，如图2-3-4所示。图3-2-4提示步骤：步骤1、打开index.js文件，升级run功能，实现显示星期几的
8、功能，如图3-2-5所示。图3-2-5步骤2、打开index.wxml文件，添加view组件，显示变量week，如图3-2-6所示。图3-2-6 2、参照案例，完成显示系统时间的功能，如图2-2-7所示。图3-2-7提示步骤：步骤1、打开index.js文件，创建run()函数，实现获取系统时间功能，如图3-2-8所示。图3-2-8步骤2、打开index.wxml文件，创建button组件，绑定run事件；创建view组件，显示时间，如图3-2-9所示。图3-2-9任务任务3 if3 if条件渲染条件渲染【任务描述】 使用if条件渲染，当变量的值变化时，判断数值是否为偶数，若是偶数，提示判断结
9、果“是偶数”，否则不显示提示信息。本任务学习掌握页面条件渲染，如图3-3-1所示。图3-3-1 使用if条件渲染，当变量的值变化时，判断数值是否为偶数，若是偶数，提示判断结果“是偶数”，否则不显示提示信息。本任务学习掌握页面条件渲染，如图3-3-1所示。图3-3-1步骤1、打开index.js文件，定义add()函数，执行变量x增加1，用if语句判断x除以2的余数是否等于0（则是否为偶数），用布尔型变量t记录判断结果，如图3-3-2所示。图3-3-2步骤2、打开index.wxml，创建view组件显示变量x值;创建组件，绑定add事件;创建组件，采用if条件渲染,条件是t为真时成立，如图3-
10、3-3所示。图3-3-3步骤3、在模拟器中，点击“增加”按钮，查看执行效果，如图3-3-4所示。图3-3-4index.js的主要代码：Page( data: x: 45, t:false , add() this.x = this.data.x; this.x+; if(this.x%2=0) this.t=true; else this.t=false this.setData( x: this.xt:this.t ) ,) 1. 本任务主要学习了使用条件渲染wx:if控制是否显示组件。 2. 在框架中，使用wx:if=condition来判断是否需要渲染该代码块，比如： True 3.
11、还可以用wx:elif与wx:else来添加else代码块，构成多个分支；比如：=80 优秀 =60 合格 不合格 1、参照案例，使用if条件渲染，当变量值变化时，判断数值是否为偶数，若是偶数，提示判断结果“是偶数”，否则提示结果“是奇数”，如图3-3-5所示。图3-3-5提示步骤：步骤1、打开index.wxml，使用wx:if和wx:else实现渲染，如图3-3-6所示。图3-3-62、参照案例，使用if条件渲染和图片，实现关、开的效果，如图3-3-7所示。图3-3-7步骤1、打开index.js，定义布尔型变量t，创建onoff()函数，实现变量t取反值的功能，如图3-3-8所示图3-3
12、-8步骤2、打开index.wxml，使用wx:if和wx:else实现条件渲染，根据条件显示off.png或on.png，如图3-3-9所示。图3-3-9步骤3、打开index.wxss，设置对齐方式和适当的图像大小，如图3-3-10所示。图3-3-10 使用列表渲染，按顺序列出多门课程的信息,信息包括第几门课程、以及课程名称。任务实现】 步骤1、打开index.wxml，使用wx:for实现列表渲染，显示列表信息是“语文”、“数学”、“英语”、“计算机”等课程名称，如图3-4-1所示。 图3-4-1步骤2、打开index.wxss，设置适当的背景色、宽度和显示方式，如图3-4-2所示。图3
13、-4-2 1本任务主要学习了使用列表渲染wx:for控制重复显示某组件。2在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。【拓展训练】1、参照案例，使用列表渲染，实现在课程名称后显示课程分数的功能。提示步骤：（1）打开index.js，定义数组变量score，存储四门课程的分数，如图3-4-3所示。图3-4-3（2）打开index.wxml，在列表中添加text组件，显示数组变量score的元素，效果如图3-4-4所示。图3-4-42、参照案例，使用列表渲染和if条件渲
14、染，实现根据分数评定成绩是否为优秀的功能。提示步骤：（1）打开index.wxml，在列表中，添加text组件，采用if条件渲染,实现分数大于等于90分，显示“优秀”的功能，如图3-4-5所示。图3-4-5（2）打开index.wxss，设置元素的显示方式、背景色、前景色，如图3-4-6所示。图3-4-6 定义数组变量，以存储数组信息，使用列表渲染，显示一个车站出发，能到达多个车站的信息，如图3-5-1所示。图3-5-1【任务实现】 步骤1、打开index.wxml文件，添加组件，绑定run事件；使用列表渲染，显示数组变量route的信息，如图3-5-2所示。图3-5-2步骤2、打开index
15、.js文件，定义变量citystart、数组变量list、空数组变量route等；定义run函数，实现数组元素与变量的字符串联拼接，并赋值给变量route，如图3-5-3所示。图3-5-3步骤3、在模拟器中，点击“查询”按钮，查看运行效果，如图3-5-4所示。图3-5-4 1本任务主要学习了数组变量的定义以及在前端页面显示数组变量的值。2通过wx:for将数组变量的值显示出来。1、参照案例，在JS文件定义数组变量，存储数组信息，采用for循环语句构造列表信息。在wxml文件使用列表渲染，显示一个车站出发，能到达多个车站的信息，如图3-5-5所示。图3-5-5（1）打开index.js文件，定义
16、变量citystart存储一个车站名、定义数组变量list存储多个车站名、数组变量route内容为空；定义run函数，使用for循环语句，实现数组元素与变量的字符拼接，并赋值给变量route，如图3-5-5所示。（2）保存项目、查看效果。2、参照案例，使用列表渲染，实现列表信息显示。、参照案例，使用列表渲染，实现列表信息显示。（1）步骤1、打开index.wxml，添加button组件，绑定run事件；使用列表渲染，显示数组变量myscorelist的信息，如图3-5-6所示。图3-5-6（2）步骤2、打开index.js文件，定义数组变量course存储课程名称，定义数组变量score存储分
17、数，定义空数组变量myscorelist，在模拟器中，点击“查询”按钮，查看运行结果，如图3-5-7所示。图3-5-73、参照案例，使用数组变量存储分数，求出总分和平均分的功能。(1)步骤1、打开index.wxml文件，添加button组件，绑定run事件；添加view组件，显示总分和平均分变量，如图3-5-8所示。图3-5-8(2)步骤2、打开index.js文件，自定义变量sum、ave存储总分与平均分，如图3-5-9所示。图3-5-9(3)步骤3、打开index.js，定义run()函数，使用for循环语句实现求出总分数的功能；总分存储于变量s,s除以数组的长度求出平均分，如图3-5-
18、10所示。图3-5-104、参照案例，使用数组变量存储分数，求出最高分的分数和课程名的功能。(1)步骤1、打开index.wxml文件，添加组件，绑定run事件；添加view组件，显示最高分和科目变量，如图3-5-11所示。图3-5-11(2)步骤2、打开index.js文件，自定义数组变量course存储课程名称，自定义数组变量score存储分数，如图3-5-12所示。图3-5-12(3)步骤3、打开index.js文件，定义run()函数，实现求出最大数的功能，如图3-5-13所示。图3-5-13 通过本单元学习，主要学会JS的变量的定义、语句语法、if条件语句、for循环语句等，以任务的形式，讲解了数字型变量的运算、日期型变量等应用。能帮助读者掌握JS程序设计的语法、掌握在WXML文件应用数据绑定、列表渲染、条件渲染等技能，可以完成数据的呈现，为实现小程序常见的功能开发打下坚实基础。