微信小程序基础课件汇总整本书电子教案全套课件完整版ppt最新教学教程最全课件

1、第1章 微信小程序基础微信小程序开发教程目录1.1 微信小程序介绍1.2 微信小程序开发工具的使用1.3 创建一个微信小程序项目第1章 微信小程序基础教学目标：本章将会介绍微信小程序的基本概念和特征。并针对开发环境的搭建和开发工具的使用详细讲解。1.1.1 什么是微信小程序微信小程序这个词可以分解为“微信”和“小程序”两部分：（1）其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。（2）“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载

2、。这就是所谓用完即走的原则。总之，微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 微信小程序发展历程微信小程序，简称小程序，英文名Mini Program，它是由微信之父张小龙在2017年1月9日正式发布的“轻”应用，它不需要下载安装专门的APP，只需要通过微信的载体，就可以轻松实现APP的功能。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。2016年1月9日，微信团队内部提出“应用号”设想；2016年1月11日，张小龙在微信公开课上阐述微信的四大价值观

3、，并首次提出“以服务为主”开发一个新的形态应用号；2016年9月22日，微信公众平台对外发送“小程序”内测邀请，首批内测名额200个；2016年11月3日，微信小程序对外开放公测，开发者可以登录微信公众平台申请，开发完成后可以提交审核，但公测期间不能发布；2016年12月28日，张小龙在微信公开课上第一次完整阐述了小程序，并明确小程序在微信没有入口、没有小程序商店、没有订阅关系、不能推送消息、可以分享到聊天和群等业界关心的问题；2016年12月30日，微信公众平台对外公告，上线的微信小程序最多可以生成10000个带参数的二维码；2017年1月9日，微信小程序正式上线。1.1.1 什么是微信小程

4、序微信小程序拥有大量的微信用户群体。小程序和公众号一样背靠微信，本身自带流量，而且微信小程序的入口多；在微信中通过搜索关键字、扫描二维码、群分享、好友分享等途径来实现打开一个微信小程序。微信小程序可以开发游戏，即微信小游戏，它是微信小程序的一个类目，使用相同的开发工具开发。1.1.2 注册开发者账号在创建自己的微信小程序之前，需要注册小程序账号，这样才能进行代码开发和提交工作。其注册步骤如下：（1）使用浏览器打开微信公众平台网站，如图1-1所示，单击右上角“立即注册”链接进行注册。微信公众平台微信公众平台是腾讯在微信APP内推出的针对个人、企业和组织提供业务服务与用户管理能力的全新服务平台，微

5、信公众平台的应用类型包括：服务号订阅号小程序企业微信微信公众号是应用者在微信公众平台注册的一个账号，账号开通后，就可以在微信公众号里发视频、图片、文字等推销商品或分享生活经验等。通常所说的微信公众号包括服务号和订阅号。微信公众平台1订阅号订阅号是公众平台的一种账号类型，旨在为媒体和个人提供一种新的信息传播方式，主要偏向为用户提供资讯、消息（类似报纸杂志）。订阅号适用于个人、媒体、企业、政府或其他组织，认证前后每天可群发1条消息。其展现效果如图所示。发给订阅用户（粉丝）的消息，将会显示在对方的“订阅号消息”文件夹中。如果想用公众平台简单发发消息，做宣传推广服务，建议选择订阅号。微信公众平台2服务

6、号服务号是公众平台的一种账号类型，旨在为企业和组织提供更强大的业务服务与用户管理能力，大多为用户提供服务类交互（功能类似12315、114，提供服务查询）。服务号适用于媒体、企业、政府或其他组织，认证前后每个月内都可以发送4条消息。其展现效果如图所示。发给订阅用户（粉丝）的消息，会显示在对方的聊天列表中。如果想用公众平台进行商品销售，建议选择服务号，后续可认证再申请微信支付商户。微信公众平台3企业微信企业微信是一个全平台企业办公工具，它提供与微信一致的沟通体验，为企业员工提供最基础和最实用的办公服务，并加入贴合办公场景的特色功能、轻OA工具，合理化区分工作与生活，提升工作效率。2018年6月2

7、9日企业微信2.0版本发布，正式与企业号合并。其展现效果如图所示微信公众平台4小程序小程序是一种不需要下载安装即可运行在微信环境中的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可。简单说，就是把手机上的APP搬到微信里面，不需要下载安装就可以直接使用。用户可以在微信的“发现”栏找到“小程序”的入口，从该入口可以打开需要的小程序1.1.2 注册开发者账号（2）根据图1-2中页面提示，在选择注册微信公众平台的账号类型为“小程序”，即可开始账号注册。（3）小程序注册页面包含3个填写页面，即帐号信息，邮箱激活、信息登记。如图1-3所示，完成注册后可以使用刚才的注册账号登录进入小程序管理

8、页面，如图1-4所示，可以进行小程序信息完善和管理工作。例如填写小程序基本信息，包括名称、头像、介绍及服务范围等。1.2 微信小程序开发工具的使用获取微信小程序AppID登录，就可以在微信小程序管理页面的“开发”“开发设置”中，查看到微信小程序的AppID，如图1-4所示。注意不可直接使用服务号或订阅号的AppID。安装微信开发者工具1.2 微信小程序开发工具的使用获取微信小程序AppID微信开发者工具官方下载地址：/miniprogram/dev/devtools/download.html。安装微信开发者工具1.2 微信小程序开发工具的使用创建小程序项目成功后，进入如图1.16所示的微信开

9、发者工具主界面。开发者工具主界面，从上到下，从左到右，分别为包含菜单栏、工具栏、模拟器窗口、编辑器窗口（含目录结构窗口和代码窗口）和调试器窗口。1.2 微信小程序开发工具的使用微信小程序发布流程完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。（1）预览单击开发者工具顶部操作栏的预览按钮，会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。（2）上传代码单击开发者工具菜单的“工具”“上传”命令，填写版本号以及项目备注，上传成功之后，登录小程序管理后台，在“管理”“版本管理”就可以找到刚提交上传的版本了。（3）可以将这个

10、版本设置“体验版”或者“提交审核”。（4）发布 审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录小程序管理后台，在“开发管理”“审核版本”中可以看到通过审核的版本。选择单击发布，即可发布小程序。（5）运营数据 登录小程序管理后台“统计”，单击相应的tab选项卡可以看到相关的数据。1.3 创建一个微信小程序项目启动微信开发者工具创建一个微信小程序项目，单击菜单界面“项目”“新建项目”，如图1-8中选择小程序项目类型为“小程序”，同时填写项目名称（如井字棋）、项目文件存放的路径和APPID。其中APPID就是用户注册时的小程序ID，见1.2.1节。如果没有APPID，可以使用测试号

11、。但发布时需要使用正式的小程序ID。小程序项目类型为“小程序”“小游戏”“代码片段”1.3 创建一个微信小程序项目小程序项目类型为“小程序”“小游戏”“代码片段”其中“代码片段”是一种可分享的小项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题等等。分享代码片段会得到一个链接，所有拥有此分享链接的人可以在工具中导入此代码片段。他们和普通“小程序”项目一样可以直接运行，主要区别在于代码片段体积小且可以被分享。“小游戏”是小程序的一个类目，小游戏是微信开放给小程序的更多的能力，让小程序开发者有了开发游戏的能力。“小游戏”开发将在第8章学习。初学者这里选择小程序项目类

12、型为“小程序”。1.3 创建一个微信小程序项目官方默认的小程序项目的目录结构及文件如图所示，根目录下app.js、app,json、app.wxss和project.config.json四个文件的作用分别是用于处理小程序的业务逻辑、对小程序的页面路径等相关属性进行全局配置、定义小程序页面的全局样式和保存小程序项目的配置信息。本章小结本章介绍了微信平台的订阅号、服务号、企业微信和小程序的应用场景，详细阐述了小程序的基本架构和特性，介绍了小程序开发工具的安装使用方法和创建小程序的步骤，为读者后续的微信小程序开发打下了基础。第2章 JavaScript语法基础微信小程序开发教程目录2.1 在HTM

13、L中使用JavaScript语言2.2 基本语法2.3 常用控制语句2.3.1 选择结构语句2.3.2 循环结构语句2.4 函数2.5 JavaScript面向对象程序设计2.6 JavaScript内置对象2.7 ES6简介第2章 JavaScript语法基础教学目标：本章将会介绍JavaScript的核心语法。掌握JavaScript的面向对象编程思想以及有关对象的基本概念初步掌握创建和使用自定义的类和对象。了解ES6的语法。2.1 JavaScript语言概述JavaScript主要用于以下三个领域：浏览器：得到所有浏览器的支持，只要有网页的地方就有JavaScript。服务器：借助no

14、de.js运行环境，JavaScript已经成为很多开发者进行后端开发的选择之一。微信小程序：小程序逻辑开发的语言。标准ECMAScript通常缩写为ES。在微信小程序中通常使用ES5和ES6版本。 微信小程序2.1.2 运行JavaScript语言1在浏览器中运行在HTML文件中使用JavaScript脚本时，JavaScript代码需要出现在和之间。【例2-1】一个简单的在HTML文件中使用JavaScript脚本实例。另外一种插入 JavaScript程序的方法是把 JavaScript 代码写到一个.js文件当中，然后在HTML文件中引用该js文件，方法如下：2.1.2 运行JavaS

15、cript语言JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。注意与Java的区别，Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的解释器，它可以通过解释器实现独立于某个特定的平台编译代码的束缚。2.1.2 运行JavaScript语言2在服务器中运行搭建node运行环境后，通过命令行执行JS文件。例如：node output.js3在微信小程序中运行在微信小程序中，JavaScript需要单独保存在JS文件中，即外联式。小程序框架对此进行了优化，只要按目录规范保证J

16、S文件与WXML文件同名，则无须使用引入即可使用。在微信开发工具中，单击console选项卡可以查看JS代码文件中console.log()输出的调试信息。例如： var iNum = 10; iNum *= 2; console.log(iNum);console选项卡例如： var iNum = 10; iNum *= 2; console.log(iNum);2.2 基本语法2.2.1 数据类型JavaScript包含下面5种原始数据类型。1Undefined ：即为未定义类型，用于不存在或者没有被赋初始值的变量或对象的属性2Null ： 作用是表明数据空缺的值。一般将Undefined

17、型和Null 型等同对待。3Boolean ：取值为ture 或false，分别表示逻辑真和假4String：字符型数据。JavaScript不区分单个字符和字符串。用双引号或单引号引起来。var nameA = Tom;var nameB = Tom;5Number：即为数值型数据，包括整数型和浮点型。var myDataA=8;var myDataB=6.3;JavaScript脚本语言除了支持上述基本数据类型外，也支持组合类型，如数组Array和对象Object等。2.2 基本语法2.2.2 常量和变量1常量常量是内存中用于保存固定值的单元，在程序中常量的值不能发生改变。2变量变量是内存

18、中命名的存储位置，可以在程序中设置和修改变量的值。在JavaScript中，可以使用var关键字声明变量。2.2.3 注释JavaScript支持2种类型的注释字符。1/2/* . */2.2 基本语法2.2.4 运算符和表达式1算术运算符算术运算符可以实现数学运行，包括加（+）、减（-）、乘（*）、除（/）和求余（%）。2赋值运算符JavaScript 脚本语言的赋值运算符包含“ =”、 “ +=”、 “=”、 “ *=”、 “ /=”、 “ %=”、“ &=”、“ =”等，如表 2-1所示。3关系运算符JavaScript 脚本语言中用于比较两个数据的运算符称为比较运算符，包括“ = =”

19、、“ !=”、“”、“”、“=”等，其具体作用见表2-2所示。4逻辑运算符JavaScript 脚本语言的逻辑运算符包括 “ &”、“ |”和“ !”等，用于两个逻辑型数据之间的操作，返回值的数据类型为布尔型。逻辑运算符的功能如表2-3所示。2.2 基本语法2.2.4 运算符和表达式5位运算符位移运算符用于将目标数据（二进制形式）往指定方向移动指定的位数。JavaScript 脚本语言支持“”和“”等位移运算符，其具体作用如见表2-4：6条件运算符在 JavaScript 脚本语言中，“? ：”运算符用于创建条件分支。ab？a:b7逗号运算符使用逗号运算符可以在一条语句中执行多个运算，例如：v

20、ar iNum1 = 1, iNum = 2, iNum3 = 3;8typeof运算符typeof 运算符用于表明操作数的数据类型，返回数值类型为一个字符串。2.3 常用控制语句2.3.1 选择结构语句 1if语句 2if.else.语句2.3 常用控制语句3if.else ifelse语句【例2-3】下面是一个显示当前系统日期的JavaScript代码，其中使用到if.else ifelse语句。下面是一个显示当前系统日期的JavaScript代码/显示当前系统日期 d=new Date(); console.log(今天是); if(d.getDay()=1) console.log(星

21、期一); else if(d.getDay()=2) console.log(星期二); else if(d.getDay()=3) console.log(星期三); else if(d.getDay()=4) console.log(星期四); else if(d.getDay()=5) console.log(星期五); else if(d.getDay()=6) console.log(星期六); else console.log(星期日); 2.3 常用控制语句4switch语句 switch(表达式) case 值1: 语句块1 break; case 值2: 语句块2 break

22、; case 值n: 语句块n break; default: 语句块n+1 【例2-5】将例2-4的按分数输出其等级使用switch语句实现。按分数输出其等级 /使用switch语句实现按分数输出其等级 var MyScore = 89; /请输入成绩 score =parseInt(MyScore/10) / parseInt取整 switch(score/10) case 10: case 9: console.log(优); break; case 8: console.log(良); break; case 7: console.log(中); break; case 6: cons

23、ole.log(及格); break; default: console.log (不及格); if.else ifelse语句实现按分数输出其等级var score = 89; /请输入成绩 if (score = 90) console.log(优);else if (score = 80 & score= 70) console.log(中);else if (score = 60) console.log(及格);else console.log (不及格);2.3 常用控制语句2.3.2 循环结构语句1 while语句 while语句的语法格式为：while (表达式) 循环体语句【

24、例2-6】用while循环来计算1+2+3 . +98+99+100的值。/计算1+2+3 . +98+99+100的值var total=0;var i=1;while(i=100) total+=i; i+;console.log(total);2.3 常用控制语句2.3.2 循环结构语句2dowhile语句do-while语句的语法格式如下：do 循环体语句 while (表达式)；【例2-7】用dowhile循环来计算1+2+3 . +98+99+100的值。 /计算1+2+3 . +98+99+100的值 var total=0; var i=1; do total+=i; i+;

25、while(i=100); console.log(total);2.3 常用控制语句3for语句 for 循环语句是循环结构语句，按照指定的循环次数，循环执行循环体内语句（或语句块），其基本结构如下：for(表达式1;表达式2;表达式3) 循环体语句【例2-8】用for循环来计算1+2+3 . +98+99+100的值。 /计算1+2+3 . +98+99+100的值var total=0;for(var i=1; i=100; i+) total+=i;console.log(total);2.3 常用控制语句4continue语句continue语句的一般格式为：continue;该语句

26、只能用在循环结构中。当在循环结构中遇到continue语句时，则跳过continue语句后的其他语句，结束本次循环，并转去判断循环控制条件，以决定是否进行下一次循环。5break语句break语句的一般格式为：break;该语句只能用于两种情况：（1）用在switch结构中，当某个case分支执行完后，使用break语句跳出switch结构。（2）用在循环结构中，用break语句来结束循环。如果放在嵌套循环中，则break语句只能结束其所在的那层循环。2.4 函数函数（function）由若干条语句组成，用于实现特定的功能。函数包含函数名、若干参数和返回值。2.4.1 创建自定义函数funct

27、ion 函数名 (参数列表) 函数体function PrintWelcome() document.write(欢迎使用JavaScript);2.4 函数2.4.2 调用函数 1在JavaScript中使用函数名来调用函数在JavaScript中，可以直接使用函数名来调用函数。无论是内置函数还是自定义函数，调用函数的方法都是一致的。2在HTML中使用javascript:方式调用JavaScript函数在HTML中的a链接中可以使用javascript:方式调用JavaScript函数，方法如下：3与事件结合调用JavaScript函数可以将JavaScript函数指定为JavaScrip

28、t事件的处理函数。当触发事件时会自动调用指定的JavaScript函数。设置 Hello1:function() console.log(单击我了) 2.4 函数/计算并打印num1和num 2之和 function sum(num1, num2) console.log(num1 + num2); sum(1, 2); /结果是3与事件结合调用JavaScript函数设置 Hello1:function() console.log(单击我了) 2.4 函数2.4.3 变量的作用域 var a = 100;/ 全局变量 function setNumber() var a = 10;/ 局部变

29、量 console.log(a);/ 打印局部变量a setNumber(); console.log(); console.log(a);/ 打印全局变量a程序运行结果：101002.4 函数2.4.3 变量的作用域在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。相应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。2.4 函数2.4.4 函数的返回值使用return语句可以返回函数值并退出函数

30、function 函数名() return 返回值;2.4.5 定义函数库JavaScript函数库是一个. js文件，其中包含函数的定义。在HTML文件中引用函数库js文件的方法如下： / 引用js文件中的函数求(m,n)两个数字之间的和，代码如下：function getTotal(m,n) var total=0; if(m=n) return false; / n必需大于m否则无意义 for(var i=m;i=n;i+) total+=i; return total;console.log(getTotal(1, 10);2.4 函数2.4.6 JavaScript内置函数1aler

31、t()函数alert()函数用于弹出一个消息对话框，该对话框包括一个“确定”按钮。2confirm()函数confirm()函数用于显示一个请求确认对话框，包含一个“确定”按钮和一个“取消”按钮。在程序中，可以根据用户的选择决定执行的操作2.4 函数3parseFloat()函数parseFloat()函数用于将字符串转换成浮点数字形式。语法如下：parseFloat(str)参数str是待解析的字符串。函数返回解析后的数字。4parseInt ()函数parseInt ()函数用于将字符串转换成整型数字形式。语法如下：parseInt(str, radix)参数str是待解析的字符串；参数r

32、adix可选。表示要解析的数字的进制。该值介于 2 36 之间。parseInt(10);/10进制，结果是10parseInt(f,16);/16进制，结果是15parseInt(010,2);/2进制，结果是22.4 函数3isNaN()函数isNaN()用于检验某个值是否为NaN（not a number不是数字），返回false为数字，返回true为非数字。var num = 123.456789abc;isNaN(num) /结果是trueisNaN(123)/结果是false4强制类型转换函数用户可以使用强制类型转换函数来转换值的类型。在ECMAScript中可以使用以下3种强制类

33、型转换函数。String(value)：把给定的值转换成字符串。类似于toString()方法，但是和它又不同，对null或undefined值toString()会报错。Boolean(value)：把给定的值转换成Boolean型。给定的值为空字符串、数字0、undefined或null返回false，其余返回true。Number(value)：把给定的值转换成数字（可以是整数或浮点数）。2.4 函数var a=String(123); /返回123var a=Boolean(0); /返回falsevar a=Boolean(undefined); /返回falsevar a=Bool

34、ean(null); /返回falsevar a=Boolean(50); /返回truevar a=Number(11.11); /返回11.115保留几位小数NumberObject.toFixed(位数)；toFixed()位数功能是保留几位小数（四舍五入），参数为保留的小数点后位数，返回的值为String 类型。var a=13.37.toFixed(4); /返回13.3700var a=13.378888.toFixed(2); /返回13.382.5 JavaScript面向对象程序设计JavaScript脚本是面向对象（Object-based）的编程语言，它可以将属性和代码集

35、成在一起，定义为类，从而使程序设计更加简单、规范、有条理。通过对象的来访问可大大简化JavaScript程序的设计，并提供直观、模块化的方式进行脚本程序开发。2.5.1 面向对象程序设计思想对象是客观世界存在的人、事和物体等实体。现实生活中存在很多的对象，比如猫、自行车等。不难发现它们有两个共同特征：都有状态和行为。图2-8 以自然人构造的对象2.5.1 面向对象程序设计思想凡是能够提取一定度量数据并能通过某种途径对度量数据实施操作的客观存在都可以构成一个对象，且用属性来描述对象的状态，使用方法和事件来处理对象的各种行为。下面介绍一些概念。对象（Object）：面向对象程序设计思想可以将一组数

36、据和与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象。属性：用来描述对象的状态。通过定义属性值，可以改变对象的状态。如图2-8中，可以定义height表示该自然人身高，字符串HungryOrNot来表示该自然人肚子的状态，HungryOrNot成为自然人的某个属性；方法：也称为成员函数，是指对象上的操作。如图2-8中，可以定义方法Eat( )来处理自然人肚子很饿的情况，Eat( )成为自然人的某个方法；事件：由于对象行为的复杂性，对象的某些行为需要用户根据实际情况来编写处理该行为的代码，该代码称为事件。在图2-8中，可以定义事件DrinkBeforeEat( )来处理自然人肚子很饿

37、同时嘴巴很渴需要先喝水后进食。2.5.2 面向对象编程面向对象编程（OPP）是一种计算机编程架构，具有三个最基本的特点：封装、重用性（继承）、多态。（1）类（class）：具有相同或相似性质的对象的抽象就是类。 （2）封装：将数据和操作捆绑在一起，定义一个新类的过程就是封装。（3）继承：类之间的关系，在这种关系中，一个类共享了一个或多个其他类定义的属性和行为。 （4）多态：从同一个类中继承得到的子类也具有多态性，即相同的函数名在不同子类中有不同的实现。就如同子女会从父母那里继承到人类共有的特性，而子女也具有自己的特性。实际上，JavaScript语言是通过一种叫做原型（prototype）的方

38、式来实现面向对象编程的。2.5.3 JavaScript类的定义和实例化严格的说，JavaScript 是基于对象的编程语言，而不是面向对象的编程语言。在面向对象的编程语言中（如Java、C+、C#、PHP等），声明一个类使用 class 关键字。但是在JavaScript中，没有声明类的关键字，也没有办法对类的访问权限进行控制。JavaScript 使用函数来定义类。1 .类的定义定义一个Person类：function Person() = 张三 ; / 定义一个属性 name this.sex= 男 ; / 定义一个属性 sex this.say=function() / 定义一个方法

39、say() console.log(我的名字是 + + ，性别是 + this.sex + 。); 2.5.3 JavaScript类的定义和实例化2. 创建对象（类的实例化）创建对象的过程也是类实例化的过程。在JavaScript中，创建对象（即类的实例化）使用 new 关键字。创建对象语法：new className()将上面的 Person 类实例化：var zhangsan=new Person();zhangsan.say();运行代码，输出如下内容： 大家好，我的名字是 张三 ，性别是 男 。2.5.3 JavaScript类的定义和实例化3. 通过对象直接初始化创建对象通过直接初

40、始化对象来创建对象，与定义对象的构造函数方法不同的是，该方法不需要new生成此对象的实例，改写zhangsan对象：/直接初始化对象var zhangsan= name:张三, sex:男, say: function ()/定义对象的方法 document.write(大家好，我的名字是 + + ，性别是 + this.sex);zhangsan.say();对象直接初始化是一个“名字/值”对列表，最后用一个大括号括起来。“名字/值”对表示对象的一个属性或方法，名和值之间用冒号分隔。2.5.3 JavaScript类的定义和实例化3. 通过对象直接初始化创建对象上面的zhangsan对象，也

41、可以这样来创建：var zhangsan= = 张三;zhangsan.sex = 男;zhangsan.say = function() return 嗨！大家好，我来了。; 该方法在只需生成一个对象实例并进行相关操作的情况下使用时，代码紧凑，编程效率高，但致命的是，若要生成若干个对象实例，就必须为生成每个对象实例重复相同的代码结构，代码的重用性比较差，不符合面向对象的编程思路，应尽量避免使用该方法创建自定义对象。2.5.4 JavaScript访问对象的属性和方法属性是一个变量，用来表示一个对象的特征，如颜色、大小、重量等；方法是一个函数，用来表示对象的操作，如奔跑、呼吸、跳跃等。对象的属

42、性和方法统称为对象的成员。在JavaScript中，可以使用“ . ”和“ ”来访问对象的属性。1. 使用“ . ”来访问对象属性语法：objectNpertyName其中，objectName 为对象名称，propertyName为属性名称。 2. 使用“ ”来访问对象属性语法： objectNamepropertyName3. 访问对象的方法在JavaScript中，只能使用“ . ”来访问对象的方法。语法：objectName.methodName()2.5.4 JavaScript访问对象的属性和方法【例2-15】创建一个Person对象并访问其成员。function Person()

43、 =张三; / 定义一个属性name this.sex=男; / 定义一个属性sex this.age=22; / 定义一个属性age this.say=function() / 定义一个方法 say() return 我的名字是 + + ，性别是 + this.sex + ，今年 + this.age +岁!; var zhangsan=new Person();console.log(姓名：+); / 使用“.”来访问对象属性console.log(性别：+zhangsan.sex);console.log(年龄：+zhangsanage); / 使用“ ”来访问对象属性console.l

44、og(zhangsan.say(); / 使用“.”来访问对象方法动态添加对象的属性和方法【例2-16】用Person类创建一个对象，向其添加属性和方法。function Person(name,sex) / 定义类 =name; / 定义一个属性 name this.sex=sex; / 定义一个属性 sex this.say=function() / 定义一个方法 say() return 大家好，我的名字是 + + ，性别是 + this.sex + 。; var zhangsan=new Person(张三,男); / 创建对象zhangsan.say();/ 动态添加属性和方法zha

45、ngsan.tel /动态添加属性telzhangsan.run=function() / 动态添加方法run return 我跑得很快！ ;/ 弹出警告框alert(姓名：+);alert(姓别：+zhangsan.sex);alert(zhangsan.say();alert(电话：+zhangsan.tel);alert(zhangsan.run();2.6 JavaScript内置对象JavaScript 脚本提供丰富的内置对象（内置类），包括同基本数据类型相关的对象（如String、Boolean、Number）、允许创建用户自定义和组合类型的对象（如Ob

46、ject、Array）和其他能简化JavaScript操作的对象（如Math、Date、RegExp、Function）。了解这些内置对象是JavaScript编程和游戏开发的基础和前提。2.6 JavaScript内置对象JavaScript的内置对象（内置类）框架如图所示。2.6.2 基类Object所有的JavaScript对象都继承自Object类，后者为前者提供基本的属性（如prototype属性等）和方法（如toString()方法等）。而前者也在这些属性和方法基础上进行扩展，以支持特定的某些操作。基类Object的属性和方法见表2-2所示。2.6.3 Date类Date类主要提供

47、获取和设置日期和时间的方法，如getYear()、getMonth()、getDate()等。Date类的常用方法见表2-3所示。2.6.4 String类String是JavaScript的字符串类，用于管理和操作字符串数据。可以使用下面2种方法创建String对象：MyStr = new String(这是一个测试字符串); /把参数作为MyStr对象的初始值。MyStr = 这是一个测试字符串; / 直接对String对象赋值字符串String类只有一个属性length，用来返回字符串的长度。【例2-18】计算String对象的长度。 var MyStr; MyStr = new Str

48、ing(这是一个测试字符串); console.log(“ +MyStr+”的长度为: + MyStr. length); /演示使用String对象的length属性运行结果如下： “这是一个测试字符串”的长度为:9String类的常用方法见表2-4所示。2.6.4 String类【例2-19】演示slice()方法的例子。var str=Hello world!console.log(str. slice (6, 11)2.6.5 Array类Array数组是在内存中保存一组数据。Array类的常用方法见表2-5所示。1Array数组创建与使用方法一：可以使用new关键字创建Array对象

49、，方法如下：Array对象 = new Array(数组大小)例如下面的语句可以创建一个由3个元素组成的数组cars：var cars=new Array(3);通过下面的方法访问数组元素。数组元素值 = 数组名索引var cars=new Array(3);cars0=Audi;cars1=BMW;cars2=Volvo;方法二：在创建数组对象的时候给元素赋值。var cars=new Array(Audi,BMW,Volvo);方法三：直接赋值。var cars=Audi,BMW,Volvo;2.6.5 Array类2数组遍历可以使用for语句遍历数组的所有索引，然后使用数组名索引方法访问

50、每个数组元素。【例2-20】使用for语句遍历数组。 var MyStr; MyArr = new Array(3); MyArr0 = 中国; MyArr1 = 美国; MyArr2 = 日本; for(var i=0;i MyArr.length; i+) console.log(MyArri);2.6.5 Array类3数组排序使用Array类的sort ()方法可以对数组元素进行排序，sort ()方法返回排序后的数组。语法如下：arrayObject. sort(sortby)参数sortby可选，用于规定排序顺序，sortby必须是函数。如果调用该方法时没有使用参数，将按字母顺序对

51、数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。【例2-22】对数组排序的例子。 var arr = new Array(6) ; arr0 = George; arr1 = Johney; arr2 = Thomas; arr3 = James; arr4 = Adrew; arr5 = Martin; console.log(排序前+ arr); console.log(排序后+ arr.sort();2.6.5 Array类4数组的操作(1) push()方法往数组后面添加数组，并返回数组新长度。var a = aa,bb,cc;console.log(a.push(d

52、d); /输出4console.log(a); /输出 aa,bb,cc,dd而unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。(2) pop()方法和shift()方法pop()方法删除数组最后一个元素，并返回该元素。而shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。var a = aa,bb,cc;console.log(a.pop(); /输出ccconsole.log(a.shift ();/输出aa2.6.5 Array类 (3) slice()方法可从已有的数组中返回选定的元素的一个新数组。语法如下：arrayObject.slic

53、e(start,end)(4) join()方法用于把数组中的所有元素连接起来放入一个字符串。 var arr = new Array(3) ; arr0 = George; arr1 = John; arr2 = Thomas; console.log(arr.join(.);/ 输出 George.John.Thomas2.6.5 Array类5二维数组数组中的元素又是数组就成为二维数组。创建二维数组方法如下：方法一：先创建一个一维数组，然后该一维数组的所有元素再创建一维数组。var persons = new Array(3);/创建一个一维数组persons0 = new Array(

54、2);/每个元素persons0又是一维数组persons1 = new Array(2);/每个元素persons1又是一维数组persons2 = new Array(2);/每个元素persons2又是一维数组persons00 = zhangsan;persons01 = 25;persons10 = lisi; persons11 = 22;persons20 = wangwu;persons21 = 32;方法二：先创建一个一维数组，然后该一维数组的所有元素直接赋值。var persons = new Array(3);persons0 = zhangsan, 25;persons

55、1 = lisi, 21;persons2 = wangwu, 32;方法三：直接赋值。var persons = zhangsan, 25, lisi, 21, wangwu, 32;2.6.5 Array类5二维数组数组中的元素又是数组就成为二维数组。创建二维数组方法如下：方法一：先创建一个一维数组，然后该一维数组的所有元素再创建一维数组。var persons = new Array(3);/创建一个一维数组persons0 = new Array(2);/每个元素persons0又是一维数组persons1 = new Array(2);/每个元素persons1又是一维数组perso

56、ns2 = new Array(2);/每个元素persons2又是一维数组persons00 = zhangsan;persons01 = 25;persons10 = lisi; persons11 = 22;persons20 = wangwu;persons21 = 32;方法二：先创建一个一维数组，然后该一维数组的所有元素直接赋值。var persons = new Array(3);persons0 = zhangsan, 25;persons1 = lisi, 21;persons2 = wangwu, 32;方法三：直接赋值。var persons = zhangsan, 25

57、, lisi, 21, wangwu, 32;2.6.6 Math对象Math对象是对一个已创建好的Math类的实例，因此不能使用new运算符。其提供一些属性是数学中常用的常量，E（自然对数的底，约为2.718）、LN2（2的自然对数）、LN10（10的自然对数）、LOG2E（以2为底的e的对数）、LOG10E（以10为底的e的对数）、PI（圆周率）等。Math 对象提供的一些方法是数学中常用的函数，如sin()、random()、log()等。Math对象的常用方法见表 2-6所示。2.7 ES6简介微信小程序已经支持绝大部分的ES6 API，用户可以放心的使用。2.7.1 变量相关ES20

58、15(ES6) 新增加了两个重要的JavaScript关键字：let和const。let声明的变量只在let所在的代码块（一对花括号内部的代码）内有效，也成为块作用域。let只能声明同一个变量一次而var可以声明多次。for循环计数器很适合用let声明。var j=5;for (let j = 0; j 左边为函数输入参数，而右边是进行的操作以及返回的值。例如：x = x * x上面的箭头函数相当于： 匿名函数的一种简写function (x) return x * x;如果参数不是一个，就需要用括号()括起来。/ 两个参数:(x, y) = x * x + y * y 如果要返回一个对象，就

59、要注意，如果是单表达式，这么写的话会报错。x = foo: x / Syntax Error:因为和函数体的 . 有语法冲突，所以要改为：x = ( foo: x ) / okES6标准新增了一种新的函数Arrow Function（箭头函数）。箭头函数的定义用的就是一个箭头。2.7.6 箭头函数2this相关箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数没有自己的this，箭头函数会捕获其所在上下文的this值，作为自己的this。可以解决由于JavaScript嵌套函数中this指向的问题。通常来说，箭头函数内部的this就是外层代码块的this。

60、 = window;var obj = name:latency, show_name:function () /箭头函数的this，指向箭头函数定义时所处的对象，默认使用外层函数的this. var fn = () = console.log(); /其this指向obj，输出latency fn(); ,obj.show_name(); /输出obj的name：latency 以上例子就可以很清楚的看出箭头函数和普通函数中this的区别。箭头函数与普通函数的区别var obj = a: 10, b: () = console.log(this.a); / undefined console