谁家做网站计算机速成班培训

当前位置： 首页 > news >正文

谁家做网站,计算机速成班培训,用rp怎么做网站按钮下拉菜单,网站的规划和建设方案WXS语法 WXS是微信小程序的一套脚本语言#xff0c;其特性包括#xff1a;模块、变量、注释、运算符、语句、数据类型、基础类库等。在本章我们主要介绍WXS语言的特性与基本用法#xff0c;以及 WXS 与 JavaScript 之间的不同之处。 1 WXS介绍 在微信小程序中#xff0c…WXS语法 WXS是微信小程序的一套脚本语言其特性包括模块、变量、注释、运算符、语句、数据类型、基础类库等。在本章我们主要介绍WXS语言的特性与基本用法以及 WXS 与 JavaScript 之间的不同之处。 1 WXS介绍 在微信小程序中除了逻辑层使用的 JavaScript 脚本语言之外微信小程序还有一套自己的脚本语言WXS全称 WeiXin Script。在实际项目开发中WXS通常被用来做页面数据的过滤或者是使用WXS进行数据的计算处理然后结合WXML组件可以构建小程序的页面结构。 在小程序页面中WXS 的用法有点类似于HTML中的 script 标签但是WXS与JavaScript又是两种不同的脚本语言。WXS 有自己的语法但在某些语法方面又和 JavaScript 及其相似所以很容易让开发者误以为 WXS 就是微信小程序中的 JavaScript 脚本。 2 基础语法 2.1 WXS 模块 WXS 模块可以通过 WXML 文件中的 wxs 标签进行声明或者是在WXML文件内引入 .wxs 后缀名的文件。每一个 .wxs 后缀名的文件和 wxs 标签都是一个单独的模块而且每个模块都有自己独立的作用域开发者在模块中声明的变量和函数都是私有的其他模块对该模块内的变量和函数是不可见的。如果要想把一个模块中的私有变量和私有函数对外暴露需要使用 module.exports 语句实现。 WXML文件提供的 wxs 标签上有两个属性分别是module和src。其中module属性的值是字符串类型的用来表示当前 wxs 标签的模块名该属性是一个必填字段在其他模块中也是通过模块名称来引入该模块中的私有属性与函数的。在单独是 WXML 文件中wxs 的module属性值都是唯一的如果有重复模块名称则按照定义的先后顺序进行引用即后者会覆盖前者。在不同文件之间的WXS模块名不会相互覆盖互不影响。 wxs 标签的module属性值的命名必须遵守以下两个规范 模块名称只能由大小写字母、数字、下划线组成模块名的首字符必须为大小写字母或下划线不能为数字。 module属性值就是当前模块的模块名称其命名规范和常见的编程语言中标识符命名规则相似。在WXML文件中直接使用 wxs 标签定义module模块的代码如例1所示。 【例1】定义wxs模块 !– index.wxml – wxs moduledatavar str hello world;module.exports {msg: str} /wxs viewdata模块的值{{ data.msg }}/view上面代码运行后的效果如图1所示。 图1 wxs模块输出效果 在例1中声明了一个名字为data的模块将模块中str字符串变量复制给data模块中的msg属性并向外暴露在当前页面可以使用data.msg获取模块中定义的值。 wxs 标签上还有另外一个src属性值也是字符串类型用于表示引入的.wxs文件的相对路径只有在当前的wxs标签为单闭合标签或者标签的内容为空时有效。使用src属性引入其他.wxs文件时需要注意以下几点 只用引入.wxs文件模块且必须使用相对路径WXS模块均为单例当WXS模块在第一次被引用时会自动初始化为单例对象如果在多个页面或多个地方被多次引用时使用的都是同一个WXS模块对象如果一个WXS模块在定义后一直没有被引用则该模块不会被解析执行。 在微信开发者工具中的index页面文件夹上点击鼠标右键选择“新建文件”效果如图2所示。 图2 选择新建文件 将新建文件命名为tool.wxs该文件就是一个独立的WXS模块文件在文件中可以直接编写WXS脚本其代码如例2所示。 【例2】WXS脚本文件代码 // tool.wxs var str hello world from tool.wxs; var sum function(a,b) {return ab } module.exports {msg: str,sum: sum }上面例子中的.wxs文件可以被其他的WXML文件或.wxs文件引用如果在WXML文件中引用其代码如例3所示。 【例3】WXML中引入.wxs文件 !– index.wxs – wxs src./tool.wxs moduledata / viewdata模块的值{{ data.msg }}/view view求和1 2 {{ data.sum(1,2) }}/view上面代码运行后的效果如图3所示。 图3 WXML中引入.wxs文件运行效果 .wxs文件还可以被其他的.wxs文件引用引用时需要使用require函数。在引用.wxs文件时需要注意以下几点 只能引用 .wxs 文件模块且必须使用相对路径wxs 模块均为单例wxs 模块在第一次被引用时会自动初始化为单例对象多个页面多个地方多次引用使用的都是同一个 wxs 模块对象如果一个 wxs 模块在定义之后一直没有被引用则该模块不会被解析与运行。 .wxs文件引入其他WXS模块代码如例4所示。 【例4】 // tools.wxs var foo hello world from tools.wxs; var bar function (d) {return d; } module.exports {FOO: foo,bar: bar, }; module.exports.msg some msg;// logic.wxs var tools require(./tools.wxs); console.log(tools.FOO); console.log(tools.bar(logic.wxs)); console.log(tools.msg);!– /page/index/index.wxml – wxs src./../logic.wxs modulelogic /上面代码运行后控制台输出效果如下 hello world from tools.wxs logic.wxs some msg在使用WXS模块时需要注意以下几点 wxs 模块只能在定义模块的 WXML 文件中被访问到。使用 include 或 import 时wxs 模块不会被引入到对应的 WXML 文件中template 标签中只能使用定义该 template 的 WXML 文件中定义的 wxs 模块。 2.2 变量 WXS脚本的语法与JavaScript语法非常相似但是二者又有着自己独特的语法规则例如在WXS脚本中声明变量必须使用 var 语句不能使用const、let这些语句这点和JavaScript是不同的。WXS中的变量均为值的引用没有声明的变量直接赋值使用会被定义为全局变量。如果只声明变量而不赋值的话该变量会被默认赋值为undefined。WXS脚本声明变量的示例代码如例5所示。 【例5】WXS脚本声明变量 var foo 1; var bar hello world; var i; // i undefined上面代码分别声明了 foo、 bar、 i 三个变量。然后foo 赋值为数值 1 bar 赋值为字符串 “hello world”。 在WXS脚本中的变量名可以称为是标识符变量命名时需要遵循以下规则 变量名只能由大小写英文字母、数字、下划线组成首字符必须是大小写英文字母或下划线不能为数字变量名不能使用WXS脚本保留的关键字。 WXS脚本保留的关键字为delete、void、typeof、null、undefined、NaN、Infinity、var、if、else、true、false、require、this、function、arguments、return、for、while、do、break、continue、switch、case、default等25个标识符。 2.3 注释 WXS脚本中的注释与JavaScript中的注释一样有两种常见的注释方法分别是单行注释和多行注释。注释代码如例6所示。 【例6】WXS脚本注释 wxs modulesample // 方法一单行注释/* 方法二多行注释 / /wxsWXS脚本中还有一种独特的注释方法即结尾注释。直接在要注释的代码前面使用 / 的方式将代码注释从 /* 开始往后所有的WXS代码都会被注释其代码如例7所示。 【例7】结尾注释 wxs modulesample/* 方法三结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释 var a 1; var b 2; var c fake;/wxs在上面的例子中所有的WXS代码均被注释掉了。 2.4 运算符 运算符用于执行程序代码运算会针对一个以上操作数项目来进行运算。WXS脚本中的运算符可以分为基本运算符、一元运算符、位运算符、比较运算符、等值运算符、赋值运算符、二元逻辑运算符等7种。 基本运算符主要用于四则运算代码如例8所示。 【8】基本运算符 var a 10, b 20;// 加法运算 console.log(30 a b); // 减法运算 console.log(-10 a - b); // 乘法运算 console.log(200 a * b); // 除法运算 console.log(0.5 a / b); // 取余运算 console.log(10 a % b);一元运算符主要用于变量的自增、自减等简单运算代码如例9所示。 【例9】一元运算符 var a 10, b 20;// 自增运算 console.log(10 a); console.log(12 a); // 自减运算 console.log(12 a–); console.log(10 –a); // 正值运算 console.log(10 a); // 负值运算 console.log(0-10 -a); // 否运算 console.log(-11 ~a); // 取反运算 console.log(false !a); // delete 运算 console.log(true delete a.fake); // void 运算 console.log(undefined void a); // typeof 运算 console.log(number typeof a);WXS脚本中也可以使用二进制的位运算代码如例10所示。 【例10】位运算符 var a 10, b 20;// 左移运算 console.log(80 (a 3)); // 带符号右移运算 console.log(2 (a 2)); // 无符号右移运算 console.log(2 (a 2)); // 与运算 console.log(2 (a 3)); // 异或运算 console.log(9 (a ^ 3)); // 或运算 console.log(11 (a | 3));比较运算也是常见的逻辑运算中的一种代码如例11所示。 【例11】比较运算符 var a 10, b 20;// 小于 console.log(true (a b)); // 大于 console.log(false (a b)); // 小于等于 console.log(true (a b)); // 大于等于 console.log(false (a b));等值运算符主要是判断两个变量的值是否相等代码如例12所示。 【例12】等值运算符 var a 10, b 20;// 等号 console.log(false (a b)); // 非等号 console.log(true (a ! b)); // 全等号 console.log(false (a b)); // 非全等号 console.log(true (a ! b));赋值运算符也是最常见的一种运算符用于为变量赋值代码如例13所示。 【例13】赋值运算符 var a 10;a 10; a * 10; console.log(100 a); a 10; a / 5; console.log(2 a); a 10; a % 7; console.log(3 a); a 10; a 5; console.log(15 a); a 10; a - 11; console.log(-1 a); a 10; a 10; console.log(10240 a); a 10; a 2; console.log(2 a); a 10; a 2; console.log(2 a); a 10; a 3; console.log(2 a); a 10; a ^ 3; console.log(9 a);二元逻辑运算符就是用于逻辑与、逻辑或的运算符代码如例14所示。 【例14】二元逻辑运算符 var a 10, b 20;// 逻辑与 console.log(20 (a b)); // 逻辑或 console.log(10 (a || b));在WXS脚本中的运算符之间存在优先级关系运算符的优先级决定了表达式中运算执行的先后顺序。优先级从上到下依次递减最上面具有最高的优先级逗号操作符具有最低的优先级。表达式的结合次序取决于表达式中各种运算符的优先级。优先级高的运算符先结合优先级低的运算符后结合同一行中的运算符的优先级相同。在WXS脚本中括号“()”的优先级最高逗号“,”的优先级最低。 2.5 语句 WXS脚本中主要包含了两类语句一类是分支语句包括if语句、switch语句另一类是循环语句包括for语句、while语句。 在WXS脚本中if的用法如例15所示。 【例15】if语句 if (表达式) {// 代码块 } else if (表达式) {// 代码块 } else {// 代码块 }当大括号中的代码只有一行时大括号“{}”可以省略效果如例16所示。 【例16】if语句的简写方式 if (表达式) 语句; else 语句;// 或者是if (表达式)语句; else语句;switch语句需要用到case关键字进行分支case关键字后面只能使用变量、数字、字符串最后都不满足的条件使用default关键字分支。switch语句的语法如例17所示。 【例17】switch语法 switch (表达式) {case 变量:语句;case 数字:语句;break;case 字符串:语句;default:语句; }switch语句的用法与if不同但是都可以用于分支其最终执行的结果是类似的。if语句的条件是表达式而switch语句的条件是满足表达式的值。switch语句的示例代码如例18所示。 【例18】switch示例 var week 1;switch (week) { case 1:console.log(周一);break; case 2:console.log(周二);break; case 3:console.log(周三);break; case 4:console.log(周四);break; case 5:console.log(周五);break; case 6:console.log(周六);break; case 7:console.log(周日);break; default:console.log(请输入正确的周数); }上面示例代码运行后在控制台输出结果如下 周一如果有过JavaScript语言或其他编程语言的学习经历的话肯定对循环并不陌生特别是for循环。WXS脚本的for循环语法与JavaScript语言的for循环语法是一样的具体代码如例19所示。 【例19】for循环语法 for (语句; 语句; 语句)语句;// 或者是for (语句; 语句; 语句) {代码块; }for循环的示例代码如例20所示。 【例20】for循环示例 for (var i 0; i 3; i) {console.log(i);if( i 1) break; }上面示例代码运行后在控制台输出的结果如下 0 1while也是用于循环的语句当表达式的值为true时循环执行语句或代码块在代码块中也支持break、continue关键词来跳过循环其语法代码如例21所示。 【例21】while语句语法 while (表达式)语句;// 或者是while (表达式){代码块; }我们还可以使用do-while语句来执行循环其语法如例22所示。 do {代码块; } while (表达式)在使用while或do-while语句执行循环的代码时一定要注意在合适的时机设置表达式的值为false或者是合理设置跳出循环否则将会出现死循环的情况。如果实际开发需求中需要使用到无限循环可以不做跳出循环的操作。 3 数据类型 WXS脚本语言中的变量可以保存多种数据类型包括数值、字符串、布尔值、对象、函数、数组等。WXS脚本语言中的数据类型分为基本数据类型和引用数据类型基本数据类型是指简单的数据段引用数据类型是指有多个值构成的对象。当我们把一个值赋值给一个变量时解析器首先要确认这个值是基本数据类型还是引用数据类型以此来判断该值存储的内存位置与大小。 3.1 基本数据类型 在WXS脚本语言中基本数据类型包括number数值、string字符串、boolean布尔值等。 number包括两种数值分别是整数和小数示例如下 var a 10; var PI 3.141592653589793;number也可以作为对象类型其方法可以参考ECMAScript5标准常见的方法有 toString()toLocaleString()valueOf()toFixed()toExponential()toPrecision() WXS的其他几种基本数据类型的属性与方法都可以参考ES5标准。其中string字符串的值可以使用单引号和双引号两种写法boolean类型只有两个特定的值分别是true和false。 3.2 引用数据类型 WXS脚本语言中的引用数据类型包括object对象、array数组、function函数、date日期等这些引用数据类型与基本数据类型不同的是基本数据类型是简单的数据段被保存在栈内存中而引用数据类型是有多个值构成的对象被保存在堆内存中。 WXS脚本语言与其他语言不同的是开发者不可以直接访问堆内存空间中的位置也不能直接操作堆内存空间只能操作对象在栈内存中的引用地址。所以引用类型的数据在栈内存中保存的是对象在堆内存中的引用地址通过这个引用地址可以快速查找到保存在堆内存中的对象。 1object对象 在WXS脚本中object对象是一种无序的键值对如果想要定义一个object对象可以使用以下方法 // 生成一个新的空对象 var o {} //生成一个新的非空对象 o {str: ,i: 1,fn: function() {} };调用对象中的属性时可以使用“对象.属性”的语法获取对应属性的值示例代码如下 // 读取对象属性 console.log(o.str)2function函数 WXS脚本语言中有三种函数的用法分别是普通函数、匿名函数和闭包函数。普通函数可以直接使用function关键字声明也可以将一个匿名函数赋值给某个变量示例代码如下 // 普通函数 function fn () {} // 或者是 var fn function () {}闭包就是能够读取其他函数内部变量的函数WXS脚本语言中也可以像JavaScript语言那样使用闭包示例代码如例22所示。 【例22】闭包 var a function (x) {return function () { return x;} } var b a(100); console.log( 100 b() ); // true3array数组 array支持两种定义数组的方式一种是生成一个新的空数组语法如下 var a [];另一种是生成一个新的非空数组数组中的元素可以是任意类型语法如下 var a [1,a,{},function(){}];array对象上也定义了一系列操作数组的方法例如数组转字符串的toString()、追加元素的push()、用于排序的sort()等方法关于array对象的具体方法可以参考ES5标准。 4date日期 在WXS脚本中想要生成一个date日期类型的对象需要借助getDate()方法该方法用于返回当前的日期对象。开发者也可以使用getDate()方法提供的多种重载方法生成不同格式的日期对象语法如下所示 getDate() getDate(milliseconds) getDate(datestring) getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])在上面getDate()重载方法的参数中milliseconds是指从1970年1月1日零点开始计算到指定日期时间之间的毫秒数datestring是指日期字符串格式为month day, year hours:minutes:seconds。 3.3 正则表达式 正则表达式英文全称 Regular Expression简写 regex、regexp或RE是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式可以用于文本搜索和文本替换等操作中。正则表达式不属于某个编程语言而是一种由一个字符序列形成的搜索模式。正则表达式可以是一个简单的字符或者是一个更复杂的模式当开发者在文本中搜索数据时可以用搜索模式来描述要查询的内容。 在WXS脚本中生成正则表达式对象需要使用getRegExp()方法语法如下 getRegExp(pattern[, flags])getRegExp()方法的参数pattern表示正则表达式的内容参数flags表示修饰符该字段只能包含以下字符 g表示global执行全局匹配查找所有匹配而非在找到第一个匹配后停止。i表示ignoreCase执行对大小写不敏感的匹配。m表示multiline执行多行匹配。 正则表达式的示例代码如例23所示。 【例23】 var a getRegExp(x, img); console.log(x a.source); // true console.log(true a.global); // true console.log(true a.ignoreCase); // true console.log(true a.multiline); // true3.4 数据类型判断 在WXS脚本中可以借助每个对象的constructor属性来判断数据类型示例代码如例24所示。 【例24】constructor属性判断数据类型 var number 10; console.log( Number number.constructor ); // truevar string str; console.log( String string.constructor ); // truevar boolean true; console.log( Boolean boolean.constructor ); // truevar object {}; console.log( Object object.constructor ); // truevar func function(){}; console.log( Function func.constructor ); // truevar array []; console.log( Array array.constructor ); // truevar date getDate(); console.log( Date date.constructor ); // truevar regexp getRegExp(); console.log( RegExp regexp.constructor ); // true也可以使用typeof来区分部分数据类型示例代码如例25所示。 【例25】typeof区分数据类型 var number 10; var boolean true; var object {}; var func function(){}; var array []; var date getDate(); var regexp getRegExp();console.log( number typeof number ); // true console.log( boolean typeof boolean ); // true console.log( object typeof object ); // true console.log( function typeof func ); // true console.log( object typeof array ); // true console.log( object typeof date ); // true console.log( object typeof regexp ); // true console.log( undefined typeof undefined ); // true console.log( object typeof null ); // true4 基础类库 WXS的数据类型一共有八种这与JavaScript的六中数据类型不太一致。在WXS脚本语言中基本数据类型包括number、string、boolean、object、array、function、date、regexp等八种。在WXS脚本中的八种数据类型与JavaScript的数据类型有所不同例如生成date对象时需要使用getDate()函数生成 regexp 对象需要使用 getRegExp函数这些对象都不能使用new关键字直接生成。WXS脚本基于这八种数据类型派生出六种基础类库分别是console、Math、JSON、Number、Date和Global。 WXS脚本语言的基础类库与JavaScript语言的ES5标准是基本是一样的区别在于WXS中的console基础类库只提供了console.log()函数。其他的基础类库中对象的数据和函数可以参考ES5标准文档。 5 本章小结 本章我们学习了WXS的一些语法特性其实WXS语法和JavaScript的语法基本上是一致的只是对JavaScript脚本语言的上层做了一些封装和限制。二者相同的地方非常多例如if-else、switch、for等用于分支和循环的常用语法还包括一些基础的类库。但是二者也有一些区别例如在WXS模块中不支持try-catch语句。WXS脚本可以方便开发者在WXML中快速定义私有变量和函数在使用WXS语言时可以参考ES5标准但是还要注意WXS语法与JavaScript语法的区别。