WXS

参考

WXS（WeiXin Script）是小程序的一套脚本语言，代码运行在视图层（Webview），结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。WXS通常被用来做页面数据的过滤或者是使用WXS进行数据的计算处理。

与js的差异：

wxs 可以直接作用到视图层，而不需要进行视图层和逻辑层的 setData 数据交互，可以优化性能
语法和 es5 基本相同，但不支持 es6 语法

注释

// 方法一：单行注释

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

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

模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。每个 wxs 模块均有一个内置的 module 对象。该对象有个名为 exports 的属性，通过该属性，可以对外共享本模块的私有变量与函数。

require函数

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

引用的时候，要注意如下几点：

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

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

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

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

`<wxs>` 标签

<wxs> 标签有两个属性：

module : String 类型，表示当前wxs标签的模块名
src : String 类型，引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

标签有内容时就会使用标签的module，所以单闭合标签和 src 无效
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。

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

首字符必须是：字母（a-zA-Z），下划线（_）
剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）

<!--wxml-->

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

注意事项

<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

变量

概念

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

变量名

首字符必须是：字母（a-zA-Z），下划线（_）
剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）
有些标识符不能作为变量名

支持的语句

if else 语句
switch 语句
for 语句
while 语句

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

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

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

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

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

数据类型

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

基础类库

日志输出

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

Math

常用的数学方法

Json

stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。
parse(string): 将 JSON 字符串转化成对象，并返回该对象。

WXS 响应事件

参考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html

WXS 函数的除了纯逻辑的运算，还可以通过封装好的ComponentDescriptor 实例来访问以及设置组件的 class 和样式。
使用方法：

<!--wxml-->
<wxs module="test" src="./test.wxs"></wxs>
<view change:prop="{{test.propObserver}}" prop="{{propValue}}" bindtouchmove="{{test.touchmove}}" class="movable"></view>

<!--test.wxs-->
module.exports = {
    touchmove: function(event, instance) {
        console.log('log event', JSON.stringify(event))
    },
    propObserver: function(newValue, oldValue, ownerInstance, instance) {
        console.log('prop observer', newValue, oldValue)
    }
}

注意

WXS函数必须用 {{}} 括起来。当 prop 的值被设置 WXS 函数就会触发，而不只是值发生改变，所以在页面初始化的时候会调用一次WxsPropObserver的函数。
使用 WXS 函数用来响应小程序事件，目前只能响应内置组件的事件，不支持自定义组件事件。

使用技巧

wxs传参到js逻辑层

<!--wxs-->
var dragStart = function (e, ins) {
	ins.callMethod('callback','sldkfj')
}

<!--js-->
callback(e){
	console.log(e)
}
// sldkfj

js逻辑层传参到wxs文件


<!--js-->
handler(e){
	this.setData({a:1})
}

<!--wxml-->
<wxs module="action" src="./movable.wxs"></wxs> 
<view change:prop="{{action.change}}" prop="{{a}}"></view>

<!--wxs-->
change(newValue,oldValue){}