微信小程序——WXS脚本

介绍

WXS（WeiXin Script）是小程序的一套脚本语言，结合WXML，可以构建出页面的结构。

WXS语言设计时，为了降低WXS的学习成本，设计人员大量借鉴了javascript的语法，但是本质上WXS与JavaScript时完全不同的两种语言！ 

实际举例

 初学小白可能会有些晕😵，接下来举一个实际应用中的例子：

功能需求：做一个日期显示，要求格式：****年**月**日，后台已返回时间戳。

JS示例：

不使用WXS，用JS函数，看看微信小程序是否能实现功能。

JS页面内容：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    curTime:1731042039003
  },

  /**
  * 时间戳格式化处理
  * 此处先做一个简单的验证示例，验证一下JS函数是否可以在WXML中正常运行
  */
  handleDate() {
    console.log(1111)
    return "111111" 
  }
})

WXML页面内容

<!-- 显示格式化后的日期 -->
<view >时间戳：{{curTime}}</view>
<view >格式化后的时间：{{handleDate()}}</view>

运行结果：

结果没有显示，JS函数没有执行，也就是这种方法是不可用的。JS函数在WXML中需要绑定事件才可以运行。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

JS页面内容：

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username:"wx",
    num:"wsxc",
    curTime:1731042039003,
    curDate:""
  },

/* 时间戳格式化处理 */
handleDate(e) {
  console.log(e);
  var strTime=e.currentTarget.dataset.time
  var date=new Date(strTime)
  console.log(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日")
  this.setData({
    curDate:date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"
  })
}
)}

 WXML页面内容：

<view bind:tap="handleDate" data-time="{{curTime}}">格式化后的时间：{{curDate}}</view>

注意：bind:tap是用户点击事件，记得点击组件触发函数。 

运行结果：

格式化后的时间：2024年11月8日 

WXS示例：

WXML页面内容：

注意：wxs页面路径为相对路径，这里的WXML页面与WXS页面在同级目录下。

<wxs src="./date.wxs" module="ww"></wxs>
<view>WXS脚本语言格式化后的事件：{{ww(curTime)}}</view>

date.wxs页面内容：

function handleDate(strTime) {
  var date=getDate(strTime)
  return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日" 
}
module.exports=handleDate

运行结果：

WXS脚本语言格式化后的事件：2024年11月8日

总结： 

从以上两种示例来看，JS需要事件触发函数，WXS中的函数可以直接运行，不需要事件触发就可以实现模板的数据预处理。

WXS的应用场景

WXML中无法调用在页面的.js中定义的函数，但是，WXML中可以调用WXS中定义的函数。因此，小程序中WXS的典型应用场景就是“过滤器”。

WXS与JavaScript的关系

虽然WXS的语法类似于JavaScript，但是WXS与JavaScript还是有所不同的：

1、wxs有自己的数据类型

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

2、WXS不支持类似于ES6以上的语法类型

• 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
• 支持：var定义变量、普通function函数等类似于ES5的语法

3、WXS遵循CommonJS规范

• module对象
• require()函数
• module.exports 对象

 WXS的基本用法

1、<wxs> 标签

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

 2、内嵌WXS脚本

wxs 代码可以编写在wxml 文件中的<wxs> 标签内，就像Javascript代码可以编写在html文件中的 <script>标签内一样。
wxml 文件中的每个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs 的模块名称，方便在 wxml 中访问模块中的成员。

WXML页面内容：

<view>{{demo1.toUpper(username)}}</view>
<wxs module="demo1">
  module.exports.toUpper=function(str){
    return str.toUpperCase();
  }
</wxs>

 JS页面内容：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    username:"wx",
    num:"wsxc","
  }
})

3、外联WXS脚本

WXS代码还可以编写在以 .wxs 为后缀名的文件内，就像javascript 代码可以编写在以 .js 为后缀名的文件中一样。

在 wxml 中引入外联的 wxs 脚本时，必须为 <wxs>标签添加 module 和 src 属性，其中:module 用来指定模块的名称，src 用来指定要引入的脚本的路径，且必须是相对路径。

WXS文件内容

// utils/tools.wxs
function tolower(str){
return str.toLowerCase()
}
module.exports={
  tolower:tolower
}

WXS页面内容

<!--pages/contact/contact.wxml-->
<view>{{tools.tolower(num)}}</view>
<wxs src="../../utils/tools.wxs" module="tools"></wxs>

JS页面内容

Page({

  /**
   * 页面的初始数据
   */
  data: {
    username:"wx",
    num:"wsxc","
  }
})

4、WXS模块中引入其他WXS文件模块

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

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

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

tools.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";

logic.wxs文件内容

// /pages/logic.wxs

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

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

 WXML文件内容：

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

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

控制台输出：

'hello world' from tools.wxs
logic.wxs
some msg

 WXS的特点

1、与 JavaScript不同

为了降低 wxs(WeiXin Script)的学习成本，wxs 语言在设计时借大量鉴了|avaScript 的语法。但是本质上wxs 和 JavaScript 是完全不同的两种语言! 

2、WXS不能直接用作组件的事件回调函数

官方解释：

WXS（WeiXin Script）在微信小程序中不能直接用作组件的事件回调函数。这是因为WXS的设计初衷是为了处理简单的数据逻辑，以减轻逻辑层（即JavaScript）的负担，并提升渲染性能。

具体来说，WXS主要用于以下几个方面：

• 数据处理：对绑定的数据进行简单的转换或计算。
• 条件渲染：在WXML模板中进行简单的条件判断。
• 过滤器：对显示的数据进行格式化处理。

然而，由于WXS的运行环境和JavaScript不同，它并不支持所有的JavaScript语法和API，也不支持异步操作。因此，当涉及到复杂的逻辑或需要与逻辑层进行交互时，仍然需要在JavaScript中处理。

在微信小程序中，组件的事件回调函数需要在Page或Component的methods中定义，并通过bind指令绑定到组件上。例如：

<view bindtap="handleTap">Click me</view>

Page({
  handleTap: function(event) {
    console.log('View tapped', event);
  }
});

在这个例子中，handleTap是在Page的methods中定义的一个函数，它会在用户点击视图时被调用。

总结来说，WXS适用于简单的逻辑处理，但不适合用作组件的事件回调函数。对于需要响应用户交互的事件，应当在JavaScript中定义相应的处理函数。

但在官方文档中，使用WXS函数响应事件

基础库 2.4.4 开始支持，低版本需做兼容处理。

从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：

• 在组件中绑定和注册事件处理的WXS函数。

注意：WXS函数必须用{{}}括起来 

<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="Weixin" bindtap="{{wxs.tapName}}"> Click me! </view>
**注：绑定的WXS函数必须用{{}}括起来**

• test.wxs文件实现tapName函数

function tapName(event, ownerInstance) {
  console.log('tap Weixin', JSON.stringify(event))
}
module.exports = {
  tapName: tapName
}

ownerInstance包含了一些方法，可以设置组件的样式和class，具体包含的方法以及为什么要用WXS函数响应事件，请点击查看详情。

 控制台运行结果：

3、隔离性 

隔离性指的是 wxs 的运行环境和其他JavaScript 代码是隔离的。体现在如下两方面: 

• WXS不能调用JS中定义的函数wxs
• WXS不能调用小程序提供的 API

4、性能好

•   在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。
•   在 android 设备上，二者的运行效率无差异

 参考文献：官方文档