微信小程序中的 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> 标签内，或以 .wxs 为后缀名的文件内。

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

WXML 文件中的 <wxs> 标签有两个属性：

5.1.1.module：是当前 <wxs> 标签的模块名

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

<!--wxml-->
<wxs module="foo">
    var some_msg = "hello world";
    module.exports = {
      msg : some_msg,
    }
</wxs>
<view> {{foo.msg}} </view>    

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

<wxs src="./../comm.wxs" module="some_comms" />
<view> {{some_comms.msg}} </view>

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
<wxs src="../../utils/utils.wxs" module="utils"></wxs>
<text>{{utils.formatNumber(fanNum)}}</text>

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