微信小程序wxs介绍、wxs模块、wxs变量、wxs注释、wxs运算符、wxs语句、wxs数据类型、wxs基础类库

菜蛋_
319 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

什么是wxs

WXS是小程序的脚本语言，结合WXML，可以构建出页面结构。
WXS与js是不同的语言,有些相似是因为都采用ECMA标准。

wxs的特点/与js的区别
  • wxs不依赖于运行时的基础库版本，可以在所有版本的小程序中运行（因为它是微信软件本身进行解析的，没有版本库依然运行）
  • wxs与js是不同的语言，有自己的语法，并不和js一致（只是都遵循ECMA标准）
  • wxs的运行环境和其他js代码是隔离的（没有在一块运行，是分开的）所以wxs中不能调用其他js文件中定义的函数，也不能调用小程序提供的API（因为小程序的API是基于js来写的，只能在js文件中调用）
  • wxs函数不能作为组件的事件回调
  • 由于运行环境的差异，在ios设备上的小程序内的wxs会比js代码快2~20倍。在Android设备上二者运行效率无差异（在安卓上用不用意义不大。）
wxs 模块

WXS代码可以编写在WXML文件中的标签内，或以.wxs为后缀名的文件内。

模块

每一个.wxs文件和标签都是一个单独的模块，每个模块都有自己独立的作用域，即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过module.exports实现

image.png

wxs标签的属性

1.  module：当前<wxs>标签的模块名。必填字段
2.  src：引用.wxs文件的相对路径，仅当本标签为单闭合标签或标签内容为空时生效。
module属性
module属性是当前<wxs>标签的模块名。在单个wxml文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的wxs模块名不会相互覆盖。<br/>
  • module命名规则
    • 首字符必须是：字母、下划线
    • 剩余字符可以是：字母、下划线、数字

image.png

src属性

src 属性可以用来引用其他的 wxs 文件模块。
引用的时候，要注意如下几点：

  • 只能引用 .wxs 文件模块，且必须使用相对路径。
  • wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
  • 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

image.png

引用wxs的方式
1. 外链式：<wxs src="相对路径" module="模块名称"></wxs>
2. 内嵌式：在wxml文件中直接使用wxs标签。<wxs module="模块名称">,记得用module.exports暴露出来。

变量

概念
  • WXS中的变量均为值的引用。
  • 没有声明的变量直接赋值使用，会被定义为全局变量。
  • 如果只声明变量而不赋值，则默认值为undefined。
  • var表现与js一致，会有变量提升（也就是先使用后创建）

image.png

变量名

变量命名必须符合下面两个规则

  • 首字符必须是：字母（a-zA-Z）,下划线（_）
  • 剩余字符可以是：字母（a-zA-Z）,下划线（_）,数字（0-9）
保留标识符

以下标识符不能作为变量名（因为是关键字）
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。

注释

WXS主要有3种注释的方法

  • 方法一：单行注释 //
  • 方法二： 多行注释 /**/
  • 方法三： /* (这是结尾注释，即从/*开始往后的所有wxs代码均被注释。

运算符

  • 基本运算符： +, -, *, /, %
  • 一元运算符： 自增++, 自减--, 正值+, 负值-,否运算~,取反运算!, delete运算,void运算（取空，返回值是undefined）, typeof运算
  • 位运算符（位移）：左移<<, 右移>>等等
  • 比较运算符：大于>, 小于<, 大于等于>=, 小于等于<=
  • 等值运算符：等号（内置隐式类型转换）== ,非等号！==,全等号===,非全等!==
  • 赋值运算符：=,+=,-=,*=,/=,%=等等
  • 二元逻辑运算符：逻辑与&&,逻辑或||
  • 其他运算符：条件运算符（三目）？ ：,逗号运算符，
    否运算，数值的话结果是+1，然后取负数。字符串的话结果为-1.下面的例子结果是-16

image.png

语句

if语句

image.png

if...else语句

image.png

if...else if...else

image.png

switch语句

image.png

  • default分支可以省略不写
  • case关键词后只能使用：变量，数字，字符串
for语句

支持使用break，continue关键词

image.png

while语句

image.png

  • 当表达式为true时，循环执行语句或代码块。
  • 支持使用break，continue关键词。

数据类型

wxs语言目前共有以下几种数据类型：
  • number：数值
  • string：字符串
  • Boolean：布尔值
  • object：对象
  • function：函数
  • array：数组
  • date：日期
  • regexp：正则
number包括两种数值：整数，小数

image.png

属性
  • constructor（判断数据类型）：返回字符串‘Number’
方法
  • toString
  • toLocaleString
  • valueOf
  • toFixed
  • toExponential
  • toPrecision
boolean
语法

布尔值只有两个特定的值：true和false

方法
  • toString
  • valueOf
object
语法

object是一种无序的键值对，使用方法如下所示

image.png

方法

toString ：返回字符串[object object]

function

定义函数的方式 image.png

image.png 还支持匿名函数，闭包等写法

image.png

arguments

function里面可以使用arguments关键词，该关键词目前只支持以下属性：

  • length:传递给函数的参数个数

image.png

array

定义数组的两个方式

image.png

方法

toString,concat,join,pop,push,reverse,shift,slice,sort,splice,unshift,indexOf,lastIndexOf,every,some,forEach,map,filter,reduce,reduceRight。

date

生成date对象需要使用getDate函数，返回一个当前时间的对象。

image.png

  • 参数

    • milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数
    • datestring: 日期字符串，其格式为："month day, year hours:minutes:seconds"

image.png

regexp

生成regexp对象需要使用getRegExp函数

image.png

  • 参数：

    • pattern: 正则表达式的内容。

    • flags：修饰符。该字段只能包含以下字符:

      • g: global
      • i: ignoreCase
      • m: multiline。

数据类型判断

  1. constructor：可以判断任何类型

image.png 2. typeof用来判断基本数据类型

image.png

基础类库

console

console.log方法用于在console窗口输出信息，它可以接受多个参数。将他们的结果连接起来输出

Math

方法

  • abs
  • acos
  • asin
  • atan
  • atan2
  • ceil
  • cos
  • exp
  • floor
  • log
  • max
  • min
  • pow
  • random
  • round
  • sin
  • sqrt
  • tan
JSON
方法
  • stringify(object):将object对象转换为JSON字符串，并返回该字符串。
  • parse（string）：将JSON字符串转化为对象，并返回该对象

image.png

Number

属性

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY
  • POSITIVE_INFINITY
Date

属性

  • parse
  • UTC
  • now
Global(全局的）

属性

  • NaN,Infinity,undefined 方法
  • parseInt
  • parseFloat
  • isNaN
  • isFinite
  • decodeURI
  • decodeURIComponent
  • encodeURI
  • encodeURIComponent
avatar
文章
阅读
粉丝