微信小程序中的 WXS 语法


WXS 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
WXS 中不支持 let和const;不支持箭头函数。

 1.变量

没有声明的变量直接赋值使用,会被定义为全局变量。
如果只声明变量而不赋值,则默认值为 undefined。
var 表现与 javascript一致,会有变量提升。
WXS 中的变量均为值的引用。

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

  1. 首字符必须是:字母(a-zA-Z),下划线(_)。
  2. 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)。
var bar = "hello world"

2.运算符

大致和 JS 中相同。

3.语句

大致和 JS 中相同。

4.数据类型

WXS 语言目前共有以下几种数据类型:string、number、boolean、object、array、function、date、regexp。

数据类型判断可以使用 constructor 属性,也可以使用 typeof 区分部分数据类型。

var string = "str";
console.log( "String" === string.constructor )

var func = function(){};
console.log( "Function" === func.constructor )

4.1.date

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

var  date = getDate(1500000000000);

4.2.regexp

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

var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');

5.模块

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

5.1.编写在 WXML 文件中的  标签内

WXML 文件中的  标签有两个属性:

5.1.1.module:是当前  标签的模块名

在单个 WXML 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。
不同文件之间的 wxs 模块名不会相互覆盖。



    var some_msg = "hello world";
    module.exports = {
      msg : some_msg,
    }

 {{foo.msg}}     

5.1.2.src:引用 .wxs 文件的相对路径


 {{some_comms.msg}} 

5.2.编写在以 .wxs 为后缀名的文件内

// utils.wxs
var formatNumber = function(val){
  var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');
  return (val>1000) ? val.toString().replace(reg, '$1,') : val;
}

6.导出

一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

每个 wxs 模块均有一个内置的 module 对象。module 对象有一个exports属性,通过该属性,可以对外共享本模块的私有变量与函数。

// utils.wxs
var formatNumber = function(val){
  var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');
  return (val>1000) ? val.toString().replace(reg, '$1,') : val;
}
module.exports = {
  formatNumber: formatNumber
}

7.导入

7.1.在.wxml 中引用

//home.wxml

{{utils.formatNumber(fanNum)}}

7.2.在.wxs 模块中引用其他 wxs 文件模块,可以使用 require 函数

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

// utils.wxs
var tools = require("./tools.wxs");
console.log(tools.msg);

参考---https://blog.csdn.net/wsln_123456/article/details/109294965

小程序官网参考1---https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

小程序官网参考2---https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html