微信小程序如何使用WXS——简明教程(八)

 

除了在逻辑层使用的JavaScript脚本语言外,小程序还有自己的一套脚本语言称作WXS,WXS的全称是——微信Script。

一、WXS的语言特性

我们可以使用WXS结合WXML构建页面视图的结构内容。我们一般是使用WXS做一个过滤处理,或者是一个计算处理来使用,我们来看一下WXS的语言特性。包括模块,变量,注释,运算符,语句,数据类型和基础类库。

image-20200122103027807

二、模块特性

WXS有很多特性,不过现在想说的是模块特性,其他的特性和JavaScript是差不多的。

模块可以用标签申明,也可以通过一个文件来声明文件,需要呃将它命名为.wxs后缀的文件。在WXS模块里面,它都是它有自己独立的作用域,每一个模块里面所定义的变量和函数默认都是私有的,对外是不可见的。

例如,我们声明了一个WXS模块,这里我们通过module属性来定义。因为我们说到WXS模块内部的变量和函数外部是不可见的,所以可以通过module的exports属性将模块内的变量和函数暴露出来,让外面来使用。

这里要注意的是,在同一个文件内不能多次使用同一个wxs模块名去申明,否则后面申明的模块回替换掉前面申明的模块。

例如:

<!-- 标签申明 -->
<view></view>

<wxs module="m1">
module.exports={
  wxsMessage:"hello 2020-01-22"
}
</wxs>

<!-- 外部wxs引用 -->
<wxs src="hello.wxs" module="hello"></wxs>
<view></view>



// hello.wxs
module.exports={
  mes:"你好,后天过年了!"
}

// 可以再引用其他wxs模板
module.exports=require("m1.wxs")

</wxs>

三、运算符

WXS有7种常见的运算符分别是基本运算符,一元运算符,位运算符,比较运算符,等值运算符,赋值运算符和二元逻辑运算符。

image-20200122111239228

基本运算符,就是我们一些常见的加减乘除的运算;

一元运算符,包括了自增,自减和正负值运算等等;

位运算符,包括就是左移右移等等;

比较运算符,就是大于或者小于这些运算;

等值运算符,包括了等号运算,全等运算以及非全等运算和非等运算;

赋值运算呢,就是我们比较常用的,比如a=a+1,a=a-1等等这些简单的运算;

WXS的语句和我们平常所使用的JavaScript里面的语句是基本是一样的。包括了if…else…,do…white…等等,区别在于是WXS是不支持try…catch语句的。

四、WXS数据类型

WXS总共有8种数据类型,如下图。WXS类型和我们平常所使用的JavaScript的6种类型是不太一致,这里我们需要注意的是我们生成date对象是需要使用getDate函数。生成regexp对象是使用getRegexp函数。

image-20200122113139636

我们判断WXS的数据类型的时候,可以通过construction属性来判断,WXS提供了6种技术类库,如下图。这里的基础类库和我们平时用到的JavaScript ES5标准基本是一样的,区别在于console之提供console.log方法。还有Date只提供三种方法返回时间戳。

image-20200122113613809

本节我们学习了WXS的一些语法特性,其实WXS就是JavaScript语言上层做了一些封装和限制,到这里小程序的开发框架,4个组成部分,我们就算是学习完了,那么我们平常所写的代码是如何被运行起来的呢?下一节我们会深入的去学习小程序开发框架,它的一个底层架构和原理。

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。