《PHP程序设计与微信小程序案例教程》 课件2.5微信小程序JS.pptx

主讲人：谭丽君2.5微信小程序JS微信小程序开发

2.5.1.1JS变量、数据类型

1.变量JS是区分大小写的,变量名,函数,关键字都要区分大小写2.小程序变量定义var变量名=值在函数里面进行变量定义data:{变量名:值,数组名:[]，对象名：{}}在data里定义变量

数组数组[,,,]数组就是存放一组数据。读取数组第一个元素数组名[0]读取数组第二个元素数组名[1]

面向过程和面向对象的区别面向对象思想对象名.函数名()大象放冰箱：如果是用面向对象编程：冰箱对象.装大象函数（）面向过程思想第1步做什么第2步做什么第3步做什么大象放冰箱：如果是用面向过程编程：第1步：把冰箱门打开，第2步：把大象推进去，第3步：把冰箱门上。

对象书写格式、对象获取属性、对象调用函数的格式对象要调用函数格式对象名.函数名()对象书写格式对象{属性名：值，属性名：值，属性名：值}对象获取属性格式对象名.属性名()函数就是方法

2.5.1.1JS变量、数据类型

示例：新建一个小程序，创建xs页面，打开xs.js文件中，在data中name初始化值”刘红”，在onLoad函数中定义一个变量age=18，并打印输出这2个变量。pages:[pages/xs/xs,pages/index/index,pages/logs/logs],Page({data:{name:刘红},onLoad:function(options){varage=18console.log(this.data.name)console.log(age)},打印输出用this.data来访问Page页面中data里的数据打印输出结果app.jsonxs.js

2.数据类型stringnumberboolean数组对象

2.5.1.1JS变量、数据类型

数组名：[值，...值]对象名：{属性名:值，属性名:值}包括整数或小数或包围的truefalse2个值数组里面存放了一组数据。数组的第一个元素下标为0.对象由一对花括号包含。访问对象属性有2种方法：方法1：对象名.属性名;方法2：对象名[“属性名”]

JS函数书写格式JS函数书写有3种格式：1.标准格式函数名：function(){一段代码}2.匿名函数3.箭头函数

2.5.1.1JS变量、数据类型

示例：在xs.js文件data中初始化数组jzfp，并打印输出Page({data:{jzfp:[刘红,王小,李明]},onLoad:function(options){console.log(this.data.jzfp)},xs.js

2.5.1.1JS变量、数据类型

1示例：在xs.js中,在data中初始化对象xs，并打印输出Page({data:{xs:{name:小明,sex:男,age:12,height:180}},onLoad:function(options){console.log(this.data.xs)}xs.js

2.5.2微信小程序JS文件app.js文件是项目的入口文件。整个小程序必须有，并且只有一个App()，否则会出现错误。页面逻辑JS文件:文件名.js全局逻辑app.js对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

2.5.2微信小程序JS文件页面逻辑JS文件

2.5.2微信小程序JS文件页面逻辑JS文件1.Page方法：生成一个页面,必须有,否则会出错。2.Page中data对象，主要存放该页面的数据，Page({data:{}})

2.5.2微信小程序JS文件页面逻辑JS文件3.Page中函数（1）Page中小程序的生命周期函数在小程序中每个页面都存在着一条生命时间线，包括代码加载页面渲染显示到页面上(不同页面之前切换时，就会产生隐藏)--页面的销毁（关闭小程序），这样一个流程叫做生命周期。就像花的生命周期一样，从种子发芽开花结果实凋谢。页面生命周期函数及功能

2.5.2微信小程序JS文件页面逻辑JS文件3.Page中函数（2）Page中自定义函数函数名:function(参数){//函数内容}

2.5.2微信小程序JS文件4.事件事件绑定在组件上，当触发事件时，就会执行