（本科）第3单元-微信小程序的JS文件课件.pptVIP

;微信小程序开发实用教程;实现技能目标： 掌握JS变量定义 掌握日期变量应用 掌握数值型变量的运算 学会If条件渲染 学会列表渲染 数组变量应用 循环语句和if语句应用; 前面学习了微信小程序项目的创建，知道了微信小程序每个页面文件一般由4个文件构成，这4文件的主文件名相同，以4种不同扩展名来区分，例如index.js、index.wxml、index.wxss、index.json。 ; .js文件就是微信小程序开发中的JS文件。在.js文件中开发者使用 JavaScript (简称JS)来开发业务逻辑以及调用小程序的 API 来完成业务需求。但是，严格的意义上来说，小程序中 JavaScript 的与网页浏览器中的 JavaScript是不全相同的。要全面掌握小程序开发，类似于学习其他编程语言一样，必须掌握JS语言知识包括：多种类型变量的定义、语句语法、if条件语句、for循环语句等，还有许多其他常用语法、函数调用与定义等。; 网页编程??见是采用HTML+CSS+JS的组合，其中HTML是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。WXML文件后缀名是 .wxml，语句在语法上同 HTML 非常相似。 WXML（WeiXin 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;任务实现;任务实现;任务实现;任务实现;步骤5、打开index.js，定义函数add(),实现x变量增加1的功能，如图3-1-5所示;步骤6、打开index.wxml，创建button组件，绑定add事件,即关联js文件中的函数add()，如图3-1-6所示。;任务实现;知识点拨;拓展训练;提示步骤：;步骤2、在js文件中创建decr()函数，实现变量减1的功能，如图3-1-10所示。;步骤3、设置button的样式属性，如图3-1-11所示。;2、参照案例，增加按钮，实现点击按钮时显示两个变量运算结果的功能，如图3-1-12所示。 提示步骤：;步骤2、在页面上增加按钮,绑定函数sum,增加view组件，显示变量s，如图3-1-9所示。;步骤3、创建函数sum()，实现变量x与变量y相加，把结果赋值给变量s的功能，如图3-1-14图所示。;步骤4、在模拟器中，点击“求和”按钮，查看执行效果，如图3-1-15所示。;任务2 日期变量;【任务实现】 步骤1、新建小程序项目，打开index.js文件，创建run()函数，实现获取系统日期的功能，如图3-2-2所示。;步骤2、打开index.wxml文件，创建button组件，绑定run事件；创建view组件，显示变量time的值，如图3-2-3所示。;知识点拨;【拓展训练】 1、参照案例，完成获取系统日期，显示中文日期、以及星期几的功能，如图2-3-4所示。;提示步骤： 步骤1、打开index.js文件，升级run功能，实现显示星期几的功能，如图3-2-5所示。;步骤2、打开index.wxml文件，添加view组件，显示变量week，如图3-2-6所示。; 2、参照案例，完成显示系统时间的功能，如图2-2-7所示。;提示步骤： 步骤1、打开index.js文件，创建run()函数，实现获取系统时间功能，如图3-2-8所示。;步骤2、打开index.wxml文件，创建button组件，绑定run事件；创建view组件，显示时间，如图3-2-9所示。;任务3 if条件渲染; 使用if条件渲染，当变量的值变化时，判断数值是否为偶数，若是偶数，提示判断结果“是偶数”，否则不显示提示信息。本任务学习掌握页面条件渲染，如图3-3-1所示。;任务实现;步骤2、打开index.wxml，创建view组件显示变量x值;创建button组件，绑定add事件;创建view组件，采用if条件渲染,条件是{{t}}为真时成立，如图3-3-3所示。;步骤3、在模拟器中，点