WXS 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
WXS 中不支持 let和const;不支持箭头函数。
1.变量
没有声明的变量直接赋值使用,会被定义为全局变量。
如果只声明变量而不赋值,则默认值为 undefined。
var 表现与 javascript一致,会有变量提升。
WXS 中的变量均为值的引用。
变量命名必须符合下面两个规则:
- 首字符必须是:字母(a-zA-Z),下划线(
_
)。 - 剩余字符可以是:字母(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