FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# FXS

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

FXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

FXS 兼容 WXS 与 WXML,你可以使用 WXS 与 WXML 来构建

# FXS 模块

FXS 代码可以编写在 fxml 文件中的 <fxs> 标签内,或以 .fxs 为后缀名的文件内。

# 模块

每一个 .fxs 文件和 <fxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。

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

# .fxs 文件

在微信开发者工具里面,右键可以直接创建 .fxs 文件,在其中直接编写 FXS 脚本。

示例代码:

上述例子在 /pages/comm.fxs 的文件里面编写了 FXS 代码。该 .fxs 文件可以被其他的 .fxs 文件 或 FXML 中的 <fxs> 标签引用。

# module 对象

每个 fxs 模块均有一个内置的 module 对象。

# 属性

示例代码:

在开发者工具中预览效果

<!-- page/index/index.fxml -->

<fxs src="./../tools.fxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出:

# require函数

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

引用的时候,要注意如下几点:

示例代码:

在开发者工具中预览效果

<!-- /page/index/index.fxml -->

<fxs src="./../logic.fxs" module="logic" />

控制台输出:

# <fxs> 标签

属性名 类型 默认值 说明
module String 当前 <fxs> 标签的模块名。必填字段。
src String 引用 .fxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

# module 属性

module 属性是当前 <fxs> 标签的模块名。在单个 fxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 fxs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则:

示例代码:

在开发者工具中预览效果

<!--fxml-->

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

页面输出:

上面例子声明了一个名字为 foo 的模块,将 some_msg 变量暴露出来,供当前页面使用。

# src 属性

src 属性可以用来引用其他的 fxs 文件模块。

引用的时候,要注意如下几点:

示例代码:

在开发者工具中预览效果

// /pages/index/index.js

Page({
  data: {
    msg: "'hello wrold' from js",
  }
})

<!-- /pages/index/index.fxml -->

<fxs src="./../comm.fxs" module="some_comms"></fxs>
<!-- 也可以直接使用单标签闭合的写法
<fxs src="./../comm.fxs" module="some_comms" />
-->

<!-- 调用 some_comms 模块里面的 bar 函数,且参数为 some_comms 模块里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- 调用 some_comms 模块里面的 bar 函数,且参数为 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>

页面输出:

上述例子在文件 /page/index/index.fxml 中通过 <fxs> 标签引用了 /page/comm.fxs 模块。

# 注意事项

  1. <fxs> 模块只能在定义模块的 FXML 文件中被访问到。使用 <include> 或 <import> 时,<fxs> 模块不会被引入到对应的 FXML 文件中。
  2. <template> 标签中,只能使用定义该 <template> 的 FXML 文件中定义的 <fxs> 模块。

# 变量

# 概念

var foo = 1;
var bar = "hello world";
var i; // i === undefined

上面代码,分别声明了 foo、 bar、 i 三个变量。然后,foo 赋值为数值 1 ,bar 赋值为字符串 "hello world"。

# 变量名

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

# 保留标识符

以下标识符不能作为变量名:

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

# 注释

FXS 主要有 3 种注释的方法。

示例代码:

<!-- fxml -->
<fxs module="sample">
// 方法一:单行注释

/*
方法二:多行注释
*/

/*
方法三:结尾注释。即从 /* 开始往后的所有 FXS 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

</fxs>

上述例子中,所有 FXS 代码均被注释掉了。

# 运算符

# 基本运算符

示例代码:

var a = 10, b = 20;

// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);

var a = '.w' , b = 'xs';

// 字符串拼接
console.log('.wxs' === a + b);

# 一元运算符

示例代码:

var a = 10, b = 20;

// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);

# 位运算符

示例代码:

var a = 10, b = 20;

// 左移运算
console.log(80 === (a << 3));
// 带符号右移运算
console.log(2 === (a >> 2));
// 无符号右移运算
console.log(2 === (a >>> 2));
// 与运算
console.log(2 === (a & 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));

# 比较运算符

示例代码:

var a = 10, b = 20;

// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));

# 等值运算符

示例代码:

var a = 10, b = 20;

// 等号
console.log(false === (a == b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));

# 赋值运算符

示例代码:

var a = 10;

a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);

# 二元逻辑运算符

示例代码:

var a = 10, b = 20;

// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));

# 其他运算符

示例代码:

var a = 10, b = 20;

//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));

# 运算符优先级

优先级 运算符 说明 结合性
20 ( ... ) 括号 n/a
19 ... . ... 成员访问 从左到右
... [ ... ] 成员访问 从左到右
... ( ... ) 函数调用 从左到右
17 ... ++ 后置递增 n/a
... -- 后置递减 n/a
16 ! ... 逻辑非 从右到左
~ ... 按位非 从右到左
+ ... 一元加法 从右到左
- ... 一元减法 从右到左
++ ... 前置递增 从右到左
-- ... 前置递减 从右到左
typeof ... typeof 从右到左
void ... void 从右到左
delete ... delete 从右到左
14 ... * ... 乘法 从左到右
... / ... 除法 从左到右
... % ... 取模 从左到右
13 ... + ... 加法 从左到右
... - ... 减法 从左到右
12 ... << ... 按位左移 从左到右
... >> ... 按位右移 从左到右
... >>> ... 无符号右移 从左到右
11 ... < ... 小于 从左到右
... <= ... 小于等于 从左到右
... > ... 大于 从左到右
... >= ... 大于等于 从左到右
10 ... == ... 等号 从左到右
... != ... 非等号 从左到右
... === ... 全等号 从左到右
... !== ... 非全等号 从左到右
9 ... & ... 按位与 从左到右
8 ... ^ ... 按位异或 从左到右
7 ... | ... 按位或 从左到右
6 ... && ... 逻辑与 从左到右
5 ... || ... 逻辑或 从左到右
4 ... ? ... : ... 条件运算符 从右到左
3 ... = ... 赋值 从右到左
... += ... 赋值 从右到左
... -= ... 赋值 从右到左
... *= ... 赋值 从右到左
... /= ... 赋值 从右到左
... %= ... 赋值 从右到左
... <<= ... 赋值 从右到左
... >>= ... 赋值 从右到左
... >>>= ... 赋值 从右到左
... &= ... 赋值 从右到左
... ^= ... 赋值 从右到左
... |= ... 赋值 从右到左
0 ... , ... 逗号 从左到右

# 语句

# if 语句

在 FXS 中,可以使用以下格式的 if 语句 :

示例语法:

// if ...

if (表达式) 语句;

if (表达式)
  语句;

if (表达式) {
  代码块;
}


// if ... else

if (表达式) 语句;
else 语句;

if (表达式)
  语句;
else
  语句;

if (表达式) {
  代码块;
} else {
  代码块;
}

// if ... else if ... else ...

if (表达式) {
  代码块;
} else if (表达式) {
  代码块;
} else if (表达式) {
  代码块;
} else {
  代码块;
}


# switch 语句

示例语法:

switch (表达式) {
  case 变量:
    语句;
  case 数字:
    语句;
    break;
  case 字符串:
    语句;
  default:
    语句;
}

示例代码:

var exp = 10;

switch ( exp ) {
case "10":
  console.log("string 10");
  break;
case 10:
  console.log("number 10");
  break;
case exp:
  console.log("var exp");
  break;
default:
  console.log("default");
}

输出:

number 10

# for 语句

示例语法:

for (语句; 语句; 语句)
  语句;

for (语句; 语句; 语句) {
  代码块;
}

示例代码:

for (var i = 0; i < 3; ++i) {
  console.log(i);
  if( i >= 1) break;
}

输出:

0
1

# while 语句

示例语法:

while (表达式)
  语句;

while (表达式){
  代码块;
}

do {
  代码块;
} while (表达式)

# 数据类型

FXS 语言目前共有以下几种数据类型:

  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则

# number

# 语法

number 包括两种数值:整数,小数。

var a = 10;
var PI = 3.141592653589793;

# 属性
  • constructor:返回字符串 "Number"。
# 方法
  • toString
  • toLocaleString
  • valueOf
  • toFixed
  • toExponential
  • toPrecision

# string

# 语法

string 有两种写法:

'hello world';
"hello world";

# 属性
  • constructor:返回字符串 "String"。
  • length
# 方法
  • toString
  • valueOf
  • charAt
  • charCodeAt
  • concat
  • indexOf
  • lastIndexOf
  • localeCompare
  • match
  • replace
  • search
  • slice
  • split
  • substring
  • toLowerCase
  • toLocaleLowerCase
  • toUpperCase
  • toLocaleUpperCase
  • trim

# boolean

# 语法

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

# 属性
  • constructor:返回字符串 "Boolean"。
# 方法
  • toString
  • valueOf

# object

# 语法

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

var o = {} //生成一个新的空对象

//生成一个新的非空对象
o = {
  'string'  : 1,  //object 的 key 可以是字符串
  const_var : 2,  //object 的 key 也可以是符合变量定义规则的标识符
  func      : {}, //object 的 value 可以是任何类型
};

//对象属性的读操作
console.log(1 === o['string']);
console.log(2 === o.const_var);

//对象属性的写操作
o['string']++;
o['string'] += 10;
o.const_var++;
o.const_var += 10;

//对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);

# 属性
  • constructor:返回字符串 "Object"。
console.log("Object" === {k:"1",v:"2"}.constructor)

# 方法
  • toString:返回字符串 "[object Object]"。

# function

# 语法

function 支持以下的定义方式:

//方法 1
function a (x) {
  return x;
}

//方法 2
var b = function (x) {
  return x;
}

function 同时也支持以下的语法(匿名函数,闭包等):

var a = function (x) {
  return function () { return x;}
}

var b = a(100);
console.log( 100 === b() );

# arguments

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

  • length: 传递给函数的参数个数。
  • [index]: 通过 index 下标可以遍历传递给函数的每个参数。 示例代码:
var a = function(){
  console.log(3 === arguments.length);
  console.log(100 === arguments[0]);
  console.log(200 === arguments[1]);
  console.log(300 === arguments[2]);
};
a(100,200,300);

# 属性
  • constructor:返回字符串 "Function"。
  • length:返回函数的形参个数。
# 方法
  • toString:返回字符串 "[function Function]"。 示例代码:
var func = function (a,b,c) { }

console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());

# array

# 语法

array 支持以下的定义方式:

var a = [];      //生成一个新的空数组

a = [1,"2",{},function(){}];  //生成一个新的非空数组,数组元素可以是任何类型

# 属性
  • constructor:返回字符串 "Array"。
  • length
# 方法
  • toString
  • concat
  • join
  • pop
  • push
  • reverse
  • shift
  • slice
  • sort
  • splice
  • unshift
  • indexOf
  • lastIndexOf
  • every
  • some
  • forEach
  • map
  • filter
  • reduce
  • reduceRight

# date

# 语法

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

getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])

  • 参数 milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数 datestring: 日期字符串,其格式为:"month day, year hours:minutes:seconds" 示例代码:
var date = getDate(); //返回当前时间对象

date = getDate(1500000000000);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)

# 属性
  • constructor:返回字符串 “Date”。
# 方法
  • toString
  • toDateString
  • toTimeString
  • toLocaleString
  • toLocaleDateString
  • toLocaleTimeString
  • valueOf
  • getTime
  • getFullYear
  • getUTCFullYear
  • getMonth
  • getUTCMonth
  • getDate
  • getUTCDate
  • getDay
  • getUTCDay
  • getHours
  • getUTCHours
  • getMinutes
  • getUTCMinutes
  • getSeconds
  • getUTCSeconds
  • getMilliseconds
  • getUTCMilliseconds
  • getTimezoneOffset
  • setTime
  • setMilliseconds
  • setUTCMilliseconds
  • setSeconds
  • setUTCSeconds
  • setMinutes
  • setUTCMinutes
  • setHours
  • setUTCHours
  • setDate
  • setUTCDate
  • setMonth
  • setUTCMonth
  • setFullYear
  • setUTCFullYear
  • toUTCString
  • toISOString
  • toJSON

# regexp

# 语法

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

getRegExp(pattern[, flags])

  • 参数: pattern: 正则表达式的内容。 flags:修饰符。该字段只能包含以下字符: g: global i: ignoreCase m: multiline。 示例代码:
var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);

# 属性
  • constructor:返回字符串 "RegExp"。
  • source
  • global
  • ignoreCase
  • multiline
  • lastIndex
# 方法
  • exec
  • test
  • toString

# 数据类型判断

# constructor 属性

数据类型的判断可以使用 constructor 属性。

示例代码:

var number = 10;
console.log( "Number" === number.constructor );

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

var boolean = true;
console.log( "Boolean" === boolean.constructor );

var object = {};
console.log( "Object" === object.constructor );

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

var array = [];
console.log( "Array" === array.constructor );

var date = getDate();
console.log( "Date" === date.constructor );

var regexp = getRegExp();
console.log( "RegExp" === regexp.constructor );

# typeof

使用 typeof 也可以区分部分数据类型。

示例代码:

var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();

console.log( 'number' === typeof number );
console.log( 'boolean' === typeof boolean );
console.log( 'object' === typeof object );
console.log( 'function' === typeof func );
console.log( 'object' === typeof array );
console.log( 'object' === typeof date );
console.log( 'object' === typeof regexp );

console.log( 'undefined' === typeof undefined );
console.log( 'object' === typeof null );

# 基础类库

# console

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

# Math

# 属性

  • E
  • LN10
  • LN2
  • LOG2E
  • LOG10E
  • PI
  • SQRT1_2
  • SQRT2

# 方法

  • 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 字符串转化成对象,并返回该对象。 示例代码:

console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null"===JSON.stringify(null));

console.log("111"===JSON.stringify(111));
console.log('"111"'===JSON.stringify("111"));
console.log("true"===JSON.stringify(true));
console.log(undefined===JSON.stringify(function(){}));


console.log(undefined===JSON.parse(JSON.stringify()));
console.log(undefined===JSON.parse(JSON.stringify(undefined)));
console.log(null===JSON.parse(JSON.stringify(null)));

console.log(111===JSON.parse(JSON.stringify(111)));
console.log("111"===JSON.parse(JSON.stringify("111")));
console.log(true===JSON.parse(JSON.stringify(true)));

console.log(undefined===JSON.parse(JSON.stringify(function(){})));

# 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
© 2021 凡泰极客

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

400-066-00210755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单